Deploying a Vue.js application with Now

Vue.js is an open source JavaScript framework for building user interfaces. It is popularly known for its gentle learning curve and is adopted by a lot of developers for crafting single-page applications (SPAs) globally.

In this guide, we will cover how to deploy a Vue.js application with ZEIT Now.

Step 1: Set Up Your Vue.js Project

First, set up a Vue.js project using the official Vue CLI to quickly scaffold a batteries-included Vue.js SPA.

If you don't have the Vue CLI installed globally, use the following command to install it globally:

Installing Vue CLI global to the system user with Yarn.

After a successful installation, create a new project and cd into the project folder. Use the following command in your terminal to do so:

Creating a bootstrapped Vue.js project and moving into the directory within a terminal.

An option to choose a preset will be presented to you after running the command above.

After choosing an option, Vue CLI installs all the required dependencies and provisions a new project for you.

To see your new Vue.js project running, you should add a now-dev script to your package.json, this will allow you to replicate the Now environment locally:

{
  "scripts": {
    ...
    "now-dev": "vue-cli-service serve  --port=$PORT"
  }
}

Adding a now dev script to the package.json file.

The @now/static-build Builder supports a custom now-dev script that allows you to define custom development behavior while gaining extra features that mimic the Now platform locally.

To run your project locally, all that's required is a single command:

Next, to extend the project with routing; install the official Vue.js router by running the following command in your terminal:

Installing the Vue.js router with Vue CLI.

Vue CLI adds the router to the project and automatically updates the project files with basic routing functionality.

Step 2: Deploy Your Vue.js Project to Now

After your project is set up, you are ready to deploy your Vue.js app to Now.

If you have not yet installed Now, you can do so by installing the Now Desktop app which installs Now CLI automatically, or by installing Now CLI directly.

For the deployment to build and act as you would expect, you need to create a now.json configuration file file to instruct Now on how to build the project with a build step.

{
  "version": 2,
  "name": "my-vue-project",
  "builds": [{ "src": "package.json", "use": "@now/static-build" }],
  "routes": [
    { "src": "^/js/(.*)", "dest": "/js/$1" },
    { "src": "^/css/(.*)", "dest": "/css/$1" },
    { "src": "^/img/(.*)", "dest": "/img/$1" },
    { "src": ".*", "dest": "/index.html" }
  ]
}

A sample now.json configuration file that specifies a Builder.

This now.json file achieves a few things:

• Defines a version property to ensure you are using the latest Now 2.0 platform version.
• Defines a project name that your deployments will be sorted under and known by under Now.
• Defines a builds property as an array with one build step using @now/static-build to instruct Now to statically build the project and deploy the dist directory. Using the package.json file as an entrypoint, more on that below.
• Defines a routes property as an array that contains route objects to route all files under the js, css, and img directories to the right place whilst providing a fallback to index.html for all other routes so that Vue.js can handle routing internally.

For the build property that you configured, add a now-build script in the generated package.json file to specify what command Now will run to build the app in the cloud.

{
    "scripts": {
      ...
      "build": "vue-cli-service build",
      "now-build": "vue-cli-service build"
    },
}

A sample package.json file with scripts for Vue.

yarn build creates a directory called dist which Now identifies as the static folder by default and will deploy it.

You are now ready to deploy the app with Now:

Once the app is deployed, you will receive a deployment URL similar to the following: https://my-vue-project-ro3oxryae.now.sh/

You can see that our routes were successful by going to the generated /about route directly: https://my-vue-project-ro3oxryae.now.sh/about

Bonus: Cache Your Vue.js Assets

Caching your sites is essential for serving fast and highly performant sites to your users. Thankfully, you can configure Now's routes within your now.json configuration file to set up caching headers.

In the now.json configuration file, modify the existing routes property with cache-control headers:

{
  ...
  "routes": [
    {"src": "^/js/(.*)", "headers": {"cache-control": "max-age=31536000,immutable"}, "dest": "/js/$1"},
    {"src": "^/css/(.*)", "headers": {"cache-control": "max-age=31536000,immutable"}, "dest": "/css/$1"},
    {"src": "^/img/(.*)", "headers": {"cache-control": "max-age=31536000,immutable"}, "dest": "/img/$1"},
    {"src": ".*", "headers": {"cache-control": "max-age=0,must-revalidate"}, "dest": "/index.html"}
  ]
}

Routes configuration for setting caching headers in a now.json configuration file.

Resources

For more information on working with Vue.js, please refer to their documentation.

To configure Now further, please see these additional topics and guides: