How can `localePath()` be utilized to create a dynamic route with Nuxt i18n?

I currently have this route set up in my i18n.config.js:

{
 pages: {
  'rental/_id': {
    nl: '/verhuur/:id',
    en: '/rental/:id',
    de: '/mietbestand/:id',
  },
 }
}

When attempting to link to this page in my Nuxt project using localePath(), like so:

<nuxt-link :to="localePath('rental/123')">
  {{ $t(item.title) }}
</nuxt-link>

I encounter the following warning: 

Route with name 'rental/123___nl' does not exist.

Is there a way for me to successfully link to the rental/_id page?

javascriptvue.jsnuxt.jsinternationalizationnuxt-i18n

Answer №1

Are you utilizing Nuxt3 for your project? I recommend starting by redefining your pages with the following structure:

  'rental/[id]': {
    nl: '/verhuur/[id]',
    en: '/rental/[id]',
    de: '/mietbestand/[id]',
  },

Additionally, make sure to include this in your setup:

const localePath = useLocalePath()

If that doesn't solve the issue, consider using 

localePath({ name: 'rental-id', params: { id: '123' } })

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error detected in Vuetify project's tsconfig.json file - The configuration file does not contain any input entries

Having an issue with the tsconfig.json file in my Vuetify project. The first { is underlined in red and when hovered over, it displays the error message: No inputs were found in config file Sharing the content of the file below. tsconfig.json { // expe ...

typescriptvue.jsvuetify.js

Switch up the CSS variable within an embedded iframe

I'm in a predicament with a specific issue. I am currently utilizing Angular to incorporate an Iframe. Let's imagine the angular app as A and the Iframe as B. B is being loaded within A. Within B, I have utilized CSS variables to define colors. I ...

javascriptcssangularsass

Error encountered: "Jest error - TypeError: Unable to access property 'preventDefault' because it is undefined."

I encountered an issue while testing the function below, resulting in the error mentioned above. function toggleRecovery = e => { e.preventDefault() this.setState( { recovery: !this.state.recovery }, () => { ...

javascriptreactjsjestjs

Angular Circumstance

Can you help me out? I am trying to figure out how to create an IF...ELSE condition using AngularJS on my index.html file: <ons-list-item modifier="chevron" class="list-item-container" ng-repeat="item in categories track by $index"> <a href="#/pa ...

javascriptangularjs

The initial $http POST in Angular ends up hitting the error path within the .then function despite the successful execution of the

Something strange is happening to me. This peculiar behavior occurs only on the initial POST request. However, when I resubmit the form, the subsequent requests work perfectly fine. The first $http post call leads to the error function in .then, even thou ...

javascriptangularjsauthentication

What could be causing my Alert component to keep triggering repeatedly?

This is my custom React Native script. import React, { useState, useEffect } from 'react'; import { Alert, View, Image, StyleSheet, Animated, Easing, TouchableOpacity, Text, ScrollView, ImageBackground, Dimensions, TextInput } from 'react-na ...

javascriptreactjsnode.jsreact-nativeexpo

I am receiving the same URL for multiple files stored on Firebase Storage

After attempting to upload multiple files to Firebase Storage and retrieve the download URL for each one, I encountered an issue where all files were successfully uploaded but only the URL for the last file was retrieved. The following code snippet shows ...

javascriptreactjsfirebasefirebase-storage

The TypeScript rule in the project-specific .eslintrc.js file is not being applied as expected

Currently, I am following a tutorial on Ionic/Vue 3 which can be found here. However, when I try to serve the project, I encounter the following error: https://i.stack.imgur.com/k4juO.png It appears that my project-level .eslintrc.js file is not being ap ...

typescriptvue.jsionic-frameworkeslint

Eliminate any unnecessary zeros at the end of a number within AngularJS interpolation

Although there are solutions available for plain JavaScript code, unfortunately they are not applicable in this particular scenario. I have a table that needs to be populated with data. The current code snippet is as follows: <tr ng-repeat="rows in $ ...

javascripthtmlangularjs

Experiencing difficulties while utilizing the event bus for transmitting data?

Need help with sharing data between two components? Here's the code for the first component: <template> <div class="row"> <label id="chatRoom">{{chatRoom}} <input type="text" id="chatInput" v-model="chatRoomVal"></la ...

vue.jsvuejs2vue-component

Create a JavaScript function that replicates the behavior of submitting a form when logging

I successfully implemented a logout button that ends sessions established using express server ExpressOIDC/express-session. When the user clicks on the logout button, they are redirected to the logged out view. Here is the HTML for the logout button: &l ...

ajaxformsvue.jsopenid-connectexpress-session

Is it possible to achieve a fade effect in material-ui that truly hides the component instead of just disabling its visibility? If so, how can this be accomplished?

Currently, I am utilizing the component provided by material-ui, which can be found at material-ui. <Fade in={!randomizeFlag}> <Grid> <FormControlLabel control={<Switch onChange={this.handleStartValueFlag} & ...

javascriptreactjsmaterial-ui

JQuery may be successfully loaded, but it is not functioning as intended

Just started dabbling in JQuery (I'm a newbie) but I'm having trouble getting it to work! Initially, it worked a couple of times but then suddenly stopped working (pretty strange). I made some changes and now it doesn't work at all. JQuery a ...

javascriptjqueryhtmlcss

What is the process for obtaining a JSON result after completing an upload?

I recently started working with the razor view engine and I have encountered a situation where I need to upload an image using the Change event of an image browser. The jQuery function for this task is as follows: $("#billUpload").change(function (){ ...

javascriptjqueryjsonasp.net-mvcrazor

Is it normal for Tailwind animation to loop twice when transitioning between pages in Next.js?

I'm currently utilizing react-hot-toast for displaying alerts and animating them during page transitions. The animation involves a double fade-in effect when transitioning between pages. In my project, I've integrated tailwindcss-animate within ...

javascriptreactjsanimationnext.jstailwind-css

What could be causing my data to not appear in a new row?

Currently, I am facing an issue with how checked checkboxes are displayed. Is there a way to have each checkedbox appear on a new line instead of stacking beside each other in the same line? b-modal#modal-1.d-flex(title='Dodaj leki' hide-footer) ...

vue.jsvuejs2pug

Issue with Div element not appearing on Azure AD B2C page customization

Utilizing PopperJS, I attempted to incorporate a popover box that appears when the user focuses on the password field within an Azure AD B2C page customization. Despite noticing the presence of the box element, it fails to display as intended. Any assistan ...

javascripthtmlazure-ad-b2cbootstrap-5popper.js

Utilize the dimensions of one image to resize others using the JavaScript method .getBoundingClientRect

I am attempting to transfer the width and height measurements of the initial image to all subsequent images on the page. Currently, I have successfully applied the dimensions of the first image to the second one, but I am facing difficulties with the thir ...

javascripthtmlcssimage

Ajax: The requested resource does not have the 'Access-Control-Allow-Origin' header. As a result, access is not permitted from origin 'null'

I recently started learning about ajax and followed a tutorial. However, I encountered an error when trying to run an HTML file along with a linked JavaScript file. Since browsers cannot make requests to file://, I have set up an http-server on port 8080 ...

javascriptjqueryajaxhtml

No matter what I do, I can't seem to stop refreshing the page. I've attempted to prevent default, stop propagation, and even tried using

Below is the code I have written for a login page: import { useState } from "react"; import IsEmail from "isemail"; import { useRouter } from "next/router"; import m from "../library/magic-client"; import { useEffect ...

javascriptreactjsnext.jstailwind-css