Build with Vue
Deploy a Vue single-page application on Azion from a template in Azion Console, a GitHub repository, or the Azion CLI.
You can put a Vue app on Azion from a template in Azion Console, from a GitHub repository you own, or with the Azion CLI. All three routes finish with the app live on an Azion domain.
Azion runs a Vue app as a static application. The deploy uploads the built files to a storage bucket, and an application serves them from there. To see which other frameworks Azion builds, refer to Frameworks compatibility.
Choose a route below. The prerequisites and the deploy procedure change with your choice.
Prerequisites
- An Azion account. To open one, refer to Create an account.
- Access to Azion Console. To sign in, refer to How to access Azion Console.
- A GitHub account, which the template form connects when it asks for one.
Vue templates
A Vue template is a complete starter project that Azion builds and deploys for you. The template picker of the Vue preset in azion init includes these three:
| Template | Use |
|---|---|
| Vue.js with ButterCMS Starter Project | CMS integration |
| Vue3/Vite Boilerplate | Single-page application with Vite |
| Vue Boilerplate | Single-page application |
Each template links to its guide. The ButterCMS starter shares its guide with the ButterCMS templates of other frameworks. For more information on templates, refer to Azion Marketplace.
Deploy the app
Every route builds the Vue project and creates the resources that serve it on Azion. Use the panel of the route you chose:
To create the project, run azion init with a project name. In the preset picker, select Vue, and in the template picker, select a template:
With -y, the command installs the dependencies. With --auto, it does not ask whether to start a local development server or to deploy. For the questions it asks without these options, refer to Azion CLI init. With the Vue Boilerplate template, the output is:
The project is created in a my-app folder. Its azion.config.cjs sets the vue preset and uploads ./.edge/assets to a storage bucket that workloads can only read. The file also generates two request rules for the application:
Deliver Static Assets and Set Cache Policyserves files with a static extension, such as.jsor.css, from the bucket. Its cache policy setsmaxAgeSecondsto7200for the browser and for the cache.Redirect to index.htmlrewrites route requests to/index.html, so the Vue router resolves each route in the browser.
For every setting in that file, refer to azion.config.js.
To build the app, move into the project folder and run azion build:
Azion Bundler runs vite build with the vue preset. Vite writes the app to dist, and the files the deploy uploads land in .edge/assets:
To deploy the app, run azion deploy from the project folder:
The deploy uploads the project and opens the Azion Console page that tracks it. If the browser does not open, use the URL of that page, which the command prints. At the end, the command prints the URL of the app’s domain. For the full output and the flags that change a deploy, refer to Azion CLI deploy.
To run the app on your machine first, refer to Azion CLI dev. For a Vue project you already have, run azion link in its folder and select the Vue preset, as described in Azion CLI link.
Check the app
Each route returns the URL of the app’s Azion domain, in the form https://xxxxxxxxxx.map.azionedge.net. The Console deploy page shows the URL, and azion deploy prints it on completion. Open the URL in a browser to load the Vue app.
The first deploy can take several minutes to answer from every location; later deploys take about two minutes. A location that has not received the app yet answers with a 404 page reading There's nothing here yet. If you get that page, wait and request the URL again.