vue3 : localized-link not working with object as "to" prop

[sheoak]

If I use localized-link with a string as to parameter, I get a translated link. But if pass an object, I get an untranslated output:

// works, localized to /fr/lire
<localized-link to="/read">
// not localized, output /read
<localized-link :to="{ name: 'read' }">
<router-link :to="{ name: 'read' }">

See https://next.router.vuejs.org/api/ for to parameter.

[sheoak]

After furter investigation, the localized-link component works in my main App.vue component, but not in my sub-components. Note that I'm using routes "components" (with a s) key and lazy loading, that might be an issue?

[radek-altof]

Thanks for pointing this out. The translation on the link itself isn't implemented when using name inside the to attribute. However, if I'm not mistaken, when actually pressing the link, you should get redirected to translated path, because internally there is a beforeEach navigation guard, which translates the new path.

Concerning your second comment, it would be helpful if you can provide some stripped down code sandbox (or similar) demo.

On a sidenote, if you use path, it should get translated correctly.

<localized-link :to="{ path: '/read' }">

[sheoak]

Sorry, I mixed up things in my second comment, it's actually another bug (or I am misusing the lib?) with language-switcher. I wanted to make some tests before posting a proper bug.

I indeed get redirected using the untranslated route, but I would like to see the link translated on mouse over.

[radek-altof]

Ok, let's keep this issue reporting the improper link translation when name property is used in the to attribute. If you figure out another bug, please open another issue, ideally with some sandbox demo 🙂

[alisspers]

Just want to point out that this bug is not specifically tied to vue3 (as the issue title prefix indicates).

It's also present in the vue2 version. I went ahead and created a sandbox trying to demo the issue: https://codesandbox.io/s/vue-2-localized-urls-link-to-named-prop-bug-hssg5?file=/src/components/Navigation.vue

[alisspers]

So the method that would probably need updating is localizedTo() in LocalizedLink.

As a workaround/proof-of-concept I've copied the LocalizedLink component to our repo and rewritten the localizedTo method into the following:

localizedTo() {
  if (typeof this.to === 'string') {
      return this.$localizePath(this.to);
  }

  if (typeof this.to === 'object') {
        const o = JSON.parse(JSON.stringify(this.to));

        if (typeof this.to.path === 'string') {
            o.path = this.$localizePath(o.path);
        } else if (typeof this.to.name === 'string') {
            const { route } = this.$router.resolve(this.to);

            o.path = this.$localizePath(route.path);

            delete o.name; // Must be deleted, otherwise it'll take precedence over o.path
        }

        return o;
    }

    return this.to;
},

The only real change here being the clause else if (typeof this.to.name === 'string') {...} (other changes are just syntactic sugar). This seems to be working at my dev env so far, will need to verify it a bit more though.

I just wanted to add this here to provide som food for thought.

[atyx17]

Ok, let's keep this issue reporting the improper link translation when name property is used in the to attribute. If you figure out another bug, please open another issue, ideally with some sandbox demo slightly_smiling_face

Any update on this?

[radek-altof]

Hi guys, sorry I'm leaving you stranded, unfortunately this project isn't a priority for me. I will try to get to it around the end of the year 😉

@alisspers, you are right, it's for both Vue 2 and Vue 3. Thanks for the sample code. It may be just this that needs implementing, but I need to consider it thoroughly.