@astrojs/vue

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

Hay dos maneras de agregar integraciones a tu proyecto. ¡Probemos la opción más conveniente primero!

Comando `astro add`

Astro inlcuye una herramienta CLI para agregar integraciones de primera parte: astro add. Este comando:

(Opcinalmente) Instala todas las dependencias y dependencias de pares necesarias
(También opcionalmente) Actualiza tu archivo astro.config.* para aplicar esta integración

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

# Usando NPM
npx astro add vue
# Usando Yarn
yarn astro add vue
# Usando PNPM
pnpm astro add vue

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

Instalar dependencias manualmente

Primero, instala la integración @astrojs/vue de la siguiente manera:

npm install @astrojs/vue

La mayoría de los gestores de paquetes instalarán también las dependencias de pares asociadas. Sin embargo, si ves un aviso “No se puede encontrar el paquete ‘vue’” (o similar) al iniciar Astro, deberás instalar Vue:

npm install vue

Ahora, aplica esta 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 framework 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-'),
      },
    }),
  ],
});