refactor: integrate vue-i18n-routing

[BobbieGoede]

🔗 Linked issue

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 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)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

As mentioned here intlify/routing#79 (comment) we want to integrate vue-i18n-routing in this repo.

We probably want the tests from that repo as well, so I still need to work on that.

@kazupon
There is likely still quite some code that can be removed, and maybe the overall directory structure should be changed, let me know what you think.

I also removed the exclusions/splits that were added to support Vue 2, would this cause issues for Nuxt I18n Bridge/7.4? I removed it to lower the build size.

Also could you take a look at https://github.com/BobbieGoede/i18n/blob/refactor/integrate-routing-4/src/runtime/routing/utils.ts, I'm not sure if the checks are still relevant for Nuxt/Vue 3 as I don't fully understand the difference between I18n, VueI18n and Composer 😅

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[kazupon]

@BobbieGoede

I also removed the exclusions/splits that were added to support Vue 2, would this cause issues for Nuxt I18n Bridge/7.4? I removed it to lower the build size.

You don't have to worry about that. :)
Nuxt I18n Bridge / Nuxt I18n v7.4 can provide the composable used by Nuxt I18n v8 for the existing Nuxt I18n v7.3 code base. You no longer need to worry about vue-i18n-routing. /cc @wattanx

[kazupon]

Also could you take a look at https://github.com/BobbieGoede/i18n/blob/refactor/integrate-routing-4/src/runtime/routing/utils.ts, I'm not sure if the checks are still relevant for Nuxt/Vue 3 as I don't fully understand the difference between I18n, VueI18n and Composer 😅

I think you can remove them if they are not used in Nuxt I18n.

I18n is an instance created by createI18n, and APIs such as t can be used via the global property.
The Composer is the skeleton exported by useI18n and others that provide Vue composition API-based API.
VueI18n is a legacy API that provides an API compatible with vue-i18n v8. It's wrapped with Composer.

[kazupon]

Great! 👏
LGTM!

[nuxt-studio]

✅ Live Preview ready!

Name	Edit	Preview	Latest Commit
i18n	Edit on Studio ↗︎	View Live Preview	c51bb8e

[BobbieGoede]

Thanks for the feedback!

I think you can remove them if they are not used in Nuxt I18n.

Some of it is still being used but I have now removed the unused parts and cleaned/refactored the rest of the utils.

Great! 👏
LGTM!

I think all that's left to do is to move/add the relevant tests from vue-i18n-routing, hopefully I have time to work on that in the next few days. Will let you know when that's done!

[BobbieGoede]

@kazupon
I have added most of the tests from vue-i18n-routing. Some of the features/tests don't quite work the same in @nuxtjs/i18n (https://github.com/nuxt-modules/i18n/pull/2686/files#diff-1e1fee9c39238ac92309cc638084d2fa0d3a898b6ea2f4f98de2d01188447306R105-R108 and https://github.com/nuxt-modules/i18n/pull/2686/files#diff-1e1fee9c39238ac92309cc638084d2fa0d3a898b6ea2f4f98de2d01188447306R120-R124) not sure how and whether those should be tested.

Some of the tests had to be adjusted due to #2581.

I haven't added the extends tests, related to extending vueI18n and router. Not entirely sure how those could be tested accurately within the module.

Moving the tests also revealed an existing bug as seen here https://github.com/nuxt-modules/i18n/pull/2686/files#diff-1e1fee9c39238ac92309cc638084d2fa0d3a898b6ea2f4f98de2d01188447306R46-R56. When using strategy no_prefix the routes are not being escaped, this case was not being tested in vue-i18n-routing. I will create a new issue to track this bug.

[kazupon]

@BobbieGoede
Thank you for your efforts!

I have added most of the tests from vue-i18n-routing. Some of the features/tests don't quite work the same in @nuxtjs/i18n (https://github.com/nuxt-modules/i18n/pull/2686/files#diff-1e1fee9c39238ac92309cc638084d2fa0d3a898b6ea2f4f98de2d01188447306R105-R108 and https://github.com/nuxt-modules/i18n/pull/2686/files#diff-1e1fee9c39238ac92309cc638084d2fa0d3a898b6ea2f4f98de2d01188447306R120-R124) not sure how and whether those should be tested.

This may be due to a slight difference in behavior between the vue-router used in vue-i18n-routing and the routing inside nuxt.
nuxt uses vue-router, but internally nuxt wraps it and tweaks routing a bit.
The difference may affect the test.

I haven't added the extends tests, related to extending vueI18n and router. Not entirely sure how those could be tested accurately within the module.

extendI18n does not need to be tested if it works with nuxt i18n specs.
(BTW, I was thinking of providing vue-i18n-routing as a routing library to Vue community that uses only vue + vue-router) 😅

[BobbieGoede]

extendI18n does not need to be tested if it works with nuxt i18n specs.

It seems to be working 😅

(BTW, I was thinking of providing vue-i18n-routing as a routing library to Vue community that uses only vue + vue-router) 😅

What do you mean exactly? If there's any changes planned for vue-i18n-routing I can help 😄

I have no more changes for this PR, it can be merged if everything looks good!

[kazupon]

What do you mean exactly? If there's any changes planned for vue-i18n-routing I can help 😄

With using vite-plugin-pages, I wanted to give like nuxt i18n routing by using vue-i18n-routing for vue community.
https://github.com/hannoeru/vite-plugin-pages

And I wanted to give i18n routing on SSR with using vike
https://github.com/vikejs

I wanted to give these to the vite community via vue-i18n-routing, but my time is limited. 😅