--- name: azion-build-with-vue description: >- Deploy a Vue single-page application on Azion from a template in Azion Console, a GitHub repository, or the Azion CLI. --- # 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](/en/documentation/devtools/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](/en/documentation/platform/applications/) serves them from there. To see which other frameworks Azion builds, refer to [Frameworks compatibility](/en/documentation/devtools/runtime/frameworks/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](/en/documentation/fundamentals/creating-account/). **Console** - Access to Azion Console. To sign in, refer to [How to access Azion Console](/en/documentation/guides/platform/account-and-billing/how-to-access-azion-console/). - A GitHub account, which the template form connects when it asks for one. **GitHub** - Access to Azion Console. To sign in, refer to [How to access Azion Console](/en/documentation/guides/platform/account-and-billing/how-to-access-azion-console/). - A GitHub account. - A GitHub repository with a Vue project in it. **CLI** - The Azion CLI, installed and logged in. For the setup, refer to [Azion CLI quickstart](/en/documentation/devtools/cli/quickstart/). - Node.js 18 or later, with npm. - A terminal and a code editor. --- ## 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](/en/documentation/guides/application-development/frameworks/butter-templates-collection/) | CMS integration | | [Vue3/Vite Boilerplate](/en/documentation/guides/application-development/frameworks/vue-vite-boilerplate/) | Single-page application with Vite | | [Vue Boilerplate](/en/documentation/guides/application-development/frameworks/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](/en/documentation/platform/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: 1. **Open the templates** Access [Azion Console](https://console.azion.com/) > **Create** > **Templates**. 2. **Search for Vue** In **Search by name, framework, or keyword**, enter `Vue`. 3. **Select the template to deploy** 4. **Connect your GitHub account** If the form shows **GitHub Connection**, select **Connect with GitHub** and install the [Azion GitHub App](/en/documentation/guides/application-development/automation/azion-github-app/). 5. **Select a Git Scope** In **Git Scope**, select the scope where the template creates its repository. 6. **Fill in the settings the template asks for** 7. **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. **GitHub** To deploy a Vue project from a GitHub repository: 1. **Open Import from GitHub** Access [Azion Console](https://console.azion.com/) > **Create** > **Import from GitHub**. 2. **Select the import card** In the **Import from GitHub** tab, select the card. The **Import from GitHub** page opens. 3. **Connect your GitHub account** If no GitHub account is connected yet, select **Connect with GitHub** in **GitHub Connection**. 4. **Select the repository** Select a **Git Scope**, then select the **Repository** that holds the Vue project. 5. **Name the application** In **General**, enter an **Application Name**. The repository name fills the field first. The storage bucket and the [function](/en/documentation/platform/functions/) take the name you enter. 6. **Select the Vue preset** Set **Preset** to *Vue*. 7. **Set the root directory** In **Root Directory**, keep `/` if the Vue project is at the repository root. 8. **Enter the install command** In **Install Command**, enter `npm install`. 9. **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](/en/documentation/guides/application-development/automation/import-an-existing-project-from-github/). **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: ```bash 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](/en/documentation/devtools/cli/init/). With the *Vue Boilerplate* template, the output is: ```text ? Choose a preset: [Use arrows to move, type to filter] > AI Studio Angular Astro Docusaurus Eleventy Emscripten Gatsby Hexo Hono Hugo Javascript Jekyll Next Nuxt OpenNextJS Preact Qwik React Rustwasm Stencil Svelte Typescript Vitepress Vue Vuepress ? Choose a preset: Vue ? Choose a template: [Use arrows to move, type to filter] > Vue.js with ButterCMS Starter Project Vue3 AI Chatbot Widget Vue3/Vite Boilerplate Vue Boilerplate ? Choose a template: Vue Boilerplate Fetching selected template... Template successfully fetched Template successfully configured Installing application dependencies added 35 packages, and audited 36 packages in 2s 9 packages are looking for funding run `npm fund` for details found 0 vulnerabilities … [Azion] [Build] › ℹ info Using preset: vue [Azion] [Build] › ✔ success Build completed successfully with only azion.config [Azion] [IaC] › ✔ success Manifest generated successfully at /my-app/.edge/manifest.json If you want to start a local development server later, run 'azion dev' Make sure to change to the new working directory before running building or deploying your project If you want to deploy your application later, run 'azion deploy' Make sure to change to the new working directory before running building or deploying your project Your 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](/en/documentation/devtools/cli/azion-config-js/). To build the app, move into the project folder and run `azion build`: ```bash cd my-app 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`: ```text Building your Application. This process may take a few minutes Running build step command: $ npx --yes @aziontech/bundler@1.1.4 build --preset vue … [Azion] [Build] › ℹ info Using preset: vue [Azion] [Pre-Build] › ℹ info Starting pre-build... … [Vue/Vite] › ℹ info > azion-init-vuejs@0.0.0 build > 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 Set `VITE_CONFIG_NATIVE_IGNORE_WARNING=true` to suppress this warning. [Vue/Vite] › ℹ info vite v8.3.2 building client environment for production... [Vue/Vite] › ℹ info transforming... [Vue/Vite] › ℹ info ✓ 15 modules transformed. [Vue/Vite] › ℹ info rendering chunks... [Vue/Vite] › ℹ info computing gzip size... [Vue/Vite] › ℹ info dist/index.html 0.44 kB │ gzip: 0.30 kB dist/assets/index-XmYOKPEt.css 4.50 kB │ gzip: 1.95 kB dist/assets/index-B4_0LdU1.js 63.04 kB │ gzip: 24.94 kB [Vue/Vite] › ℹ info ✓ built in 272ms [Azion] [Pre-Build] › ℹ info Pre-build completed successfully [Azion] [Build] › ℹ info Using built-in handler from "vue" preset. [Azion] [Build] › ℹ info Starting build... [Azion] [Build] › ✔ success Build completed successfully [Azion] [Post-Build] › ℹ info Starting post-build... [Azion] [Post-Build] › ✔ success Post-build completed successfully [Azion] [Storage] › ℹ info Using provided prefix for storage '$BUCKET_NAME': $BUCKET_PREFIX [Azion] [IaC] › ✔ success Manifest generated successfully at /my-app/.edge/manifest.json Your Application was built successfully ``` To deploy the app, run `azion deploy` from the project folder: ```bash 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](/en/documentation/devtools/cli/deploy/). To run the app on your machine first, refer to [Azion CLI dev](/en/documentation/devtools/cli/dev-command/). For a Vue project you already have, run `azion link` in its folder and select the Vue preset, as described in [Azion CLI link](/en/documentation/devtools/cli/link-command/). --- ## 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 Boilerplate](/en/documentation/guides/application-development/frameworks/vue-boilerplate.md): Deploy the Vue starter template and keep it updated from GitHub. - [Azion CLI deploy](/en/documentation/devtools/cli/deploy.md): Read the deploy output and the flags that change a deploy. - [Import a project from GitHub](/en/documentation/guides/application-development/automation/import-an-existing-project-from-github.md): Set every field of the GitHub import, including variables. - [azion.config.js](/en/documentation/devtools/cli/azion-config-js.md): Change the bucket, cache, and rules that the Vue preset generates.