Feature request: Nuxt support about fluent-vue

[reemhamz]

Hey there @Demivan! Wondering if support for Nuxt is underway. I'm trying to introduce Nuxt for one of our projects here and having Fluent support would be grande.

[Demivan]

I will be starting on it tomorrow. I was busy with my main job, so didn't have time to work on it before.
@reemhamz Are you planning to use Nuxt 2 or 3?

[reemhamz]

@Demivan no worries! Thanks for taking the time to work on this. Currently just Nuxt2 since Nuxt3 is still in Beta, but once that version is stable and up to par, I'd be happy to migrate to Nuxt3, but that's a later problem.

[Demivan]

I have added a simple Nuxt 2 example: https://github.com/fluent-vue/examples/tree/main/nuxt-2

Implementing something like https://github.com/nuxt-community/i18n-module will take much more time. I'd rather work on making v-t directive compatible with SSR for now. When Nuxt 3 is stable I should be able to use nuxt-kit to implement analog of i18n-module that is Nuxt 2 and Nuxt 3 compatible.

[Demivan]

SSR support wasn't that bad. :) I have merged it to that example.

I will extract Nuxt build module to a separate package later.

[0xMANFRE]

Reimplement @nuxtjs/i18n for fluent-vue. Probably when @nuxt/i18n is updated to Nuxt 3

@Demivan is the Nuxt 3 module still worked on?
The pluralisation syntax of vue-i18n and @nuxtjs/i18n is terrible and has zero flexibility compared to Fluent or even MessageFormat.
I would love to switch to a future @nuxtjs/fluent or @fluent-vue/nuxt when it will become available.

[Demivan]

@0xMANFRE @nuxtjs/i18n is huge and has lots of features. It will be few times bigger than fluent-vue itself. I don't have time to reimplement everything.
But basic integration of fluent-vue into Nuxt is easy. You add unplugin-fluent-vue Vite plugin and create a custom Nuxt plugin that initializes fluent-vue. Code is SSR compatible already.

[Demivan]

By the way, I plan to support MessageFormat 4 when the syntax is finalized.

[0xMANFRE]

But basic integration of fluent-vue into Nuxt is easy. You add unplugin-fluent-vue Vite plugin and create a custom Nuxt plugin that initializes fluent-vue. Code is SSR compatible already.

The documentation provides only a Vite config file.
Is there a working Vue 3 example that has external locale files and a locale switcher? I can't seem to find it.

[Demivan]

There is no Nuxt 3 example. I will create it and link it here.

[Demivan]

Added Nuxt 3 example https://github.com/fluent-vue/examples/tree/main/nuxt-3. Check the plugins and modules folders for implementation. You still need some way of selecting the current locale on the server, but that really depends on your site (is it per domain, path or read from cookie)

What is not working is SSR for the v-t directive. I almost never use it, but I will work on the SSR implementation this week.

[Demivan]

Nuxt 3 integration is done. Docs can be found here: https://fluent-vue.demivan.me/integrations/nuxt