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.

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:

Ventana de terminal
npx 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.

Primero, instala el paquete @astrojs/vue:

Ventana de terminal
npm install @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:

Ventana de terminal
npm install vue

Luego, aplica la 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 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

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

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():

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

Agregado en: @astrojs/vue@4.3.0 Nuevo

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:

astro.config.mjs
import { defineConfig } from "astro/config";
import vue from "@astrojs/vue";
export default defineConfig({
// ...
integrations: [
vue({
devtools: { launchEditor: "webstorm" },
}),
],
});

Más integraciones

Frameworks UI

Adaptadores SSR

Otras integraciones