Deploy a Vue.js App


You can deploy a Vue.js app on Render in under a minute. Your site is served over a lightning-fast global CDN, comes with fully managed SSL certificates from Let’s Encrypt, and supports custom domains out of the box.

The sample app for this quick start is deployed at https://vue.onrender.com.

  1. Use your existing Vue.js repository, or fork our sample Vue.js repo on GitHub or GitLab.
  2. Create a new Web Service on Render, and give Render permission to access your new repo.
  3. Use the following values during creation:

    EnvironmentStatic Site
    Build Commandyarn build
    Publish Directorydist

That’s it! Your app will be live on your Render URL as soon as the build finishes.

Using Client-Side Routing

If you use Vue Router for client-side routing, you will need to direct all routing requests to index.html so they can be handled by your routing library.

You can do this easily by defining a Rewrite Rule for your static site. Go to the Redirects/Rewrites tab for your service and add a rule with the following values:

Source Path/*
Destination Path/index.html
ActionRewrite

The result should look like this:

Vue Router Rewrite

A note on Node versions

By default, Render uses the latest LTS version of Node.

It can also automatically detect and install the version of Node specified in the engines directive in package.json. This can be an exact version like 10.11.0 or a range like >=10.11 <10.12.

This is the relevant snippet from package.json in this repo:

  "engines": {
    "node": ">=10 <11"
  }