v-tdoes not support certain Javascript operations

[Marcoru97]

Environment

• Operating System: Darwin
• Node Version: v18.20.4
• Nuxt Version: 3.14.1592
• CLI Version: 3.15.0
• Nitro Version: 2.10.4
• Package Manager: [email protected]
• Builder: -
• User Config: default
• Runtime Modules: @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @pinia/[email protected], @vueuse/[email protected], [email protected]
• Build Modules: -

Reproduction

https://codesandbox.io/p/devbox/exciting-hamilton-zr33kf?workspaceId=5bf11af2-101a-4cf1-8bd0-60608094be07

Describe the bug

It seems that with the latest addition to support v-t SSR (v9.0) some Javascript functionalities stopped working.

I ran into a couple of issues:

• Computed as Path (Works while developing but crashes on build)

const test = computed(() => {
    return "welcome";
});
...
<span v-t="{ path: test, args: { page } }" />

• Optional chaining does not work

<span v-t="{ path: 'welcome', args: { page: page?.count } }" />

• Template path does not work

const shortPath = "come";
...
<p v-t="{ path: `wel${shortPath}`, args: { test: test } }"></p>

• null coalescing does not work

<p v-t="{ path: 'welcome', args: { test: test ?? 'bar' } }"></p>

Additional context

It seems to only affect SSR.

Logs

[vite-node] [PARSE_ERROR] /app.vue <br><pre>Expression expected /* Injection by vite-plugin-vue-inspector Start */ import { createElementVNode as __createElementVNode,createElementBlock as __createElementBlock } from "/_nuxt/node_modules/vue/index.mjs" import { useI18n } from "/_nuxt/node_modules/vue-i18n/dist/vue-i18n.mjs"; import { ref, computed } from "/_nuxt/node_modules/vue/index.mjs"; function _interopVNode(vnode) { if (vnode &amp;&amp; vnode.props &amp;&amp; 'data-v-inspector' in vnode.props) { const data = vnode.props['data-v-inspector'] delete vnode.props['data-v-inspector'] Object.defineProperty(vnode.props, '__v_inspector', { value: data, enumerable: false }) } return vnode } function _createElementVNode(...args) { return _interopVNode(__createElementVNode(...args)) } function _createElementBlock(...args) { return _interopVNode(__createElementBlock(...args)) } /* Injection by vite-plugin-vue-inspector End */ const shortPath = "come"; const _sfc_main = { __name: 'app', setup(__props, { expose: __expose }) { __expose(); const { setLocale } = useI18n(); const test = ref("bar"); const test2 = { foo: "bar", }; // crashes on build const path = computed(() =&gt; { return "welcome"; }); const __returned__ = { setLocale, test, test2, path, shortPath } Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true }) return __returned__ } } import { undefined as _undefined, createCommentVNode as _createCommentVNode, openBlock as _openBlock, } from "/_nuxt/node_modules/vue/index.mjs" const _hoisted_1 = { "data-v-inspector": "app.vue:18:3" } const _hoisted_2 = { "data-v-inspector": "app.vue:19:5" } const _hoisted_3 = { "data-v-inspector": "app.vue:20:7" } const _hoisted_4 = { "data-v-inspector": "app.vue:21:7" } const _hoisted_5 = { "data-v-inspector": "app.vue:23:7" } function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { return (_openBlock(), _createElementBlock("div", _hoisted_1, [ _createElementVNode("div", _hoisted_2, [ _createElementVNode("p", _hoisted_3, _toDisplayString((_ctx.$t)('welcome', { test: $setup.test2.foo }, { })), 1 /* TEXT */), _createElementVNode("p", _hoisted_4, _toDisplayString((_ctx.$t)($setup.path, { test: $setup.test2.foo }, { })), 1 /* TEXT */), _createElementVNode("p", _hoisted_5, _toDisplayString((_ctx.$t)(, { test: }, { })), 1 /* TEXT */), _createCommentVNode(" &lt;p v-t=\"{ path: `wel${shortPath}`, args: { test: test } }\"&gt;&lt;/p&gt; "), _createCommentVNode(" &lt;p v-t=\"{ path: 'welcome', args: { test: test?.foo } }\"&gt;&lt;/p&gt; ") ]) ])) } import _export_sfc from "/_nuxt/@id/__x00__plugin-vue:export-helper" export default /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render],['__file',"/project/workspace/app.vue"]])</pre><br>

[BobbieGoede]

Supporting directives for SSR is a bit complicated, in the previous versions of nuxt-i18n it didn't work during SSR at all 😅

This functionality is provided by unplugin-vue-i18n and vue-i18n-extensions so opening an issue there would be better, that being said, the directive usage is going to be deprecated in the future (see intlify/vue-i18n#2045) so I recommend replacing its usage in your project instead.