🎉 Introducing Edgio v6 which supports Node.js v16. Learn how to upgrade. 🎉


Vue.js is a progressive JavaScript framework. This guide walks you through deploying Vue.js sites to Edgio.

Edgio supports both Vue 2 and Vue 3, using both CLIs - @vue/cli and vite.



Edgio provides a connector for this framework. Learn more.

System Requirements

Sign up for Edgio

Deploying requires an account on Edgio. Sign up here for free.

Install the Edgio CLI

If you have not already done so, install the Edgio CLI.

1npm i -g @edgio/cli

Create your Vue site

If you don’t have an existing Vue 3 site, you can create one by running:

1npm init vue@latest

This command will create a project based on vite.

If you need help with Vue initialization, please follow the create-vue project’s readme.

Edgio also supports the older, Webpack-based @vue/cli - more on that in the Vue CLI documentation.

Initializing your Project

Initialize your project for use with Edgio by running the following command in your project’s root directory:

1npm i && edgio init

This will automatically add all of the required dependencies and files to your project. These include:


  • The @edgio/vue package - Provides a Prefetch component for prefetching pages.
  • The @edgio/vue-cva package - Provides build and routing mechanisms for Vue projects. [INIT_DEFAULT_FILES]



In order to initialize it, call the install function from @edgio/prefetch/window when the app first loads:

1import { isProductionBuild } from '@edgio/core/environment';
2import { install } from '@edgio/prefetch/window'
4if (isProductionBuild()) {
5 install()

The above code allows you to prefetch pages from Edgio’s edge cache to greatly improve browsing speed. To prefetch a page, add the Prefetch component from @edgio/vue around any rendered component, as such:

2 import { Prefetch } from '@edgio/vue'
6 {/* The URL you need to prefetch is the API call that the page component will make when it mounts. It will vary based on how you've implemented your site. */}
7 <Prefetch url='/api/products/1.json'>
8 <a href='/api/products/1.json'>Product 1</a>
9 </Prefetch>

The Prefetch component fetches data for the linked page from Edgio’s edge cache and adds it to the service worker’s cache when the link becomes visible in the viewport. When the user taps on the link, the page transition will be instantaneous because the browser won’t need to fetch data from the network.

By default, Prefetch waits until the link appears in the viewport before prefetching. You can prefetch immediately by setting the immediately prop:

1<Prefetch url='/api/products/1.json' immediately>
2 <a href='/api/products/1.json'>Product 1</a>

Refer to the Predictive Prefetch for more examples of prefetch functionality.


The default routes.js file created by edgio init sends all requests to Vue server via a fallback route.

1// This file was added by edgio init.
2// You should commit this file to source control.
4const { Router } = require('@edgio/core/router')
5const { vueRoutes } = require('@edgio/vue-cva')
7export default new Router().use(vueRoutes)

Refer to the CDN-as-code guide for the full syntax of the routes.js file and how to configure it for your use case.

Running Locally

To test your app locally, run:

1edgio dev

You can do a production build of your app and test it locally using:

1edgio build && edgio run --production

Setting --production runs your app exactly as it will be when deployed to the Edgio cloud.

Deploy to Edgio

Deploy your app to the Sites by running the following command in your project’s root directory:

1edgio deploy

Refer to the Deployments guide for more information on the deploy command and its options.

Server Side Rendering

For server side rendered Vue.js apps we recommend using the Nuxt.js framework which is supported on Edgio. Refer to the Nuxt guide for more information.