I have a strange bug that I've narrowed down, but unfortunately can't create a minimal reproducible example (forgive me!)

I'm using Nuxt.js, Vuetify, Vue.js

When I run in development mode, the app works.

But when I run in production mode, the following component causes the app to freeze (all buttons become unresponsive).

<v-btn nuxt :to="to" color="primary" large v-text="text" />

When I replace v-text="text" with {{ text }} as an inner node, everything begins to work again.

Before (broken)

<v-btn nuxt :to="to" color="primary" large v-text="text" />

After (fixed)

<v-btn nuxt :to="to" color="primary" large>{{ text }}</v-btn>

Does anyone know what would change in Vue production mode, or why v-text would be the culprit?

CodePudding user response：

I don't have an explanation why it works in development but not production, but that's irrelevant because you shouldn't use v-text on components (unless that component specifically works with v-text).

v-text simply sets the innerText DOM property on the root element of the component; these two are functionally equivalent:

<v-btn v-text="text"></v-btn>
<v-btn :inner-text.prop="text"></v-btn>

Setting innerText will replace all child nodes of the element with a single text node, essentially breaking the component's template.

It's better to set the button content the normal way so the component can slot it in the correct place in the template:

<v-btn>{{ text }}</v-btn>

CodePudding user response：

Regarding this issue: https://github.com/nuxt/framework/issues/6466#issuecomment-1209742483

It looks like since you're using Nuxt with the whole SSR/rehydration thing the fact that it messes up with the DOM in a forced way probably doesn't help.

Meanwhile, as mentioned in the other answer: you should not really use this directive anyway, stick to the mustache syntax.