[NEXT] useLocalePath() not working

[szulcus]

trafficstars

Version

@nuxtjs/i18n: ^8.0.0-alpha.2 nuxt: 3.0.0-rc.8

Nuxt configuration

• [x] Applies to a site deployed to a static server (site generated with nuxt generate)
• [ ] Applies to a site deployed to a server with a Node backend

@nuxtjs/i18n configuration

i18n: {
	strategy: 'prefix',
	vueI18n: {
		legacy: false,
		locale: 'en',
		messages: {
			en: {
				welcome: 'Welcome',
			},
			fr: {
				welcome: 'Bienvenue',
			},
		},
	},
}

Steps to reproduce

1. Install latest @nuxtjs/i18n module
2. Use useLocalePath()

What is Expected?

URL with valid locale prefix.

What is actually happening?

Nothing or error.

Pages

Error while useLocalePath() is imported from vue-i18n-routing:

import { useLocalePath } from 'vue-i18n-routing';

const localePath = useLocalePath();
console.log('path: ', localePath('index'));

vue-i18n-routing.mjs:428 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'Symbol(vue-i18n-routing-gor)')
    at getGlobalOptions (vue-i18n-routing.mjs:428:16)
    at getI18nRoutingOptions (vue-i18n-routing.mjs:542:19)
    at Object.resolveRoute (vue-i18n-routing.mjs:580:105)
    at Object.localePath (vue-i18n-routing.mjs:565:39)
    at vue-i18n-routing.mjs:829:20
    at setup (index.vue:5:2)
    at callWithErrorHandling (runtime-core.esm-bundler.js:155:22)
    at setupStatefulComponent (runtime-core.esm-bundler.js:7187:29)
    at setupComponent (runtime-core.esm-bundler.js:7142:11)
    at mountComponent (runtime-core.esm-bundler.js:5491:13)

Nothing without import anything:

const localePath = useLocalePath();
console.log('path: ', localePath('index'));

---

No, I am unable to provide a reproduction. I have already spent sufficient time describing this and previous bugs.

[szulcus]

Workaround:

const { $localePath } = useNuxtApp();

[dargmuesli]

For me useLocalePath does not work in a definedPageMeta middleware:

definePageMeta({
  middleware: [
    function (_to: any, _from: any) {
      const localePath = useLocalePath()
      return navigateTo(localePath('/'))
    },
  ],
})

@szulcus' workaround works!

[Luferov]

May it help you

[dargmuesli]

The workaround now throws a typing error with the latest changes: Apparently the first parameter should be the Nuxt instance, but calling the function as before remains working :thinking:

[szulcus]

@dargmuesli For me, useLocalePath already works fine in the latest version (^8.0.0-beta.2):

<script setup lang="ts">
	import { useLocalePath } from 'vue-i18n-routing';

	const localePath = useLocalePath();
	console.log(localePath('dashboard'));
</script>

Interestingly, despite TypeScript reporting an error, $localePath still works. I am closing the thread, but if you still have a problem, feel free to create a new issue.

[szulcus]

Edit: I reopen issue because using useLocalePath in middleware produces an error 😕:

vue-router.mjs:3451 SyntaxError: Must be called at the top of a `setup` function (at null:85:17)
    at createCompileError (null:85:17)
    at createI18nError (null:2521:10)
    at useI18n (null:4124:11)
    at useLocalePath (vue-i18n-routing.mjs:922:10)
    at auth.global.ts:8:2
    at fn (nuxt.mjs?v=95e8e59b:118:27)
    at callWithNuxt (nuxt.mjs?v=95e8e59b:123:12)
    at router.mjs?v=95e8e59b:110:1
    at vue-router.mjs:1997:35
    at new Promise (<anonymous>)

Temporary workaround:

import { useNuxtApp } from '#app';
import { LocalePathFunction } from 'vue-i18n-routing';

const localePath = useNuxtApp().$localePath as LocalePathFunction;

[kazupon]

useLocalePath is auto-imported in @nuxtjs/i18n v8. And, $localePath is exported from nuxtApp (prefiexd with $ other APIs too) https://v8.i18n.nuxtjs.org/api/nuxt#localepath

I believe this issue has been resolved in previous releases. I will close this issue, but if the issue still occures, please open a new issue with a reproduced repo.

Thanks!

[szulcus]

@kazupon The problem still persists: #1605

[dargmuesli]

While I face the same issue as you @szulcus, I think it does not add much value or positive energy to write "so badly needed". There can always be misunderstandings in why an issue was closed and @kazupon is doing work voluntarily. Let's say thanks to @kazupon for the whole migration to v8! :rocket:

[szulcus]

@dargmuesli you're right. I got upset with my project and got a little carried away. Such unkind words serve no purpose. I corrected my quote, but if you've already seen it on @kazupon, sorry. Your job is amazing, I didn't mean to offend you.

[dargmuesli]

Big thumbs up to you as well, @szulcus, for the reflected response! :+1: :heart: :hugs: