Vue.js 3.5+ / 3.6 RC Vapor - Quick Reference

Versions Requises (2026)

Source : Vue 3.6 Vapor blog | Vite 8

Architecture Composition API

src/
├── assets/               # Static assets
├── components/           # Composants partagés (base/, layout/, ui/)
├── composables/          # Fonctions réutilisables (use*)
├── modules/              # Feature modules (domain-driven)
│   └── [feature]/
│       ├── components/
│       ├── composables/
│       ├── stores/
│       ├── views/
│       └── types/
├── router/               # Vue Router config
├── stores/               # Stores Pinia globaux
├── services/             # Services API
├── types/                # Types TypeScript globaux
├── App.vue
└── main.ts

Points clés 2026

Composition API + <script setup> (obligatoire)

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useUsersStore } from '@/modules/users/stores/users.store';

const store = useUsersStore();
const search = ref('');
const filtered = computed(() => store.users.filter(u => u.name.includes(search.value)));
</script>

Pinia 4 (store composition style)

// stores/users.store.ts
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

export const useUsersStore = defineStore('users', () => {
  const users = ref<User[]>([]);
  const loading = ref(false);

  const activeUsers = computed(() => users.value.filter(u => u.active));

  async function fetchUsers() {
    loading.value = true;
    users.value = await api.getUsers();
    loading.value = false;
  }

  return { users, loading, activeUsers, fetchUsers };
});

Pinia 2 → 3 : l'API defineStore reste compatible ; la migration principale concerne la suppression des mapState/mapActions dans les Options API. Préférer le setup store style (ci-dessus) en Pinia 3.

Pinia 3 → 4 : uniquement des breaking changes techniques — Pinia 4 est ESM-only et @vue/devtools-api (v8) doit être installé explicitement à côté de pinia (npm i pinia @vue/devtools-api). Source : https://github.com/vuejs/pinia/releases

Vite 8 — Rolldown

// vite.config.ts
import { defineConfig } from 'vite';
import Vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [Vue()],
  // Vite 8 / Rolldown (default): object form of manualChunks removed — use codeSplitting.groups
  build: {
    rolldownOptions: {
      output: {
        codeSplitting: {
          groups: [
            { name: 'vue-vendor', test: /node_modules\/(vue|pinia|vue-router)/ },
          ],
        },
      },
    },
  },
});

Vite 8 / Rolldown (défaut) : la forme objet de manualChunks est supprimée (non supportée) ; la forme fonction est dépréciée. Utiliser build.rolldownOptions.output.codeSplitting.groups. Vite 7 / Rolldown désactivé (legacy) :

build: { rollupOptions: { output: { manualChunks: { 'vue-vendor': ['vue', 'vue-router', 'pinia'] } } } }
// Only if Rolldown is explicitly disabled

Vue Router 5 — File-Based Routing

// vite.config.ts — file-based routing (optionnel)
import VueRouter from 'unplugin-vue-router/vite';

export default defineConfig({
  plugins: [
    VueRouter({ routesFolder: 'src/pages' }), // avant Vue()
    Vue(),
  ],
});

Structure src/pages/ → routes auto-générées avec types précis. Pour un router manuel classique, configurer dans src/router/index.ts (voir architecture.md).

Alien Signals (Vue 3.5+)

Vue 3.5 migre en interne vers Alien Signals pour la réactivité : performances +2× sur les graphes larges. Aucun changement d'API côté utilisateur.

Vapor Mode (Vue 3.6 RC — ne pas utiliser en prod sans validation)

• Feature-complete mais instable — hydratation SSR Vapor en cours de stabilisation (rc.14), statut stable non confirmé
• Nécessite Pinia 3+ (4 recommandé) et @vue-router/auto
• Voir vapor-mode.md pour les détails et caveats

Checklist Rapide

• Vue 3.5.x stable (3.6 réservé expérimental)
• Composition API + <script setup> uniquement
• Pinia 4 setup store style
• Vue Router 5 (file-based ou manuel selon besoin)
• Vite 8 + Rolldown (manualChunks supprimé → migrer vers rolldownOptions.output.codeSplitting.groups)
• TypeScript strict mode
• Tests >= 80% coverage (Vitest)
• ESLint + @vue/eslint-plugin-vue

Documentation Complète

• architecture.md — Structure modulaire, patterns composables, routing
• coding-standards.md — TypeScript, conventions, Composition API rules
• tooling.md — Vite 8, Vue Router 5, Pinia 4, migrations
• quality-tools.md — ESLint, Vitest, audit qualité
• testing.md — Vitest, Vue Test Utils, stratégies TDD
• security.md — XSS, CSRF, validation, CSP
• vapor-mode.md — Vue 3.6 Vapor (expérimental)
• project-context.md — Template de contexte projet