Vue.js

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.

Example #

Connector #

Edgio provides a connector for this framework. Learn more.

System Requirements #

• Install Node.js 14.19.0

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/cli package - Allows you to control Edgio through project-local CLI.

• The @edgio/core package - Allows you to declare routes and deploy your application to Edgio.

• The @edgio/prefetch package - Allows you to configure a service worker to prefetch and cache pages to improve browsing speed.

• The @edgio/devtools package - Allows you to monitor the caching and prefetching functionality.

• The @edgio/vue package - Provides a Prefetch component for prefetching pages.

• The @edgio/vue-cva package - Provides build and routing mechanisms for Vue projects.

• edgio.config.js - Contains various configuration options for Edgio.

• routes.js - A default routes file that proxies all requests to the server. Update this file to add caching or proxy some URLs to a different origin.

• sw/service-worker.js - A service worker implemented using Workbox.

Prefetching #

The edgio init command adds a service worker based on Workbox at sw/service-worker.js. If you have an existing service worker that uses workbox, you can copy its contents into sw/service-worker.js and simply add the following to your service worker:

1import { Prefetcher } from '@edgio/prefetch/sw';
2
3new Prefetcher().route();

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';
3
4if (isProductionBuild()) {
5  install();
6}

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:

1<script>
2  import { Prefetch } from '@edgio/vue'
3</script>
4
5<template>
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>
10</template>

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>
3</Prefetch>

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

Routing #

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.
3
4const {Router} = require('@edgio/core/router');
5const {vueRoutes} = require('@edgio/vue-cva');
6
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.