Aller au contenu

@astrojs/ vue

Cette intégration Astro permet le rendu côté serveur et l’hydratation côté client pour vos composants Vue 3.

Astro inclut une commande astro add pour automatiser l’installation des intégrations officielles. Si vous préférez, vous pouvez installer les intégrations manuellement à la place.

Pour installer @astrojs/vue, exécutez ce qui suit depuis le répertoire de votre projet et suivez les instructions :

Fenêtre de terminal
npx astro add vue

Si vous rencontrez des problèmes, n’hésitez pas à nous les signaler sur GitHub et essayez les étapes d’installation manuelle ci-dessous.

Tout d’abord, installez le paquet @astrojs/vue :

Fenêtre de terminal
npm install @astrojs/vue

La plupart des gestionnaires de paquets installent également les dépendances associées. Si vous voyez un avertissement “Cannot find package ‘vue’” (ou similaire) lorsque vous démarrez Astro, vous devez installer Vue :

Fenêtre de terminal
npm install vue

Ensuite, appliquez l’intégration à votre fichier astro.config.* en utilisant la propriété integrations :

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

Pour utiliser votre premier composant Vue dans Astro, consultez notre documentation sur les frameworks UI. Vous y découvrirez :

  • 📦 comment les composants du framework sont chargés,
  • 💧 les options d’hydratation côté client, et
  • 🤝 les possibilités de mélanger et d’imbriquer les frameworks entre eux

Pour obtenir de l’aide, consultez le canal #support sur Discord. Nos sympathiques membres de l’équipe d’assistance sont là pour vous aider !

Vous pouvez également consulter notre Documentation d’intégration Astro pour plus d’informations sur les intégrations.

Ce paquet est maintenu par l’équipe Core d’Astro. Vous êtes les bienvenus pour soumettre un problème ou un PR !

Cette intégration est alimentée par @vitejs/plugin-vue. Pour personnaliser le compilateur Vue, des options peuvent être fournies à l’intégration. Voir la documentation de @vitejs/plugin-vue pour plus de détails.

astro.config.mjs
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';
export default defineConfig({
// ...
integrations: [
vue({
template: {
compilerOptions: {
// traiter toute balise commençant par ion- comme un élément personnalisé
isCustomElement: (tag) => tag.startsWith('ion-'),
},
},
// ...
}),
],
});

Vous pouvez étendre l’instance Vue app en fixant l’option appEntrypoint à un spécificateur d’importation relatif à la racine (par exemple, appEntrypoint : "/src/pages/_app").

L’exportation par défaut de ce fichier devrait être une fonction qui accepte une instance Vue App avant le rendu, permettant l’utilisation de custom Vue plugins, app.use, et d’autres personnalisations pour des cas d’utilisation avancés.

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);
};

Vous pouvez utiliser Vue JSX en définissant jsx : true.

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

Cela permet d’activer le rendu pour les composants Vue et Vue JSX. Pour personnaliser le compilateur Vue JSX, passez un objet options au lieu d’un booléen. Voir la documentation @vitejs/plugin-vue-jsx pour plus de détails.

astro.config.mjs
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';
export default defineConfig({
// ...
integrations: [
vue({
jsx: {
// traiter toute balise commençant par ion- comme un élément personnalisé
isCustomElement: (tag) => tag.startsWith('ion-'),
},
}),
],
});

Ajouté à la version : @astrojs/vue@4.2.0

Vous pouvez activer Vue DevTools durant le développement en passant un objet avec devtools : true à votre configuration d’intégration vue() :

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

Ajouté à la version : @astrojs/vue@4.3.0

Pour plus de personnalisation, vous pouvez passer des options que le plugin Vue DevTools Vite supporte. (Note : appendTo n’est pas supporté).

Par exemple, vous pouvez définir launchEditor à votre éditeur préféré si vous n’utilisez pas Visual Studio Code :

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

Plus d'intégrations

Framework d'interface utilisateur

Adaptateurs SSR

Autres intégrations