Référence de configuration du compilateur

Options du compilateur

Ces options se placent sous vue.compiler dans vite.config.*, ou dans l’objet Vue passé à defineConfig(vpConfig).withVue(vueConfig). Chaque intégration consomme les options qui la concernent.

Pour les projets Vite, les options de plugin direct suppriment la configuration partagée :

import { defineConfig } from "vite";
import vize from "@vizejs/vite-plugin";

export default defineConfig({
  plugins: [
    vize({
      vapor: true,
      sourceMap: true,
      customRenderer: true,
      templateSyntax: "standard",
    }),
  ],
});

Syntaxe des modèles

compiler.templateSyntax par défaut sur "standard".

• "standard" accepte une syntaxe invalide récupérable, émet des avertissements et réécrit en sortie valide.
• "strict" rapporte une syntaxe invalide comme étant des erreurs de compilation.
• "quirks" préserve les particularités de compatibilité syntaxique des modèles sans avertissements supplémentaires.

Les cas connus sont :

• v-for alias avec une parenthèse d’arête non appariée. Vue dégage une ( ou une ) de traînée de l’alias précédent il se sépare value, keyet index; les modes standard et strict rapportent ces alias comme malformés, tandis que le mode quirk reflète Vue.
• Éléments HTML non nul écrits avec une syntaxe auto-fermeuse, tels que <div /> ou <span />. mode Standard les avertit et les réécrit comme des éléments vides, des erreurs strictes de mode, et le mode quirk les comme des feuilles qui se ferment automatiquement.

<template>
  <!-- Standard/strict reject this. Quirk mode compiles it as `item in items`. -->
  <div v-for="(item in items">{{ item }}</div>

  <!-- Standard/strict reject this. Quirk mode compiles it as `item in items`. -->
  <div v-for="item) in items">{{ item }}</div>

  <!-- Standard warns and rewrites this as `<div></div>`. Strict errors. Quirk keeps it as a leaf. -->
  <div />
</template>

Implémentation en amont de Vue :

• forAliasRE
• stripParensRE in parseForExpression

Voir Troubleshooting pour le comportement HTML en mode strict derrière les balises invalides auto-fermantes.

Mode de sortie JSX & TSX

Pour l’API complète d’auteur, les styles à cadrage, la vérification de type, le support de l’éditeur et les limitations, voir le JSX & TSX guide. Cette section ne couvre que les clés de configuration en mode de sortie.

Vize compile les composants Vue .jsx/.tsx vers le DOM virtuel ou vers Vapor. vue.compiler.jsxMode choisit le backend par défaut des composants sans directive explicite ; sa valeur par défaut est "vdom".

// vite.config.ts
import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({}).withVue({
  compiler: {
    // Default every .jsx/.tsx component to Vapor output.
    jsxMode: "vapor",
  },
});

jsxMode est indépendant de compiler.vapor: vapor bascule Vapor pour .vue SFC, tandis que jsxMode contrôle le backend par défaut pour JSX/TSX. Un projet peut garder les SFC sur VDOM tout en mettant par défaut JSX sur Vapor, ou inversement. Le plugin Vite accepte aussi jsxMode directement comme option plugin, ce qui remplace la configuration partagée.

Directives par composant

Un composant individuel remplace le défaut par un prologue directif, reflétant "use strict":

// Compiled to Vapor regardless of the configured default.
const Fast = () => {
  "use vue:vapor";
  return <div class="fast" />;
};

// Compiled to Virtual DOM regardless of the configured default.
const Classic = () => {
  "use vue:vdom";
  return <div class="classic" />;
};

Comme chaque composant est routé indépendamment, un seul module peut mélanger les deux backends :

// vite.config.ts : vue: { compiler: { jsxMode: "vapor" } }

// No directive -> takes the configured default (Vapor here).
export const Dashboard = () => <main>{/* ... */}</main>;

// Opts back into Virtual DOM just for this component.
export const LegacyWidget = () => {
  "use vue:vdom";
  return <aside>{/* ... */}</aside>;
};

Préséance

Le mode de sortie d’un composant se résout dans cet ordre :

1. Une directive "use vue:vapor" / "use vue:vdom" par composant.
2. Le compiler.jsxMode par défaut depuis la configuration (ou l’option jsxMode du plugin).
3. Le plan B intégré, "vdom".

Diagnostic

Une directive qui commence par "use vue:" mais ne nomme pas un mode connu (une faute de frappe comme "use vue:vdomx") est signalée comme une erreur de compilation plutôt qu’ignorée silencieusement, et deux directives de mode conflictuelles dans un composant ("use vue:vapor" suivies de "use vue:vdom") sont également diagnostiquées. Des prologues sans lien comme "use strict" sont laissés intacts.

Dialecte Vue

vue.dialect sélectionne le profil dialectal Vue pour les documents HTML autonomes (.html/.htm) :

// vite.config.ts
import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({}).withVue({
  dialect: "petite-vue",
});

• "vue" considère les documents HTML autonomes comme de simples documents Vue-from-CDN.
• "petite-vue" opte pour intégrer des documents HTML autonomes dans le petite-vue dialecte (complétionsv-scope/v-effect et fonctionnalités IDE sensibles à la petite vue).

Lorsque la clé est absente, le dialecte est détecté structurellement par document : un <script src> résolvant vers le package petite-vue, une importation ES en ligne de petite-vue, ou un appel PetiteVue.createApp . Les mentions de petite-vue dans les commentaires ou la prose ne changent jamais de dialecte, et les composantes de en file indienne utilisent toujours le dialecte standard de Vue.