fix: v-t directive SSR

[BobbieGoede]

🔗 Linked issue

• hello! kazupon! kazupon/kazupon#17

❓ Type of change

• 📖 Documentation (updates to the documentation, readme or JSdoc annotations)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Resolves kazupon/kazupon#17

I thought adding the directive transformation would have been more involved than this but it seems to be working 😅

I'll see if I can update https://github.com/intlify/vue-i18n-extensions a bit and perhaps experiment with making something like intlify/vue-i18n#1820 possible, though to be honest, I'm not sure if that feature is the right direction but it would be good learning experience.

📝 Checklist

• I have linked an issue or discussion.
• I have added tests (if possible).
• I have updated the documentation accordingly.

[kazupon]

I think mode option should be set from i18n.types

[BobbieGoede]

Maybe I'm misunderstanding, but the injected component properties are always prefixed with $ (such as $t()) right?

When passing mode: 'composition' to the transform it will (in this case incorrectly) transform the code to use t() without prefix, which I think won't work 🤔.

[kazupon]

Thank you so much!
I've just comment to your PR!
Please check it!

[kazupon]

@BobbieGoede
Sorry to keep you waiting!

I've just released unplugin-vue-i18n v5 beta
I've merged vue-i18n-extensions into unplugin-vue-i18n.
https://github.com/intlify/bundle-tools/releases/tag/unplugin-vue-i18n%405.0.0-beta.2

If you set the optimizeTranslationDirective option to true, unplugin-vue-i18n will optimise v-t with Vue compiler and vite (rollup) transform.

[BobbieGoede]

I've just released unplugin-vue-i18n v5 beta I've merged vue-i18n-extensions into unplugin-vue-i18n. intlify/bundle-tools@unplugin-vue-i18n%405.0.0-beta.2 (release)

If you set the optimizeTranslationDirective option to true, unplugin-vue-i18n will optimise v-t with Vue compiler and vite (rollup) transform.

@kazupon
Also sorry for the delay too 😅 I just got back from a short holiday

I tried updating to the unplugin-vue-i18n beta but I'm getting the following error when running tests:

Error: requires 'vue-i18n' or 'petite-vue-i18n' to be present in the dependency tree.

Does updating this require updating other deps to incompatible versions? If so, we may have to merge the PR in its current state (unless this won't work for some configs) and delay the unplugin-vue-i18n update for the next major 🤔

[kazupon]

@BobbieGoede

Thanks!

Also sorry for the delay too 😅 I just got back from a short holiday

I tried updating to the unplugin-vue-i18n beta but I'm getting the following error when running tests:

Error: requires 'vue-i18n' or 'petite-vue-i18n' to be present in the dependency tree.

Does updating this require updating other deps to incompatible versions? If so, we may have to merge the PR in its current state (unless this won't work for some configs) and delay the unplugin-vue-i18n update for the next major

Hmm, That looks like a bug in unplugin-vue-i18n. 😅
I have an idea, and I'll try to fix it.

[kazupon]

@BobbieGoede
I've just fixed that issue.
https://github.com/intlify/bundle-tools/releases/tag/unplugin-vue-i18n%405.0.0-beta.3

please try to it! 🙏

[BobbieGoede]

@kazupon
I've updated to the latest beta, commented out the previous implementation and pushed the changes I made so far. It seems like something is not working, some tests fail and the tests seem to get frozen so I cancelled the workflow.

When running the fixture specs/fixtures/inline_options it will throw an error:

cannot support locale type

For any t or $t function call with a key that also has a translation (the fixture has no translations for blog and my-module-exemple.hello, these don't trigger the error).

Could you take a look again? 😅

[kazupon]

@BobbieGoede
Thanks!

When I tried the playground, I reproduced your issue on there.
I faced the errors:

at createCoreError (./node_modules/.pnpm/@[email protected]/node_modules/@intlify/core-base/dist/core-base.mjs:630:32)
at compileToFunction (./node_modules/.pnpm/@[email protected]/node_modules/@intlify/core-base/dist/core-base.mjs:952:11)
at compileMessageFormat (./node_modules/.pnpm/@[email protected]/node_modules/@intlify/core-base/dist/core-base.mjs:1171:15)
at translate (./node_modules/.pnpm/@[email protected]/node_modules/@intlify/core-base/dist/core-base.mjs:1039:45)
at ./node_modules/.pnpm/[email protected][email protected]/node_modules/vue-i18n/dist/vue-i18n.mjs:402:46
at wrapWithDeps (./node_modules/.pnpm/[email protected][email protected]/node_modules/vue-i18n/dist/vue-i18n.mjs:363:13)
at t (./node_modules/.pnpm/[email protected][email protected]/node_modules/vue-i18n/dist/vue-i18n.mjs:402:12)
at setup (./playground/pages/index.js:48:51)
at _sfc_main.setup (./playground/pages/index.js:260:23)

And I noticed that unplugin-vue-i18n depend on message-compiler of vue-i18n v10.
This error appears to occur because nuxt-i18n has been using its message compiler since vue-i18n v9, and the interface is not what is expected.

I’m just starting work for nuxt-i18n v9 and would like to support v-t SSR full support in that version.