Comments (6)
<NuxtLink :to="`${localePath('products')}/${item.global_name}`" v-for="item of products"> ....
for a URL like https://mywebshop.com/en/products/macbook-pro-14
and a Nuxt folder structure like
![image](https://private-user-images.githubusercontent.com/8490779/346223243-e1010230-637f-4f1c-8d1e-70f61f5f825d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM0MDc0MzYsIm5iZiI6MTcyMzQwNzEzNiwicGF0aCI6Ii84NDkwNzc5LzM0NjIyMzI0My1lMTAxMDIzMC02MzdmLTRmMWMtOGQxZS03MGY2MWY1ZjgyNWQucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgxMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MTFUMjAxMjE2WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MTU1ZjY0MzkzMTlkYmVkODVmNTQ2ZjlhNjA5M2IwY2IzODIxNmI5ZjhjNThlYjc0NmMxZjAyNTM5NWRhNTUyOCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.1QfHJeb-K8xgBcIaJx5AwD_6QHv1hiewZz_aU0SNdq8)
i18n config in nuxt.config.ts like
i18n: {
locales: [
{
code: 'de',
iso: 'de-DE',
name: 'Deutsch',
},
{ code: 'en', iso: 'en-GB', name: 'English' },
],
strategy: 'prefix',
defaultLocale: 'de',
customRoutes: 'config',
rootRedirect: 'de',
pages: {
index: { de: '/', en: '/' },
'products/index': { de: '/produkte', en: '/products' },
'products/[id]': { de: '/produkte/[id]', en: '/products/[id]' },
},
detectBrowserLanguage: {
useCookie: true,
cookieKey: 'i18n_redirected',
redirectOn: 'root',
fallbackLocale: 'de',
},
},
from i18n.
We should document this better, my recommendation would be to use an object with the route name localePath({ name: 'route-name', params: { id: 123 } })
(this should work with all configurations).
I think passing paths works with certain configurations but as you have noticed it won't when using 'prefix'
strategy (this is technically difficult while supporting localized paths and disabled localized paths). I'm sure we'll have that working at some point but for now we should document the most reliable method 😄
from i18n.
I always try to avoid using route names because they are hard to find and sometimes I just cant find the right one at all
from i18n.
I agree they're a bit hidden, I used to check devtools often to make sure I had the correct route name. But currently it's the most reliable way to retrieve routes regardless of i18n configuration, as the route name remains (essentially) the same across languages while the route path does not due to localization, prefix strategy, parameters and encoding.
You can also set a custom route name using definePageMeta({ name: 'my-route' })
if you prefer, this should work as long as Nuxt's experimental.scanPageMeta
is enabled.
from i18n.
I use custom route paths per language, e.g. /products
becomes /produkte
in German. Now I want to link to /products/123
and the dev tools show me as the name products-id___de
but that cant be right?
This is why I tried to avoid path names, but in this case I have to use them. How can I use them with custom route paths? E.g. I have the following file structure:
/products/index.vue
/products/[id].vue
Which I map to:
/products
/products/123
/produkte
/produkte/123
from i18n.
I think I got it:
localePath({ name: 'products-id', params: { id: props.id } })
from i18n.
Related Issues (20)
- Any ways to specify server-side-only translations that are not included in the frontend bundle? HOT 1
- Allow loading of translations from packages HOT 3
- Roadmap for v9 HOT 5
- FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory HOT 1
- Don't load default locale when differentDomain is true
- Cannot read properties of undefined (reading 'messages') HOT 4
- Not able to add i18n config in nuxt.config.ts HOT 2
- Fallback locale not working with mixed code (language & language+region)
- nuxt generate won't generate index.html with prefix strategy HOT 1
- Undesired Route Path Casing Override
- Support for `defineRouteRules` HOT 1
- fix: `node_modules` paths in runtime configuration payload HOT 1
- switchLocalePath returns an empty string when used in middleware HOT 2
- Change BaseURL when using different domains HOT 2
- Custom Route Paths in nuxt.config dont work together with compiler macro defineI18nRoute HOT 3
- Redirect fails with 404 error for non-index pages if SSR is turned off HOT 1
- `detectBrowserLanguage` + Caching
- Access to i18n config in nitro context
- Issue with Default and Current Locale Data Being Fetched Simultaneously in nuxt-i18n
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from i18n.