@astrojs/ vue
Cette intégration Astro permet le rendu et l’hydratation côté client pour vos composants Vue 3.
Installation
Section intitulée « Installation »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 :
npx astro add vue
pnpm astro add vue
yarn 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.
Installation manuelle
Section intitulée « Installation manuelle »Tout d’abord, installez le paquet @astrojs/vue
:
npm install @astrojs/vue
pnpm add @astrojs/vue
yarn add @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 :
npm install vue
pnpm add vue
yarn add vue
Ensuite, appliquez l’intégration à votre fichier astro.config.*
en utilisant la propriété integrations
:
import { defineConfig } from 'astro/config';import vue from '@astrojs/vue';
export default defineConfig({ // ... integrations: [vue()],});
Pour commencer
Section intitulée « Pour commencer »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
Dépannage
Section intitulée « Dépannage »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.
Contribution
Section intitulée « Contribution »Ce paquet est maintenu par l’équipe Core d’Astro. N’hésitez pas à ouvrir un ticket ou à envoyer une 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.
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-'), }, }, // ... }), ],});
appEntrypoint
Section intitulée « appEntrypoint »Vous pouvez étendre l’instance d’app
Vue 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 d’App
Vue avant le rendu, permettant l’utilisation de modules d’extension Vue personnalisés, app.use
, et d’autres personnalisations pour des cas d’utilisation avancés.
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);};
Vous pouvez utiliser Vue JSX en définissant jsx: true
.
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.
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-'), }, }), ],});
devtools
Section intitulée « devtools »
Ajouté à la version :
@astrojs/vue@4.2.0
Vous pouvez activer les outils de développement de Vue durant le développement en passant un objet avec devtools: true
à votre configuration d’intégration vue()
:
import { defineConfig } from 'astro/config';import vue from '@astrojs/vue';
export default defineConfig({ // ... integrations: [vue({ devtools: true })],});
Personnaliser les outils de développement de Vue
Section intitulée « Personnaliser les outils de développement de Vue »
Ajouté à la version :
@astrojs/vue@4.3.0
Pour plus de personnalisation, vous pouvez à la place transmettre des options prises en charge par le module d’extension Vue DevTools pour Vite. (À noter : appendTo
n’est pas pris en charge).
Par exemple, vous pouvez définir launchEditor
avec votre éditeur préféré si vous n’utilisez pas Visual Studio Code :
import { defineConfig } from "astro/config";import vue from "@astrojs/vue";
export default defineConfig({ // ... integrations: [ vue({ devtools: { launchEditor: "webstorm" }, }), ],});