Skip to content

Commit 73e059a

Browse files
authored
Update Vercel deployment instructions (#5835)
1 parent 352d759 commit 73e059a

File tree

1 file changed

+21
-60
lines changed

1 file changed

+21
-60
lines changed

docs/guide/deployment.md

+21-60
Original file line numberDiff line numberDiff line change
@@ -284,77 +284,38 @@ Please refer to the [Firebase Documentation](https://firebase.google.com/docs/ho
284284

285285
### Vercel
286286

287-
This example uses the latest Vercel platform version 2.
287+
[Vercel](https://vercel.com/home) is a cloud platform that enables developers to host Jamstack websites and web services that deploy instantly, scale automatically, and requires no supervision, all with zero configuration. They provide a global edge network, SSL encryption, asset compression, cache invalidation, and more.
288288

289-
1. Install the Vercel CLI:
289+
#### Step 1: Deploying your Vue project to Vercel
290290

291-
```bash
292-
npm install -g vercel
291+
To deploy your Vue project with a [Vercel for Git Integration](https://vercel.com/docs/git-integrations), make sure it has been pushed to a Git repository.
293292

294-
# Or, if you prefer a local one
295-
npm install vercel
296-
```
293+
Import the project into Vercel using the [Import Flow](https://vercel.com/import/git). During the import, you will find all relevant [options](https://vercel.com/docs/build-step#build-&-development-settings) preconfigured for you with the ability to change as needed.
297294

298-
2. Add a `vercel.json` file to your project root:
295+
After your project has been imported, all subsequent pushes to branches will generate [Preview Deployments](https://vercel.com/docs/platform/deployments#preview), and all changes made to the [Production Branch](https://vercel.com/docs/git-integrations#production-branch) (commonly "master" or "main") will result in a [Production Deployment](https://vercel.com/docs/platform/deployments#production).
299296

300-
```json
301-
{
302-
"name": "my-example-app",
303-
"version": 2,
304-
"builds": [
305-
{
306-
"src": "package.json",
307-
"use": "@vercel/static-build"
308-
}
309-
],
310-
"routes": [
311-
{
312-
"src": "/(js|css|img)/.*",
313-
"headers": { "cache-control": "max-age=31536000, immutable" }
314-
},
315-
{ "handle": "filesystem" },
316-
{ "src": ".*", "dest": "/" }
317-
],
318-
"alias": "example.com"
319-
}
320-
```
297+
Once deployed, you will get a URL to see your app live, such as the following: https://vue-example-tawny.vercel.app/.
321298

322-
If you have different/additional folders, modify the route accordingly:
323-
324-
```diff
325-
- {
326-
- "src": "/(js|css|img)/.*",
327-
- "headers": { "cache-control": "max-age=31536000, immutable" }
328-
- }
329-
+ {
330-
+ "src": "/(js|css|img|fonts|media)/.*",
331-
+ "headers": { "cache-control": "max-age=31536000, immutable" }
332-
+ }
333-
```
299+
#### Step 2 (optional): Using a Custom Domain
334300

335-
If your `outputDir` is not the default `dist`, say `build`:
336-
337-
```diff
338-
- {
339-
- "src": "package.json",
340-
- "use": "@vercel/static-build"
341-
- }
342-
+ {
343-
+ "src": "package.json",
344-
+ "use": "@vercel/static-build",
345-
+ "config": { "distDir": "build" }
346-
+ }
347-
```
301+
If you want to use a Custom Domain with your Vercel deployment, you can **Add** or **Transfer in** your domain via your Vercel [account Domain settings.](https://vercel.com/dashboard/domains)
348302

349-
3. Adding a `now-build` script in `package.json`:
303+
To add your domain to your project, navigate to your [Project](https://vercel.com/docs/platform/projects) from the Vercel Dashboard. Once you have selected your project, click on the "Settings" tab, then select the **Domains** menu item. From your projects **Domain** page, enter the domain you wish to add to your project.
350304

351-
```json
352-
"vercel-build": "npm run build"
353-
```
305+
Once the domain as been added, you will be presented with different methods for configuring it.
306+
307+
#### Deploying a fresh Vue project
308+
309+
You can deploy a fresh Vue project, with a Git repository set up for you, with the following Deploy Button:
310+
311+
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fvercel%2Fvercel%2Ftree%2Fmaster%2Fexamples%2Fvue)
354312

355-
To make a deployment, run `vercel`.
313+
## References:
356314

357-
If you want your deployment aliased, run `vercel --target production` instead.
315+
- [Example Source](https://github.com/vercel/vercel/tree/master/examples/vue)
316+
- [Official Vercel Guide](https://vercel.com/guides/deploying-vuejs-to-vercel)
317+
- [Vercel Deployment Docs](https://vercel.com/docs)
318+
- [Vercel Custom Domain Docs](https://vercel.com/docs/custom-domains)
358319

359320
### Stdlib
360321

0 commit comments

Comments
 (0)