@astrojs/ vue
Cette intégration Astro permet le rendu et l’hydratation côté client pour vos composants Vue 3.
Installation
Titre de la section InstallationAstro 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
Titre de la section Installation manuelleTout 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
Titre de la section Pour commencerPour 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
Titre de la section DépannagePour 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
Titre de la section ContributionCe paquet est maintenu par l’équipe Core d’Astro. N’hésitez pas à ouvrir un ticket ou à envoyer une PR !
Options
Titre de la section OptionsCette 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
Titre de la section appEntrypointVous 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
Titre de la section 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
Titre de la section 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" }, }), ],});