@astrojs/ vue

v7.0.0 GitHub npm Registro de cambios

Esta integración de Astro habilita el renderizado y la hidratación del lado del cliente para tus componentes de Vue 3.

Instalación

Astro incluye un comando astro add para automatizar la configuración de las integraciones oficiales. Si lo prefieres, puedes instalar las integraciones manualmente en su lugar.

Para instalar @astrojs/vue, ejecuta lo siguiente desde el directorio de tu proyecto y sigue las instrucciones:

npx astro add vue

pnpm astro add vue

yarn astro add vue

Si tienes algún problema, no dudes en informarnos en GitHub e intenta los pasos de instalación manual a continuación.

Instalación manual

Primero, instala el paquete @astrojs/vue:

npm install @astrojs/vue

pnpm add @astrojs/vue

yarn add @astrojs/vue

La mayoría de los gestores de paquetes también instalarán las dependencias peer asociadas. Si ves una advertencia Cannot find package 'vue' (o similar) al iniciar Astro, necesitarás instalar Vue:

npm install vue

pnpm add vue

yarn add vue

Luego, aplica la integración a tu archivo astro.config.* usando la propiedad integrations:

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

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

Primeros pasos

Para usar tu primer componente de Vue en Astro, dirígete a nuestra documentación de frameworks de UI. Explorarás:

📦 cómo se cargan los componentes del framework,
💧 opciones de hidratación del lado del cliente, y
🤝 oportunidades para mezclar y anidar frameworks juntos

Resolución de problemas

Para ayuda, revisa el canal #support en Discord. ¡Nuestros amigables miembros del Support Squad están aquí para ayudar!

También puedes consultar nuestra Documentación de Integraciones de Astro para más información sobre integraciones.

Contribuir

Este paquete es mantenido por el equipo Core de Astro. ¡Invitamos a enviar un issue o PR!

Opciones

Esta integración está impulsada por @vitejs/plugin-vue. Para personalizar el compilador de Vue, se pueden proporcionar opciones a la integración. Consulta la documentación de @vitejs/plugin-vue para más detalles.

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

export default defineConfig({
  // ...
  integrations: [
    vue({
      template: {
        compilerOptions: {
          // treat any tag that starts with ion- as custom elements
          isCustomElement: (tag) => tag.startsWith('ion-'),
        },
      },
      // ...
    }),
  ],
});

`appEntrypoint`

Type: string

Añadido en: @astrojs/vue@1.2.0

Puedes extender la instancia app de Vue estableciendo la opción appEntrypoint a un especificador de importación relativo a la raíz (por ejemplo, appEntrypoint: "/src/pages/_app").

El export por defecto de este archivo debe ser una función que acepte una instancia App de Vue antes del renderizado, permitiendo el uso de plugins personalizados de Vue, app.use, y otras personalizaciones para casos de uso avanzados.

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`

Type: boolean | object

Añadido en: @astrojs/vue@1.2.0

Puedes usar Vue JSX estableciendo jsx: true.

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

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

Esto habilitará el renderizado tanto para componentes Vue como Vue JSX. Para personalizar el compilador de Vue JSX, pasa un objeto de opciones en lugar de un booleano. Consulta la documentación de @vitejs/plugin-vue-jsx para más detalles.

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

export default defineConfig({
  // ...
  integrations: [
    vue({
      jsx: {
        // treat any tag that starts with ion- as custom elements
        isCustomElement: (tag) => tag.startsWith('ion-'),
      },
    }),
  ],
});

`devtools`

Type: boolean | object

Añadido en: @astrojs/vue@4.2.0

Puedes habilitar Vue DevTools en desarrollo pasando un objeto con devtools: true a la configuración de tu integración vue():

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

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

Personalizar Vue DevTools

Añadido en: @astrojs/vue@4.3.0

Para más personalización, puedes pasar opciones que el Vue DevTools Vite Plugin soporta. (Nota: appendTo no es soportado.)

Por ejemplo, puedes establecer launchEditor en tu editor preferido si no estás usando Visual Studio Code:

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

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