feat(nuxt): experimental flag to use external vue dependencies (#5083)

packages/nuxt/src/core/nitro.ts

@@ -58,16 +58,26 @@ export async function initNitro (nuxt: Nuxt) {
     sourcemap: nuxt.options.sourcemap,
     externals: {
       inline: [
-        ...(nuxt.options.dev ? [] : ['vue', '@vue/', '@nuxt/', nuxt.options.buildDir]),
+        ...(nuxt.options.dev
+          ? []
+          : [
+              ...nuxt.options.experimental.externalVue ? [] : ['vue', '@vue/'],
+              '@nuxt/',
+              nuxt.options.buildDir
+            ]),
         'nuxt/dist',
         'nuxt3/dist'
       ]
     },
     alias: {
-      'vue/compiler-sfc': 'vue/compiler-sfc',
+      ...nuxt.options.experimental.externalVue
-      'vue/server-renderer': 'vue/server-renderer',
+        ? {}
-      vue: await resolvePath(`vue/dist/vue.cjs${nuxt.options.dev ? '' : '.prod'}.js`),
+        : {
 
+            'vue/compiler-sfc': 'vue/compiler-sfc',
+            'vue/server-renderer': 'vue/server-renderer',
+            vue: await resolvePath(`vue/dist/vue.cjs${nuxt.options.dev ? '' : '.prod'}.js`)
+          },
       // Vue 3 mocks
       'estree-walker': 'unenv/runtime/mock/proxy',
       '@babel/parser': 'unenv/runtime/mock/proxy',

packages/schema/src/config/experimental.ts

@@ -17,6 +17,12 @@ export default {
      * Enable Vue's reactivity transform
      * @see https://vuejs.org/guide/extras/reactivity-transform.html
      */
-    reactivityTransform: false
+    reactivityTransform: false,
+
+    /**
+     * Externalize `vue`, `@vue/*` and `vue-router` when build
+     * @see https://github.com/nuxt/framework/issues/4084
+     */
+    externalVue: false
   }
 }

packages/vite/src/server.ts

@@ -30,16 +30,21 @@ export async function buildServer (ctx: ViteBuildContext) {
     resolve: {
       alias: {
         '#build/plugins': resolve(ctx.nuxt.options.buildDir, 'plugins/server'),
-        // Alias vue
+        // Alias vue to ensure we're using the same context in development
         'vue/server-renderer': _resolve('vue/server-renderer'),
         'vue/compiler-sfc': _resolve('vue/compiler-sfc'),
-        '@vue/reactivity': _resolve(`@vue/reactivity/dist/reactivity.cjs${ctx.nuxt.options.dev ? '' : '.prod'}.js`),
+        ...ctx.nuxt.options.experimental.externalVue
-        '@vue/shared': _resolve(`@vue/shared/dist/shared.cjs${ctx.nuxt.options.dev ? '' : '.prod'}.js`),
+          ? {}
-        'vue-router': _resolve(`vue-router/dist/vue-router.cjs${ctx.nuxt.options.dev ? '' : '.prod'}.js`),
+          : {
+              '@vue/reactivity': _resolve(`@vue/reactivity/dist/reactivity.cjs${ctx.nuxt.options.dev ? '' : '.prod'}.js`),
+              '@vue/shared': _resolve(`@vue/shared/dist/shared.cjs${ctx.nuxt.options.dev ? '' : '.prod'}.js`),
+              'vue-router': _resolve(`vue-router/dist/vue-router.cjs${ctx.nuxt.options.dev ? '' : '.prod'}.js`)
+            },
         vue: _resolve(`vue/dist/vue.cjs${ctx.nuxt.options.dev ? '' : '.prod'}.js`)
       }
     },
     ssr: {
+      external: ctx.nuxt.options.experimental.externalVue ? ['#internal/nitro', 'vue', 'vue-router'] : ['#internal/nitro'],
       noExternal: [
         ...ctx.nuxt.options.build.transpile,
         // TODO: Use externality for production (rollup) build
@@ -55,7 +60,7 @@ export async function buildServer (ctx: ViteBuildContext) {
       outDir: resolve(ctx.nuxt.options.buildDir, 'dist/server'),
       ssr: ctx.nuxt.options.ssr ?? true,
       rollupOptions: {
-        external: ['#internal/nitro'],
+        external: ['#internal/nitro', ...ctx.nuxt.options.experimental.externalVue ? ['vue', 'vue-router'] : []],
         output: {
           entryFileNames: 'server.mjs',
           preferConst: true,