@astrojs/ vue

v4.4.0 GitHub npm Changelog

Esta integración de Astro permite el renderizado del lado del servidor y la hidratación del lado del cliente para tus componentes 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 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 asociadas. Sin embargo, si ves un aviso “No se puede encontrar el paquete ‘vue’” (o similar) al iniciar Astro, tendrás que 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()],
});

Empezando

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

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

Solución de problemas

Para obtener ayuda, consulta el canal #support en Discord. ¡Nuestros amables miembros del Equipo de Soporte están aquí para ayudar!

También puedes consultar nuestra documentación de integración de Astro para obtener más información sobre las integraciones.

Contribuyendo

Este paquete es mantenido por el equipo central de Astro. ¡Estás invitado a enviar un problema 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 obtener más detalles.

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

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

appEntrypoint

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

La exportación predeterminada de este archivo debe ser una función que acepte una instancia de Vue App antes de la representación, lo que permite el uso de plugins Vue personalizados, 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

Puedes usar Vue JSX configurando jsx: true.

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

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

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

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

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

devtools

Agregado 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 })],
});

Personalizando Vue DevTools

Agregado en: @astrojs/vue@4.3.0

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

Por ejemplo, puedes establecer launchEditor a 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" },
    }),
  ],
});