Nuxt I18n use localePath('/') in script setup

Question

Im looking for a way to use the localePath() function in the script setup function.

useLocalePath() // doesnt work
useI18n() // doesnt have localePath 

and the documentation I found was not really good ... There was nothing documentated about useI18n ...

What I want to do with it:

const navigation = [
{ name: 'Home', href: localePath('/'), routename: ['index'] },
{ name: 'Blog', href: localePath('/blog'), routename: ['blog', 'blog-slug'] },
{ name: 'Projects', href: localePath('/projects'), routename: ['projects'] },
{ name: 'Tools', href: localePath('/tools'), routename: ['tools'] },
]

if i use localePath('/') in the script setup function like described above it results in an localePath is not defined

minimized with something like

const test = localePath('/')

results in the same error

My Nuxt Config

export default defineNuxtConfig({
  devtools: { enabled: false },
  modules: [
    '@nuxtjs/tailwindcss',
    '@nuxtjs/i18n'
  ],
  i18n: {
    defaultLocale: 'en',
    locales: [
      {
        code: 'en',
        file: 'en-US.js'
      },
      {
        code: 'de',
        file: 'de-DE.js'
      }
    ],
    lazy: true,
    langDir: 'lang/',
    vueI18n: "i18n.config.ts",
  }
})

and my i18n config

export default defineI18nConfig(() => ({
    fallbackLocale: 'en',
}))

My Dependencies

    "@nuxt/devtools": "latest",
    "@nuxt/types": "^2.17.1",
    "@nuxtjs/i18n": "^8.0.0-beta",
    "@nuxtjs/tailwindcss": "^6.8",
    "@types/node": "^18",
    "nuxt": "^3.6.3",
    "sass": "^1.63.6",
    "sass-loader": "^13.3.2"

Answer 1

Try to use the useLocalePath composable from 'vue-i18n-routing' like :

import { useLocalePath } from 'vue-i18n-routing' //in my case it's auto-imported

const  localePath  = useLocalePath()

console.log('Default path', localePath('blog'))
console.log('Deutch path', localePath('blog','de'))