@astrojs/ vue

v4.5.2 GitHub npm Changelog

Essa integração Astro habilita a renderização no lado do servidor e a hidratação no lado do cliente para seus componentes Vue 3.

Instalação

Astro inclui um comando astro add para automatizar a configuração de integrações oficiais. Se preferir, você pode instalar as integrações manualmente em vez disso.

Para instalar @astrojs/vue, execute o seguinte comando no diretório do seu projeto e siga as instruções:

npx astro add vue

pnpm astro add vue

yarn astro add vue

Se encontrar qualquer problema, sinta-se à vontade para relatá-los no GitHub e tente os passos de instalação manual abaixo.

Instalação Manual

Primeiro, instale o pacote @astrojs/vue:

npm install @astrojs/vue

pnpm add @astrojs/vue

yarn add @astrojs/vue

A maioria dos gerenciadores de pacotes também instalará as dependências associadas. Se você visualizar um aviso “Cannot find package ‘vue’” (ou algo semelhante) ao iniciar o Astro, será necessário instalar o Vue:

npm install vue

pnpm add vue

yarn add vue

Então, aplique a integração ao seu arquivo astro.config.* usando a propriedade integrations:

import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [vue()],
});

Iniciando

Para usar seu primeiro componente Vue no Astro, visite nossa documentação sobre frameworks de UI. Você irá explorar:

📦 como componentes de framework são carregados,
💧 opções de hidratação no lado do cliente, e
🤝 oportunidades para misturar e aninhar frameworks em conjunto

Solução de Problemas

Para ajuda, consulte o canal #support no Discord. Nossos amigáveis membros da Equipe de Suporte estão aqui para ajudar!

Você também pode verificar nossa Documentação de Integração Astro para saber mais sobre integrações.

Contribuindo

Este pacote é mantido pela equipe principal do Astro. Você está convidado a enviar um problema ou PR!

Opções

Esta integração é alimentada por @vitejs/plugin-vue. Para personalizar o compilador Vue, opções podem ser fornecidas para a integração. Consulte a documentação do @vitejs/plugin-vue para mais detalhes.

import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [
    vue({
      template: {
        compilerOptions: {
          // trata qualquer tag que comece com ion- como elementos personalizados
          isCustomElement: (tag) => tag.startsWith('ion-'),
        },
      },
      // ...
    }),
  ],
});

appEntrypoint

Você pode estender a instância app do Vue definindo a opção appEntrypoint para um especificador de importação relativo à raiz (por exemplo, appEntrypoint: "/src/pages/_app").

A exportação padrão desse arquivo deve ser uma função que aceita uma instância App do Vue antes da renderização, permitindo o uso de plugins personalizados Vue, app.use e outras personalizações para casos de uso avançados.

import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [vue({ appEntrypoint: '/src/pages/_app' })],
});

import type { App } from 'vue';
import i18nPlugin from 'my-vue-i18n-plugin';

export default (app: App) => {
  app.use(i18nPlugin);
};

jsx

Você pode usar Vue JSX definindo jsx: true.

import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [vue({ jsx: true })],
});

Isso habilitará a renderização para componentes Vue e Vue JSX. Para personalizar o compilador Vue JSX, passe um objeto de opções em vez de um booleano. Consulte a documentação @vitejs/plugin-vue-jsx para mais detalhes.

import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [
    vue({
      jsx: {
        // trata qualquer tag que comece com ion- como elementos personalizados
        isCustomElement: (tag) => tag.startsWith('ion-'),
      },
    }),
  ],
});

devtools

Adicionado em: @astrojs/vue@4.2.0

Você pode habilitar Vue DevTools no desenvolvimento passando um objeto com devtools: true para sua configuração de integração vue():

import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [vue({ devtools: true })],
});

Personalizando Vue DevTools

Adicionado em: @astrojs/vue@4.3.0

Para mais personalização, você pode passar opções que o Plugin Vue DevTools Vite suporta. (Nota: appendTo não é suportado.)

Por exemplo, você pode definir launchEditor para o editor de sua preferência se você não estiver usando o Visual Studio Code:

import { defineConfig } from "astro/config";
import vue from "@astrojs/vue";

export default defineConfig({
  // ...
  integrations: [
    vue({
      devtools: { launchEditor: "webstorm" },
    }),
  ],
});