Edgio
Edgio Console

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

Try the Vue.js Site Example
View the Code

Prerequisites

Setup requires:

Install the Edgio CLI

If you have not already done so, install the Edgio CLI.
Bash
1npm i -g @edgio/cli@latest

Create your Vue site

If you don’t have an existing Vue 3 site, you can create one by running:
Bash
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:
Bash
1edgio init --edgioVersion latest
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/connectors 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.

Routing

The default routes.js file created by edgio init sends all requests to Vue server via a fallback route.
JavaScript
1// This file was added by edgio init.
2// You should commit this file to source control.
3

4import {Router} from '@edgio/core';
5import {connectorRoutes} from '@edgio/connectors';
6

7export default new Router().use(connectorRoutes);
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:
Bash
1edgio dev
You can do a production build of your app and test it locally using:
Bash
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:
Bash
1edgio deploy
Your initial CDN-as-code deployment will generate system-defined origin configurations along with those defined within your edgio.config.js. Learn more about system-defined origins.
Refer to the Deployments guide for more information on the deploy command and its options.

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:
JavaScriptsw/service-worker.js
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:
JavaScript
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:
JavaScript
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:
JavaScript
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.

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.