@astrojs/ vue

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

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

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

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

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

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

Options

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

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.

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

jsx

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

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

import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [vue({ devtools: true })],
});

Personnaliser Vue DevTools

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 :

import { defineConfig } from "astro/config";
import vue from "@astrojs/vue";

export default defineConfig({
  // ...
  integrations: [
    vue({
      devtools: { launchEditor: "webstorm" },
    }),
  ],
});