When using pug lang in templates data state get's wiped out when updating a .vue Single File Component with Reactivity Transform

[JordashTalon]

Having a strange issue when using pug with reactivity transform macro.

If you have a simple template like this:

<template lang="pug">
.pageWrapper
  p Variable should show here: #[b {{value}}]
  p Change text here to something else
</template>

<script setup>
let value = $ref('Value here');
</script>

And a nuxt.config.ts like this:

import ReactivityTransform from '@vue-macros/reactivity-transform/vite';

export default defineNuxtConfig({
  vite: {
    plugins: [ReactivityTransform()],
  },
  devtools: { enabled: true },
});

First time you load the page it renders perfectly fine. But if you change the template then it seems to wipe out the data. See screenshots below:

If you change the template the data disappears during hot module reload:

Any ideas on a fix for this? It works fine without using Pug, but we use Pug extensively for development.

One side note, before using the Vue Macro we used reactivity transform like this:

export default defineNuxtConfig({
  vite: {
    vue: {
     reactivityTransform: true
   }
  }
});

And it worked fine, but Vue is removing that way of using Reactivity Transform.

Here is a minimum reproducible project:
https://stackblitz.com/edit/github-17oxys?file=pages%2Findex.vue

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• github-17oxys (Open reproduction)

[sxzz]

The bug is because of @vitejs/plugin-vue. Trying to fix it.

[JordashTalon]

The bug is because of @vitejs/plugin-vue. Trying to fix it.

Thanks a ton!

[sxzz]

Let's track vitejs/vite-plugin-vue#232

[so1ve]

Out of topic: @JordashTalon There is an official nuxt integration for vue-macros so you don't have to setup the vite plugin manually

[JordashTalon]

@so1ve I think my example is using the official nuxt integration for Vue-macros? Or am I implementing it wrong?

[so1ve]

Ah! I see, you are using a separate package (reactivity-transform), not the whole vue-marcos

[JordashTalon]

I'll try it with the nuxt vue macros integration, I wonder if that will fix it?

[JordashTalon]

I tested the nuxt integration docs from here: https://vue-macros.sxzz.moe/guide/nuxt-integration.html

Unfortunately that does not solve the problem😭

[sxzz]

Fixed, please upgrade to @vitejs/plugin-vue@4.3.2.

[JordashTalon]

@sxzz If i'm using the Reactivity Transform Macro here: https://vue-macros.sxzz.moe/features/reactivity-transform.html how would I upgrade the vitejs plugin? I think it's added as a dependency to that module? Or should I manually install 4.3.2 as a new dependency?

[JordashTalon]

Actually it worked! I just did npm install @vitejs/plugin-vue@4.3.2 and it started working perfectly, thanks!

I'm wondering if the modules listed on these pages:
https://vue-macros.sxzz.moe/features/reactivity-transform.html
https://vue-macros.sxzz.moe/guide/nuxt-integration.html

Should be updated to automatically use that version of plugin-vue ?

[sxzz]

I'm not familiar to npm itself (I'm using pnpm). Since you're using Nuxt with Vite integration and it's unrelated to Vue Macros. So I don't think writing down into Vue Macros docs is suitable. Maybe npm upgrade @vitejs/plugin-vue could be helpful, instead of installing a new dep.