fix(nuxt): remove experimental reactivityTransform (vue 3.4) (#24477)

docs/1.getting-started/3.configuration.md

@@ -210,4 +210,8 @@ export default defineNuxtConfig({
 })
 ```
 
+#### experimental `reactivityTransform` migration from Vue 3.4 and Nuxt 3.9
+
+Since Nuxt 3.9 and Vue 3.4, `reactivityTransform` has been moved from Vue to Vue Macros which has a [Nuxt integration](https://vue-macros.dev/guide/nuxt-integration.html).
+
 :read-more{to="/docs/api/configuration/nuxt-config#vue-1"}

docs/2.guide/3.going-further/1.experimental-features.md

@@ -39,20 +39,6 @@ export defineNuxtConfig({
 })
 ```
 
-## reactivityTransform
-
-Enables Vue's reactivity transform. Note that this feature has been marked as deprecated in Vue 3.3 and is planned to be removed from core in Vue 3.4.
-
-```ts [nuxt.config.ts]
-export defineNuxtConfig({
-  experimental: {
-    reactivityTransform: true
-  }
-})
-```
-
-:read-more{to="/docs/getting-started/configuration#enabling-experimental-vue-features"}
-
 ## externalVue
 
 Externalizes `vue`, `@vue/*` and `vue-router` when building.

packages/kit/src/template.ts

@@ -218,10 +218,6 @@ export async function writeTypes (nuxt: Nuxt) {
     .filter(f => typeof f === 'string')
     .map(async id => ({ types: (await readPackageJSON(id, { url: nodeModulePaths }).catch(() => null))?.name || id })))
 
-  if (nuxt.options.experimental?.reactivityTransform) {
-    references.push({ types: 'vue/macros-global' })
-  }
-
   const declarations: string[] = []
 
   await nuxt.callHook('prepare:types', { references, declarations, tsConfig })

packages/schema/src/config/experimental.ts

@@ -9,16 +9,6 @@ export default defineUntypedSchema({
       $resolve: val => val ?? false
     },
 
-    /**
-     * Enable Vue's reactivity transform
-     * @see [Vue Reactivity Transform Docs](https://vuejs.org/guide/extras/reactivity-transform.html)
-     *
-     * Warning: Reactivity transform feature has been marked as deprecated in Vue 3.3 and is planned to be
-     * removed from core in Vue 3.4.
-     * @see [Vue RFC#369](https://github.com/vuejs/rfcs/discussions/369#discussioncomment-5059028)
-     */
-    reactivityTransform: false,
-
     // TODO: Remove when nitro has support for mocking traced dependencies
     // https://github.com/unjs/nitro/issues/1118
     /**

packages/vite/src/vite.ts

@@ -111,7 +111,6 @@ export const bundle: NuxtBuilder['bundle'] = async (nuxt) => {
           virtual(nuxt.vfs)
         ],
         vue: {
-          reactivityTransform: nuxt.options.experimental.reactivityTransform,
           template: {
             transformAssetUrls: {
               video: ['src', 'poster'],

packages/webpack/src/presets/vue.ts

@@ -12,10 +12,7 @@ export function vue (ctx: WebpackConfigContext) {
   ctx.config.module!.rules!.push({
     test: /\.vue$/i,
     loader: 'vue-loader',
-    options: {
+    options: ctx.userConfig.loaders.vue
-      reactivityTransform: ctx.nuxt.options.experimental.reactivityTransform,
-      ...ctx.userConfig.loaders.vue
-    }
   })
 
   if (ctx.isClient) {

test/basic.test.ts

@@ -963,14 +963,6 @@ describe('layouts', () => {
   })
 })
 
-describe('reactivity transform', () => {
-  it('should works', async () => {
-    const html = await $fetch('/')
-
-    expect(html).toContain('Sugar Counter 12 x 2 = 24')
-  })
-})
-
 describe('composable tree shaking', () => {
   it('should work', async () => {
     const html = await $fetch('/tree-shake')
@@ -2020,10 +2012,10 @@ describe.skipIf(isWindows)('useAsyncData', () => {
 
 describe.runIf(isDev())('component testing', () => {
   it('should work', async () => {
-    const comp1 = await $fetchComponent('components/SugarCounter.vue', { multiplier: 2 })
+    const comp1 = await $fetchComponent('components/Counter.vue', { multiplier: 2 })
     expect(comp1).toContain('12 x 2 = 24')
 
-    const comp2 = await $fetchComponent('components/SugarCounter.vue', { multiplier: 4 })
+    const comp2 = await $fetchComponent('components/Counter.vue', { multiplier: 4 })
     expect(comp2).toContain('12 x 4 = 48')
   })
 })

test/fixtures/basic/components/Counter.vue

@@ -1,9 +1,10 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <script setup lang="ts">
 const props = defineProps<{
   multiplier: number
 }>()
-const count = $ref(12)
+const count = ref(12)
-const doubled = $computed(() => count * props.multiplier)
+const doubled = computed(() => count.value * props.multiplier)
 </script>
 
 <template>

test/fixtures/basic/components/Nested/Counter.vue

@@ -9,6 +9,6 @@ defineProps({
 
 <template>
   <div>
-    <SugarCounter :multiplier="multiplier" />
+    <Counter :multiplier="multiplier" />
   </div>
 </template>

test/fixtures/basic/components/Tsx.tsx

@@ -3,7 +3,7 @@ export default defineComponent({
     return <div>
       TSX component
       <custom-component>custom</custom-component>
-      <SugarCounter multiplier={2} />
+      <Counter multiplier={2} />
     </div>
   }
 })

test/fixtures/basic/nuxt.config.ts

@@ -198,7 +198,6 @@ export default defineNuxtConfig({
     restoreState: true,
     inlineSSRStyles: id => !!id && !id.includes('assets.vue'),
     componentIslands: true,
-    reactivityTransform: true,
     treeshakeClientOnly: true,
     asyncContext: process.env.TEST_CONTEXT === 'async',
     appManifest: process.env.TEST_MANIFEST !== 'manifest-off',

test/fixtures/basic/pages/client-fallback.vue

@@ -18,7 +18,7 @@
       <!-- don't render if one child fails in ssr -->
       <NuxtClientFallback>
         <BreakInSetup />
-        <SugarCounter
+        <Counter
           id="sugar-counter"
           :multiplier="multiplier"
         />
@@ -28,7 +28,7 @@
         <div>
           <BreakInSetup />
         </div>
-        <SugarCounter :multiplier="multiplier" />
+        <Counter :multiplier="multiplier" />
       </NuxtClientFallback>
       <!-- should be rendered -->
       <NuxtClientFallback fallback-tag="p">

test/fixtures/basic/pages/index.vue

@@ -68,7 +68,7 @@
     <NuxtLink to="/no-scripts">
       to no script
     </NuxtLink>
-    <NestedSugarCounter :multiplier="2" />
+    <NestedCounter :multiplier="2" />
     <CustomComponent />
     <component :is="`global${'-'.toString()}sync`" />
     <Spin>Test</Spin>
@@ -100,8 +100,8 @@ const config = useRuntimeConfig()
 
 const someValue = useState('val', () => 1)
 
-const NestedSugarCounter = resolveComponent('NestedSugarCounter')
+const NestedCounter = resolveComponent('NestedCounter')
-if (!NestedSugarCounter) {
+if (!NestedCounter) {
   throw new Error('Component not found')
 }
 

test/fixtures/basic/pages/islands.vue

@@ -65,7 +65,7 @@ const count = ref(0)
         >
           <div>Interactive testing slot</div>
           <div id="first-sugar-counter">
-            <SugarCounter :multiplier="testCount" />
+            <Counter :multiplier="testCount" />
           </div>
           <template #test="scoped">
             <div id="test-slot">
@@ -101,7 +101,7 @@ const count = ref(0)
           :props="{ count }"
         >
           <div>Interactive testing slot post SSR</div>
-          <SugarCounter :multiplier="testCount" />
+          <Counter :multiplier="testCount" />
         </NuxtIsland>
       </div>
     </div>