Nuxt Integration

⚠️ Work in Progress: Vize is under active development and is not yet ready for production use. Test thoroughly before adopting in Nuxt projects.

Vize provides first-class Nuxt integration through the @vizejs/nuxt module. This replaces Nuxt's default Vue compiler with Vize's Rust-native compiler, providing the same speed improvements in Nuxt projects.

Installation

npm install @vizejs/nuxt

Setup

Using the Nuxt Module (Recommended)

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@vizejs/nuxt'],
  vize: {
    compiler: true,
  },
});

Using the Vite Plugin Directly

Alternatively, you can use the Vite plugin directly. Since Nuxt uses Vite under the hood, this works but lacks some Nuxt-specific optimizations:

// nuxt.config.ts
import vize from '@vizejs/vite-plugin';

export default defineNuxtConfig({
  vite: {
    plugins: [vize()],
  },
});

Musea Integration

The Nuxt module also supports Musea (component gallery) integration:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@vizejs/nuxt'],
  vize: {
    compiler: true,
    musea: {
      include: ['**/*.art.vue'],
      tokensPath: 'assets/tokens.json',
      previewCss: [
        'assets/styles/main.css',
        'assets/styles/musea-preview.css',
      ],
      previewSetup: 'musea.preview.ts',
    },
    nuxtMusea: {
      route: { path: '/' }, // Musea UI route within __musea__
    },
  },
});

When configured, the Musea gallery is available at /__musea__/ during development.

Preview Setup for Nuxt

Nuxt projects often use features that need to be mocked in the Musea preview environment (vue-i18n, NuxtLink, useNuxtApp, etc.):

// musea.preview.ts
import { createI18n } from 'vue-i18n'
import { createRouter, createMemoryHistory } from 'vue-router'
import type { MuseaPreviewSetup } from '@vizejs/vite-plugin-musea'

export default ((app) => {
  // Mock vue-i18n
  const i18n = createI18n({
    locale: 'ja',
    messages: { ja: { /* ... */ }, en: { /* ... */ } },
  })
  app.use(i18n)

  // Mock vue-router (for NuxtLink compatibility)
  const router = createRouter({
    history: createMemoryHistory(),
    routes: [
      { path: '/', component: { template: '<div />' } },
      { path: '/about', component: { template: '<div />' } },
    ],
  })
  app.use(router)

  // Register NuxtLink as RouterLink
  app.component('NuxtLink', app.component('RouterLink'))

  // Mock useNuxtApp if needed
  app.provide('nuxt-app', {
    $config: { public: { /* ... */ } },
  })
}) satisfies MuseaPreviewSetup

How It Works

When the Nuxt module is installed:

1. Vite plugin injection — The module registers @vizejs/vite-plugin as a Vite plugin, intercepting .vue file compilation.

2. Compatibility shim — The plugin exposes a @vitejs/plugin-vue compatibility API, so Nuxt's internal checks (which probe for the Vue plugin) work correctly.

3. SSR support — Vize's vize_atelier_ssr handles server-side compilation. The plugin isolates client and server environment variables to prevent cross-contamination.

4. Nuxt features preserved — Auto-imports, composables, middleware, and other Nuxt features work through Nuxt's own transform layer, which runs after Vize's compilation.

Real-World Example

The Vue Fes Japan 2026 conference website uses Vize with Nuxt 4:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@vizejs/nuxt'],
  vize: {
    compiler: false, // compiler disabled (using Nuxt's default)
    musea: {
      include: ['**/*.art.vue'],
      inlineArt: false,
      tokensPath: 'assets/tokens.json',
      previewCss: [
        'assets/styles/main.css',
        'assets/styles/musea-preview.css',
      ],
      previewSetup: 'musea.preview.ts',
    },
  },
});

This configuration uses Musea for component development and documentation while keeping Nuxt's default compiler for production builds.

Notes

• Vize is under active development — test thoroughly before using in production Nuxt projects

• SSR compilation is supported via vize_atelier_ssr

• Nuxt-specific features (auto-imports, composables, middleware) work through Nuxt's own transform layer

• The Nuxt module supports both Nuxt 3 and Nuxt 4