--- name: azion-desenvolva-com-vue description: >- Faça o deploy de uma single-page application Vue na Azion a partir de um template no Azion Console, de um repositório do GitHub ou da Azion CLI. --- # Desenvolva com Vue Você pode colocar um app Vue na Azion a partir de um template no Azion Console, de um repositório do GitHub que você tem ou com a [Azion CLI](/pt-br/documentacao/devtools/cli/). Os três caminhos terminam com o app no ar em um domínio da Azion. A Azion executa um app Vue como uma aplicação estática. O deploy envia os arquivos do build para um bucket de armazenamento, e uma [aplicação](/pt-br/documentacao/plataforma/applications/) os serve a partir dele. Para ver de quais outros frameworks a Azion faz o build, consulte [Compatibilidade com web frameworks](/pt-br/documentacao/devtools/runtime/frameworks/compatibilidade-frameworks/). --- Escolha um caminho abaixo. Os pré-requisitos e o procedimento de deploy mudam com a sua escolha. ## Pré-requisitos - Uma conta na Azion. Para abrir uma, consulte [Criar uma conta](/pt-br/documentacao/fundamentos/criar-uma-conta/). **Console** - Acesso ao Azion Console. Para entrar, consulte [Como acessar o Azion Console](/pt-br/documentacao/guias/plataforma/conta-e-billing/como-acessar-o-azion-console/). - Uma conta no GitHub, que o formulário do template conecta quando a solicita. **GitHub** - Acesso ao Azion Console. Para entrar, consulte [Como acessar o Azion Console](/pt-br/documentacao/guias/plataforma/conta-e-billing/como-acessar-o-azion-console/). - Uma conta no GitHub. - Um repositório do GitHub com um projeto Vue. **CLI** - A Azion CLI instalada e com login feito. Para configurá-la, consulte [Primeiros passos com a Azion CLI](/pt-br/documentacao/devtools/cli/primeiros-passos/). - Node.js 18 ou posterior, com o npm. - Um terminal e um editor de código. --- ## Templates Vue Um template Vue é um projeto inicial completo de que a Azion faz o build e o deploy para você. O seletor de templates do preset Vue no `azion init` inclui estes três: | Template | Uso | | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | | [Vue.js with ButterCMS Starter Project](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/frameworks/butter-templates-collection/) | Integração com CMS | | [Vue3/Vite Boilerplate](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/frameworks/vue-vite-boilerplate/) | Single-page application com Vite | | [Vue Boilerplate](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/frameworks/vue-boilerplate/) | Single-page application | Cada template tem link para o seu guia. O starter ButterCMS compartilha o guia com os templates ButterCMS de outros frameworks. Para mais informações sobre templates, consulte [Marketplace da Azion](/pt-br/documentacao/plataforma/marketplace/). --- ## Faça o deploy do app Todo caminho faz o build do projeto Vue e cria os recursos que o servem na Azion. Use o painel do caminho que você escolheu: **Console** Para fazer o deploy de um template Vue pelo Azion Console: 1. **Abra os templates** Acesse [Azion Console](https://console.azion.com/) > **Create** > **Templates**. 2. **Pesquise por Vue** Em **Search by name, framework, or keyword**, digite `Vue`. 3. **Selecione o template para o deploy** 4. **Conecte sua conta do GitHub** Quando o formulário mostrar **GitHub Connection**, selecione **Connect with GitHub** e instale o [Azion GitHub App](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/automacao/azion-github-app/). 5. **Selecione um Git Scope** Em **Git Scope**, selecione o escopo em que o template cria o repositório dele. 6. **Preencha as configurações que o template solicita** 7. **Selecione Deploy** Uma página de deploy abre com o **Deploy Log** do build. Em caso de sucesso, aparece **Successfully created!**, junto com a URL do domínio e um botão **Manage** que abre a aplicação. **GitHub** Para fazer o deploy de um projeto Vue a partir de um repositório do GitHub: 1. **Abra o Import from GitHub** Acesse [Azion Console](https://console.azion.com/) > **Create** > **Import from GitHub**. 2. **Selecione o card de importação** Na aba **Import from GitHub**, selecione o card. A página **Import from GitHub** abre. 3. **Conecte sua conta do GitHub** Se nenhuma conta do GitHub estiver conectada ainda, selecione **Connect with GitHub** em **GitHub Connection**. 4. **Selecione o repositório** Selecione um **Git Scope** e depois selecione o **Repository** que contém o projeto Vue. 5. **Dê um nome à aplicação** Em **General**, digite um **Application Name**. O nome do repositório preenche o campo primeiro. O bucket de armazenamento e a [function](/pt-br/documentacao/plataforma/functions/) recebem o nome que você digitar. 6. **Selecione o preset Vue** Defina **Preset** como *Vue*. 7. **Defina o diretório raiz** Em **Root Directory**, mantenha `/` se o projeto Vue estiver na raiz do repositório. 8. **Digite o comando de instalação** Em **Install Command**, digite `npm install`. 9. **Selecione Deploy** Uma página de deploy abre, com o título `Deploy:` e o nome da aplicação, e com o **Deploy Log** do build. Em caso de sucesso, aparece **Successfully created!** com a URL do domínio. Para definir **Variables** ou qualquer outro campo do formulário de importação, consulte [Importe um projeto do GitHub](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/automacao/importar-um-projeto-existente-do-github/). **CLI** Para criar o projeto, execute `azion init` com um nome de projeto. No seletor de presets, selecione *Vue* e, no seletor de templates, selecione um template: ```bash azion init --name my-app --auto -y ``` Com `-y`, o comando instala as dependências. Com `--auto`, ele não pergunta se deve iniciar um servidor de desenvolvimento local nem se deve fazer o deploy. Para as perguntas que ele faz sem essas opções, consulte [Azion CLI init](/pt-br/documentacao/devtools/cli/init/). Com o template *Vue Boilerplate*, a saída é: ```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 ``` O projeto é criado em uma pasta `my-app`. O `azion.config.cjs` dele define o preset `vue` e envia `./.edge/assets` para um bucket de armazenamento que os workloads só podem ler. O arquivo também gera duas regras de requisição para a aplicação: - `Deliver Static Assets and Set Cache Policy` serve a partir do bucket os arquivos com extensão estática, como `.js` ou `.css`. A política de cache dela define `maxAgeSeconds` como `7200` para o navegador e para o cache. - `Redirect to index.html` reescreve as requisições de rotas para `/index.html`, para que o roteador do Vue resolva cada rota no navegador. Para todas as configurações desse arquivo, consulte [azion.config.js](/pt-br/documentacao/devtools/cli/azion-config-js/). Para fazer o build do app, entre na pasta do projeto e execute `azion build`: ```bash cd my-app azion build ``` O Azion Bundler executa `vite build` com o preset `vue`. O Vite grava o app em `dist`, e os arquivos que o deploy envia ficam em `.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 ``` Para fazer o deploy do app, execute `azion deploy` na pasta do projeto: ```bash azion deploy ``` O deploy envia o projeto e abre a página do Azion Console que o acompanha. Se o navegador não abrir, use a URL dessa página, que o comando imprime. No final, o comando imprime a URL do domínio do app. Para a saída completa e as flags que alteram um deploy, consulte [Azion CLI deploy](/pt-br/documentacao/devtools/cli/deploy/). Para executar o app na sua máquina antes, consulte [Azion CLI dev](/pt-br/documentacao/devtools/cli/dev-comando/). Para um projeto Vue que você já tem, execute `azion link` na pasta dele e selecione o preset Vue, como descreve [Azion CLI link](/pt-br/documentacao/devtools/cli/link-comando/). --- ## Verifique o app Cada caminho retorna a URL do domínio da Azion do app, no formato `https://xxxxxxxxxx.map.azionedge.net`. A página do deploy no Console mostra a URL, e o `azion deploy` a imprime ao terminar. Abra a URL em um navegador para carregar o app Vue. O primeiro deploy pode levar vários minutos para responder em todas as localidades; os deploys seguintes levam cerca de dois minutos. Uma localidade que ainda não recebeu o app responde com uma página `404` que diz `There's nothing here yet`. Se você receber essa página, aguarde e solicite a URL novamente. --- ## Próximos passos - [Vue Boilerplate](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/frameworks/vue-boilerplate.md): Faça o deploy do template inicial Vue e mantenha-o atualizado a partir do GitHub. - [Azion CLI deploy](/pt-br/documentacao/devtools/cli/deploy.md): Leia a saída do deploy e as flags que alteram um deploy. - [Importe um projeto do GitHub](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/automacao/importar-um-projeto-existente-do-github.md): Defina todos os campos da importação do GitHub, incluindo as variáveis. - [azion.config.js](/pt-br/documentacao/devtools/cli/azion-config-js.md): Altere o bucket, o cache e as regras que o preset Vue gera.