feat: add support for composition api

[rchl]

These are some changes that I have had lying dormant for a while. Still not finished. Need to expose more APIs (I believe), document and test.

@kazupon any comments? Is there something you have already done in that area and/or would you want things to be done differently?

[kazupon]

@rchl Thank you for your mention!

Great works! but, sorry, I forgot to tell you 🙇

I previously released vue-i18n-bridge for vue 2. that is back-ported from vue-i18n-next composition API like useI18n, and it work on [email protected].

Documentation is here: https://vue-i18n.intlify.dev/guide/migration/ways.html

If you have any questions, please any comments.

[rchl]

Yes, but the composition API that you've created for vue-i18n is not enough since this module exposes extra properties and functions that also need to be provided through composition API.

So the question is, should this module create its own composition API like in this PR or maybe expose a wrapper for vue-i18n API that also adds extra properties.

In theory the latter option would be better as it would require less maintenance.

[kazupon]

So the question is, should this module create its own composition API like in this PR or maybe expose a wrapper for vue-i18n API that also adds extra properties.

In theory the latter option would be better as it would require less maintenance.

Yes, I agree with you. @nuxtjs/i18n itself shouldn't create its own Composition API like useI18n provided by vue-i18n-bridge. The properties and functions provided by @nuxtjs/i18n should be provided by wrapping the Composition API provided by vue-i18n-bridge.

[ThomasBerne]

Why is this PR still a WIP?

[DamianGlowala]

Hi @rchl,

Do you have any plans to resume work on this PR? This would be of such a great enhancement! 😃

[rchl]

There is ongoing work on next major version that will include the composition API. Though it's not clear how rough the transition to the next major version will be so maybe worth to still get this in.

[DamianGlowala]

Hi @rchl,

Would you have a spare moment to see how this draft PR could be tweaked for using with Nuxt 3 & Bridge? Nuxt i18n is the only library that holds me back from making a full transition to Nuxt 3, therefore I am trying to find these workarounds and any advice on this would be really appreciated 😄

That's what I came up with (it throws @nuxtjs/i18n not initialized error when imported in the <script setup> tag):

import Vue from "vue";

export function useI18n() {
    const { nuxt2Context } = useNuxtApp();
    const app = nuxt2Context;
    const i18n = nuxt2Context.$i18n;

    if (!i18n) {
        throw new Error("@nuxtjs/i18n not initialized");
    }

    const instance = getCurrentInstance();
    const vm = instance?.proxy || new Vue({});

    const locale = computed({
        get() {
            return i18n.locale;
        },
        /** @param {string} v */
        set(v) {
            i18n.setLocale(v);
        }
    });

    return {
        ...i18n,
        locale,
        getRouteBaseName: app.getRouteBaseName,
        localeLocation: app.localeLocation,
        localePath: app.localePath,
        localeRoute: app.localeRoute,
        nuxtI18nHead: vm.$nuxtI18nHead.bind(vm),
        switchLocalePath: app.switchLocalePath,
        t: vm.$t.bind(vm),
        tc: vm.$tc.bind(vm),
        d: vm.$d.bind(vm),
        te: vm.$te.bind(vm),
        n: vm.$n.bind(vm)
    };
}

[rchl]

This change alone won't help much with Nuxt 3 support. There is a complete refactor needed that is happening on the next branch (also see https://github.com/nuxt-community/i18n-module/discussions/1287).

[vis97c]

Hi @rchl,

Would you have a spare moment to see how this draft PR could be tweaked for using with Nuxt 3 & Bridge? Nuxt i18n is the only library that holds me back from making a full transition to Nuxt 3, therefore I am trying to find these workarounds and any advice on this would be really appreciated 😄

That's what I came up with (it throws @nuxtjs/i18n not initialized error when imported in the <script setup> tag):

import Vue from "vue";

export function useI18n() {
    const { nuxt2Context } = useNuxtApp();
    const app = nuxt2Context;
    const i18n = nuxt2Context.$i18n;

    if (!i18n) {
        throw new Error("@nuxtjs/i18n not initialized");
    }

    const instance = getCurrentInstance();
    const vm = instance?.proxy || new Vue({});

    const locale = computed({
        get() {
            return i18n.locale;
        },
        /** @param {string} v */
        set(v) {
            i18n.setLocale(v);
        }
    });

    return {
        ...i18n,
        locale,
        getRouteBaseName: app.getRouteBaseName,
        localeLocation: app.localeLocation,
        localePath: app.localePath,
        localeRoute: app.localeRoute,
        nuxtI18nHead: vm.$nuxtI18nHead.bind(vm),
        switchLocalePath: app.switchLocalePath,
        t: vm.$t.bind(vm),
        tc: vm.$tc.bind(vm),
        d: vm.$d.bind(vm),
        te: vm.$te.bind(vm),
        n: vm.$n.bind(vm)
    };
}

It seems like in more recent versions is "i18n" instead of "$i18n"

[DamianGlowala]

Thanks for the tip @vis97c! Have you managed to make it work by any chance or this is a pure guess? I am using TypeScript and couldn't see the latter variant. I rolled back to Nuxt 2 without bridge for the time being.

[vis97c]

Thanks for the tip @vis97c! Have you managed to make it work by any chance or this is a pure guess? I am using TypeScript and couldn't see the latter variant. I rolled back to Nuxt 2 without bridge for the time being.

I'm using nuxt with the bridge and is working.

Haven't tested on script setup yet. Mainly because is a lot more unstable. For the router meta i'm just storing the keys and later within the vue instance passing them to the i18n function.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.