Saltearse al contenido

@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.

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

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

  1. (Opcinalmente) Instala todas las dependencias y dependencias de pares necesarias
  2. (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:

Terminal window
# 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.

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

Terminal window
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:

Terminal window
npm install vue

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

astro.config.mjs
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';
export default defineConfig({
// ...
integrations: [vue()],
// ^^^^^
});

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

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.

Este paquete es mantenido por el equipo central de Astro. ¡Estás invitado a enviar un problema o PR!

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.

astro.config.mjs
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-'),
},
},
// ...
}),
],
});

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.

astro.config.mjs
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';
export default defineConfig({
integrations: [vue({ appEntrypoint: '/src/pages/_app' })],
});
src/pages/_app.ts
import type { App } from 'vue';
import i18nPlugin from 'my-vue-i18n-plugin';
export default (app: App) => {
app.use(i18nPlugin);
};

Puedes usar Vue JSX configurando jsx: true.

astro.config.mjs
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.

astro.config.mjs
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-'),
},
}),
],
});

Otros

Frameworks UI

Adaptadores SSR

Otros