nuxt/i18n for Nuxt3

[kazupon]

Hello, nuxt/i18n team 😃
I'm kazupon as the author of vue-i18n

Yesterday, nuxtnation was held and the schedule for Nuxt3 public beta was released.
nuxt/i18n is a Nuxt module to support i18n, the popular i18n among Nuxt Community users.
I believe It will be an indispensable Nuxt module to support i18n in Nuxt3.

I'm providing vue-i18n to support i18n for projects using Vue.js.
And nuxt/i18n uses vue-i18n internally.
I would like to collaborate on nuxt/i18n for Nuxt3 support together, so I opened this discussion. 😃

I'm Vue.js core team member, so I'm testing Nuxt3 right now.
I'm using @nuxt/kit to create and test Nuxt modules that support vue-i18n for Nuxt3.

https://github.com/intlify/nuxt3

This attempt to create Nuxt modules and what I've heard from the Nuxt framework team about the migration strategy to Nuxt3 using Nuxt Bridge, so I'm aware that some development is needed on the vue-i18n side.

I'm already starting some of them. for example, vue-i18n-composable enhancing, integrate to unplugin from vue-i18n-loader and vite-plugin-vue-i18n

I believe that the nuxt/i18n team will support Nuxt3. ✨
if you have feedback from nuxt/i18n development experience so far, I hope it. 🙏
Maybe, I’m able to provide some of them as features on the vue-i18n side. 💪

[rchl]

Hi,

Sounds great to me and I see that you've already gotten a Maintainer status. :)

I didn't have a chance to see or play with Nuxt 3 yet so at this point I can't say more about how we should proceed with things.

As far as the composition API, I have some early prototype based on https://github.com/intlify/vue-i18n-composable and I think I'll get it ready for Nuxt 2 version, irrespective of what needs to be done for Nuxt 3.

[kazupon]

you've already gotten a Maintainer status. :)

Oh, I've just noticed it 🤦

I have some early prototype based on https://github.com/intlify/vue-i18n-composable and I think I'll get it ready for Nuxt 2 version, irrespective of what needs to be done for Nuxt 3.

Oh, I see. It's great !👍
nuxt/i18n Will Composition API be provided using vue-i18n Composition API as shown in this API references?
https://i18n.nuxtjs.org/api

If so, the version for Vue 3, vue-i18n-next, already provides a Composition API. Therefore, it looks like these APIs can be used to provide the Composition API for nuxt/i18n that you are trying to provide.
However, the only Composition API for Vue 2 is the one provided by vue-i18n-composable at this time, and I'm not sure if it can realize your idea.

I've heard that the backported Nuxt 3 Composition API is available in the Nuxt2 + Nuxt Bridge environment. This means that we can make your application using Composition API in Nuxt2 project. As you said, we should be prepared.

Ok! I’ve just understood about vue-i18n-composable has to be a priority.
This is exactly what I'm working on. I'll keep it!

[rchl]

Oh, I see. It's great !👍
nuxt/i18n Will Composition API be provided using vue-i18n Composition API as shown in this API references?
i18n.nuxtjs.org/api

Yes, apart from what vue-i18n exposes in https://github.com/intlify/vue-i18n-composable, we should also expose all @nuxtjs/i18n-specific APIs.

However, the only Composition API for Vue 2 is the one provided by vue-i18n-composable at this time, and I'm not sure if it can realize your idea.

I believe I can't directly use it but I can create own one based on that.

I've heard that the backported Nuxt 3 Composition API is available in the Nuxt2 + Nuxt Bridge environment. This means that we can make your application using Composition API in Nuxt2 project. As you said, we should be prepared.

I guess I could wait until I can play with that before doing anything further.

[kazupon]

I have updates:

I've released vue-i18n-bridge
https://vue-i18n.intlify.dev/guide/migration/ways.html#what-is-vue-i18n-bridge

It's fully backported from vue-i18n@v9.x
we can use the Vue I18n composition API at Vue 2

[zackkrida]

Does this bridge make nuxt-community/i18n-module work automatically, or is it something the nuxt-community/i18n-module maintainers could use to support nuxt@3 and/or nuxt-bridge?

[kazupon]

I created this to ease the transition for library maintainers like @nuxtjs/i18n (nuxt-community/i18n-module), nuxt-bridge, and Vue application developers using vue-i18n v8.x.

Although not intended for @nuxtjs/i18n, the bridging idea is came from nuxt-bridge.

[productdevbook]

Property "localePath" was accessed during render but is not defined on instance.
_ctx.localePath is not a function

how to used ?

"@intlify/nuxt3": "^0.1.8", install

[kazupon]

I wrote the README of @intlify/nuxt3 repo, It is intended to be a quick and easy way for people to use vue-i18n-next with Nuxt3.
It also has the purpose of finding issues on the vue-i18n-next so that @nuxtjs/i18n can support Nuxt3.

I'm working on the PoC-like thing to make @nuxtjs/i18n work with nuxt bridge and nuxt3 at kazupon/nuxt-i18n-next repo.
Please wait.

[reegodev]

Hello @kazupon , is there any progress in either of those repositories? We are only missing the i18n module to make the permanent switch to Nuxt 3. Is there any way we can help?

[kazupon]

Thanks!
I'm glad to get that help comment from the community ☺️

I just pushed it to the next branch yesterday.
You can see the current status at TODO here:
https://github.com/nuxt-community/i18n-module/blob/next/TODO.md

I would like to implement what is in the TODO and then get help.

[jclaessens97]

I still came across that issue @nuxtjs/i18n: "8.0.0-beta.8", but I also found a quick workaround by wrapping it in your own function:

const { $localePath } = useNuxtApp()
function findLocalePath(page: string) {
  return $localePath(page)
}

[liqueflies]

I saw a branch next with a PoC for nuxt3.
https://github.com/nuxt-community/i18n-module/tree/next
Could you provide some npm next version available for testing? 💚

[kazupon]

sorry, my late reply.
I’ve just push next brach my updates.
You can see the current status at TODO here:
https://github.com/nuxt-community/i18n-module/blob/next/TODO.md

Currently, it has not been published to npm yet. You will need to add the next branch via github to get it working.
next branch doesn't have any docs yet, but it does have a playground.
Maybe, the playground will be helpful to you.

[kazupon]

@rchl
I would like to do an edge release for nuxt/i18n as well, like nuxt.

The advantage of providing edge releases is that we can actually test the npm-published package.
I can create an edge release environment, and I'm actually using it in vue-i18n-routing.

[rchl]

Let's discuss in #1396

[TomMiller-mas]

I have done the sideload ("@nuxtjs/i18n": "npm:@nuxtjs/i18n-edge"), but the configuration on the page doesn't work.

{ modules: [ [ '@nuxtjs/i18n', { locales: ['en', 'es'], defaultLocale: 'en', vueI18n: { fallbackLocale: 'en', messages: { en: { greeting: 'Hello world!' }, es: { greeting: '¡Hola mundo!' } } } } ] ] }

What is the basics of sitting up the side-loaded version?

[kazupon]

@rchl
I have a favor to ask you.
Could you help me implement nuxt/i18n testing?
And can you help me implement other features that have not been implemented?

I have implemented nuxt/i18n so far.
I have not yet implemented all of the features, but I believe I have the basic functionality in place.

I have recently added tests using @nuxt/test-utils-edge to ensure the functionality is working properly in the test cases.
test code is here:
https://github.com/nuxt-community/i18n-module/tree/next/specs/nuxt3

It is better to have someone in the knowledge test all the features rather than me adding tests all by myself.

Also, so far, I have been working on the implementation with the goal of porting, but some features need to be discussed in order to get nuxt3 support for all features.
As an example, for head, we need to support the head option as before, but also support macro functions like definePageMeta in nuxt3. These are just some of the things mentioned here. Other features will need to be discussed.

For nuxt bridge and nuxt3 support, I have abstracted in a package called vue-i18n-routing. There will be some modifications and additions to this module
Of course I will continue nuxt/i18n implementation supporting the community 😃

[rchl]

The reason I've been less active for a while now is that I just can't find much time for it. There is not much time available between the family (small kid), full time job and other open source projects (which I maybe have a bit too many).

Supporting Nuxt 3 is a huge project due to Nuxt 3 having so many breaking changes and it's difficult to get into it without getting really involved and spending a lot of time investigating everything, I feel like. So I really don't feel like I can commit to anything here unfortunately. At this point, I think the only way I could justify spending more of my free/family time on this project is through a financial incentive. But I don't really expect it to be an option in an open project like this one.

Since Nuxt team was always talking about coming up with an official i18n project for Nuxt, maybe it's a good time to talk to them and discuss whether this module could become that and thus receive more resources from the Nuxt team itself. Though they might want to have a clean start with different APIs and stuff...

As for tests, I would just try to take the existing tests and adapt to run in this new environment. Since the browser tests are very high level, those should apply in this new code base as well. It's "just" a matter of getting the infrastructure to work with Nuxt 3 but the tests could possibility be kept mostly unchanged. The big pain point of the current browser tests is that they take "forever" to run due to having to compile tons of fixtures before almost each test. But maybe that would be much faster with Nuxt 3 and Vite, not sure.

[kazupon]

Thank you for your response!
I’ve felt I could see your situation and motivation for nuxt/i18n

Since Nuxt team was always talking about coming up with an official i18n project for Nuxt, maybe it's a good time to talk to them and discuss whether this module could become that and thus receive more resources from the Nuxt team itself. Though they might want to have a clean start with different APIs and stuff...

I'm also wondering what the nuxt framework team thinks about the above 👀
I will have a chance to speak with the nuxt team at the later date. I will ask what they have to say there.

As for tests, I would just try to take the existing tests and adapt to run in this new environment. Since the browser tests are very high level, those should apply in this new code base as well. It's "just" a matter of getting the infrastructure to work with Nuxt 3 but the tests could possibly be kept mostly unchanged. The big pain point of the current browser tests is that they take "forever" to run due to having to compile tons of fixtures before almost every test. But maybe that would be much faster with Nuxt 3 and Vite, not sure.

Yes, I expected that my existing test code would be ported to the new test environment. A few things may need to be adjusted to the new environment...

This new test environment may not solve this problem either. `@nuxt/test-utils-edge builds fixtures and uses playwright for browser testing. As a solution, If the built fixture could be used in other test cases, it would not be necessary to build it for each test item, but it would be necessary to reset the state of the fixture.

[rchl]

If the built fixture could be used in other test cases, it would not be necessary to build it for each test item, but it would be necessary to reset the state of the fixture.

At least in Nuxt 2, the generated routes can differ depending on module options so that's one obstacle. The other is the fact the the plugin files are generated and differ depending on the options.

[maxcreation]

How much incentive and help is needed? Could we get in touch over a call and maybe I can contribute in code or in cash. Email me if you're interested: maxcreation@gmail.com

[kazupon]

@rchl
So far, I have developed nuxtjs/i18n with monorepo at next branch, which supports both nuxt bridge and nuxt3.
However, as I continue development, I have come to think that instead of supporting both, it would be better to use only nuxt3 for what I'm developing now. For nuxt bridge, to provide bridge support for the latest v7.2 version and backport the Composition API that I have developed so far. We have come to believe that it would be preferable to backport the bridge support and the Composition API we have developed to the latest version of v7.2.

The reason for this change of direction is that it is hard to develop support for nuxt bridge and nuxt3 on monorepo, and it takes time to develop support for both.

I have found out it hard to develop a module that supports both nuxt bridge and nuxt3 in the future.
The nuxtjs/i18n functionality depends on the Vue version and the packages associated with it.
For example, the custom route requires vue-template-compiler for nuxt2 and nuxt bridge, and @vue/compiler-sfc for nuxt3 to parse components. Even with vue-demi, it is really hard to absorb version differences due to the Node.js module system

About these changes, we will need to version v7.3 for nuxt bridge and v8 for nuxt3, but considering the difficulty of developing nuxt bridge and nuxt3 in monorepo and the maintenance, it would be better to change the current development.

Fortunately, the latest stable version of nuxtjs/i18n, v7.2.2 works in the nuxt bridge environment as far as I have checked. I would be suggested the following development process.

• nuxtjs/i18n v7.3 release: nuxt bridge support (not including Composition API, Options API only, keep codes of nuxtjs/i18n v7.2)
• nuxtjs/i18n v8 alpha release: nuxtjs/i18n currently being developed at monorepo will be nuxt3 only, v8 alpha release
• At any time, backport from Composition API from v8 to v7.3 or later version

What do you think about these?

[valh1996]

+1 @szulcus for our company too, is there a "workaround" for nuxt bridge atm ? Alternative package or so ?

[szulcus]

@valh1996 in the end we came to the conclusion that the Nuxt Bridge is terribly unstable and we decided to rewrite the whole project to Nuxt 3 (RC8 is probably the only relatively stable version at the moment). Unfortunately, if you want to use the new Composition API, there are 2 options:

• Less comfortable but stable Vue 3
• Comfortable but less stable Nuxt 3

[vervelover]

@valh1996 in the end we came to the conclusion that the Nuxt Bridge is terribly unstable and we decided to rewrite the whole project to Nuxt 3 (RC8 is probably the only relatively stable version at the moment). Unfortunately, if you want to use the new Composition API, there are 2 options:

* Less comfortable but stable Vue 3

* Comfortable but less stable Nuxt 3

I disagree with that, I'm using the nuxtjs/composition-api package with nuxt 2 (without bridge) and it's perfectly stable..

[SebbeJohansson]

@valh1996 in the end we came to the conclusion that the Nuxt Bridge is terribly unstable and we decided to rewrite the whole project to Nuxt 3 (RC8 is probably the only relatively stable version at the moment). Unfortunately, if you want to use the new Composition API, there are 2 options:

* Less comfortable but stable Vue 3

* Comfortable but less stable Nuxt 3

I disagree with that, I'm using the nuxtjs/composition-api package with nuxt 2 (without bridge) and it's perfectly stable..

Yea currently it feels like doing nuxt 2 and composition API is a better option compared to bridge.

[valh1996]

@vervelover @SebbeJohansson I'm with nuxt 2 and the composition API but i'm always in the process of upgrading it to nuxt bridge. For the moment i have found solutions. Let's see if I encounter real "unstable" problems.

[lustremedia]

Hi everyone,
I am currently trying to evaluate if I could use nuxt3 with i18n support.
Is there a production release that can be used for nuxt3?
Any pointers would be helpful, thank you.

[productdevbook]

https://github.com/productdevbook/oku-nuxt3-template

[maxcreation]

https://github.com/productdevbook/oku-nuxt3-template

Could I hire you to help me get that working in my project? Shoot me an email maxcreation@gmail.com if you're interested.

[SebbeJohansson]

https://github.com/productdevbook/oku-nuxt3-template

Is this really working? i18n doesn't work with ssr right now.

[kazupon]

@rchl
Hi!
I would like to release a v8 alpha version of nuxtjs/i18n. All features have not been still completed at this time, but I will continue to develop some features while optimizing for nuxt3.
How should I go about releasing it?

And, also, I would like to publish docs for v8 alpha.
It will be based on the existing v7 docs.
How do I release this doc?

[rchl]

Is it possible to publish documentation in this way?

I'd suggest that you ask at https://discord.com/channels/473401852243869706/735157506300575775 for example since I don't have access to that.

[kazupon]

I've just released v8.0.0-alpha.1
https://github.com/nuxt-community/i18n-module/releases/tag/v8.0.0-alpha.1

And v8 docs too.
https://v8.i18n.nuxtjs.org/

[ReutAlexey]

@kazupon Can you tell me when the approximate release of the stable version is planned?

[lacorde]

Thank you for the amazing work @kazupon.
Any idea how close/far you are from completing no-prefix strategy, with custom route paths ?

[SebbeJohansson]

Any news on SSR?

[mrleblanc101]

Why does npm install @nuxtjs/i18n or yarn add @nuxtjs/i18n install the 8.0.0-alpha.2 ?
It should install the current 7.2.2 (or 7.3) and the 8.0 should be on the @next tag, no ?

Also the terminal error is very confusing as it does not explain the issue is at all !

We will release >=7.3 <8, See about GitHub Discussions #1287 (comment)

What sort or error is that ?
Shouldn't it be more something like this:

@nuxtjs/i18n version 8 only work with Nuxt 3. For Nuxt 2 support please install @nuxtjs/i18n@7

[rchl]

Thanks. I've fixed the tag to point to 7.3.0 again.

@kazupon Not sure how this happened but can you make sure that this doesn't happen again if it's some script doing that?

[mrleblanc101]

Thanks 🙌
Any idea if the error message will be made clearer instead of redirecting to a random GitHub comment that is not really that helpful at explaining the problem anyway ?