vue3: Correct way to use in setup?

[sheoak]

I'm trying to use vue-lang-router with vue 3 using programmatic routes but I get all kind of strange errors. If I understand right, vue-lang-router is not compatible with useRouter() ? I cannot find a way to import vue-lang-router in the setup.

One of the error I get often is : Uncaught (in promise) TypeError: this.$i18n is undefined

Wich sends me to this bit of code:

  mounted() {
            /* istanbul ignore if */
            if (((process.env.NODE_ENV !== 'production') || __INTLIFY_PROD_DEVTOOLS__) && !false) {
                this.$el.__INTLIFY__ = this.$i18n.__composer;
                const emitter = (this.__emitter = createEmitter());
                const _vueI18n = this.$i18n;
                _vueI18n.__enableEmitter && _vueI18n.__enableEmitter(emitter);
                emitter.on('*', addTimelineEvent);
            }
        },

This is what I'm doing :

import { useRouter } from 'vue-router'

…
setup() {
    const router = useRouter()
    return {
       router
    }
}
…

…
    // later in an event
    router.push({
      name: 'write/story',
    })
…

[radek-altof]

Hi @sheoak, right now vue-lang-router doesn't support usage inside Composition API.

[sheoak]

I see… do you have a workaround @radek-altof ? I have many call to router in my composables and it would take quite a lot of refactoring to change this.

[sheoak]

@radek-altof actually after some more tests I have this error even if I don't use composition API.

This simple link: <router-link to="/fr/bureau">test</router-link>

Trigger this error: Uncaught (in promise) TypeError: this.$i18n is undefined

But it doesn't happen if just load the page and click on the link. I need to come back to the page and click on it, then I get the error. I'm using keep-alive around my router component as well as components key in my route (with an s). My route components are loaded async like so:

const ProjectsIndex = () => import('@/views/ProjectsIndex')

I will try to make a sandbox reproducing this bug but I need some time.

[radek-altof]

Yeah, sandbox would definitely be helpful, thanks. As for some workaround for Composition API, I don't think there's anything, sorry. It's going to require some coding. I don't have the necessary free time now to dive into experiments with Composition API, so probably only in the future.

[sheoak]

So in the end it's seems it's not related to vue-lang-router but to vue-i18n. It seems to be related to my layout system so I will consider it's not a vue-lang-router bug and close the issue. For those who would have similar errors it seems related to vue-i18n + async layouts in vue 3.