Build with Vue

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.

Prerequisites

Console

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.

CLI

An Azion account. To open one, refer to Create an account.
The Azion CLI, installed and logged in. For the setup, refer to Azion CLI quickstart.
Node.js 18 or later, with npm.
A terminal and a code editor.

GitHub

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.
A GitHub repository with a Vue project in it.

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:

Console

To deploy a Vue template from Azion Console:

Open the templates

Access Azion Console > Create > Templates.

Search for Vue

In Search by name, framework, or keyword, enter Vue.

Select the template to deploy

Connect your GitHub account

If the form shows GitHub Connection, select Connect with GitHub and install the Azion GitHub App.

Select a Git Scope

In Git Scope, select the scope where the template creates its repository.

Fill in the settings the template asks for

Select Deploy

A deploy page opens with the Deploy Log of the build. On success, Successfully created! appears, together with the domain URL and a Manage button that opens the application.

CLI

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:

azion init --name my-app --auto -y

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:

Text

01? Choose a preset: [Use arrows to move, type to filter]

02> AI Studio

03 Angular

04 Astro

05 Docusaurus

06 Eleventy

07 Emscripten

08 Gatsby

09 Hexo

10 Hono

11 Hugo

12 Javascript

13 Jekyll

14 Next

15 Nuxt

16 OpenNextJS

17 Preact

18 Qwik

19 React

20 Rustwasm

21 Stencil

22 Svelte

23 Typescript

24 Vitepress

25 Vue

26 Vuepress

27? Choose a preset: Vue

28? Choose a template: [Use arrows to move, type to filter]

29> Vue.js with ButterCMS Starter Project

30 Vue3 AI Chatbot Widget

31 Vue3/Vite Boilerplate

32 Vue Boilerplate

33? Choose a template: Vue Boilerplate

35Fetching selected template...

37Template successfully fetched

38Template successfully configured

39Installing application dependencies

40added 35 packages, and audited 36 packages in 2s

419 packages are looking for funding

42run `npm fund` for details

43found 0 vulnerabilities

44…

45[Azion] [Build] › ℹ info Using preset: vue

46[Azion] [Build] › ✔ success Build completed successfully with only azion.config

47[Azion] [IaC] › ✔ success Manifest generated successfully at <project-dir>/my-app/.edge/manifest.json

48If you want to start a local development server later, run 'azion dev'

49Make sure to change to the new working directory before running building or deploying your project

50If you want to deploy your application later, run 'azion deploy'

51Make sure to change to the new working directory before running building or deploying your project

52Your application my-app was initialized successfully

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 Policy serves files with a static extension, such as .js or .css, from the bucket. Its cache policy sets maxAgeSeconds to 7200 for the browser and for the cache.
Redirect to index.html rewrites 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:

Shell

01cd my-app

02azion 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:

Text

01Building your Application. This process may take a few minutes

02Running build step command:

04$ npx --yes @aziontech/bundler@1.1.4 build --preset vue

05…

06[Azion] [Build] › ℹ info Using preset: vue

07[Azion] [Pre-Build] › ℹ info Starting pre-build...

08…

09[Vue/Vite] › ℹ info

10> azion-init-vuejs@0.0.0 build

11> vite build

[Vue/Vite] › ℹ  info      (!) Your Vite config uses features that are unsupported by `configLoader: 'native'`, which is planned to become the default in a future major version of Vite:

  - ESM syntax in a file loaded as CommonJS (vite.config.js:1:1). Use a `.mjs` extension or set `"type": "module"` in the closest package.json

15Set `VITE_CONFIG_NATIVE_IGNORE_WARNING=true` to suppress this warning.

17[Vue/Vite] › ℹ info vite v8.3.2 building client environment for production...

19[Vue/Vite] › ℹ info transforming...

21[Vue/Vite] › ℹ info ✓ 15 modules transformed.

23[Vue/Vite] › ℹ info rendering chunks...

25[Vue/Vite] › ℹ info computing gzip size...

27[Vue/Vite] › ℹ info dist/index.html 0.44 kB │ gzip: 0.30 kB

28dist/assets/index-XmYOKPEt.css 4.50 kB │ gzip: 1.95 kB

29dist/assets/index-B4_0LdU1.js 63.04 kB │ gzip: 24.94 kB

31[Vue/Vite] › ℹ info ✓ built in 272ms

33[Azion] [Pre-Build] › ℹ info Pre-build completed successfully

34[Azion] [Build] › ℹ info Using built-in handler from "vue" preset.

35[Azion] [Build] › ℹ info Starting build...

36[Azion] [Build] › ✔ success Build completed successfully

37[Azion] [Post-Build] › ℹ info Starting post-build...

38[Azion] [Post-Build] › ✔ success Post-build completed successfully

39[Azion] [Storage] › ℹ info Using provided prefix for storage '$BUCKET_NAME': $BUCKET_PREFIX

40[Azion] [IaC] › ✔ success Manifest generated successfully at <project-dir>/my-app/.edge/manifest.json

41Your Application was built successfully

To deploy the app, run azion deploy from the project folder:

azion deploy

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.

GitHub

To deploy a Vue project from a GitHub repository:

Open Import from GitHub

Access Azion Console > Create > Import from GitHub.

Select the import card

In the Import from GitHub tab, select the card. The Import from GitHub page opens.

Connect your GitHub account

If no GitHub account is connected yet, select Connect with GitHub in GitHub Connection.

Select the repository

Select a Git Scope, then select the Repository that holds the Vue project.

Name the application

In General, enter an Application Name. The repository name fills the field first. The storage bucket and the function take the name you enter.

Select the Vue preset

Set Preset to Vue.

Set the root directory

In Root Directory, keep / if the Vue project is at the repository root.

Enter the install command

In Install Command, enter npm install.

Select Deploy

A deploy page opens, titled Deploy: and the application name, with the Deploy Log of the build. On success, Successfully created! appears with the domain URL.

To set Variables or any other field of the import form, refer to Import a project from GitHub.

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.

Next steps

Vue BoilerplateDeploy the Vue starter template and keep it updated from GitHub.Azion CLI deployRead the deploy output and the flags that change a deploy.Import a project from GitHubSet every field of the GitHub import, including variables.azion.config.jsChange the bucket, cache, and rules that the Vue preset generates.