Nuxt.js: Alert - 'Oops! You seem to have stumbled upon a lost page' (nuxt-i18n)

Within my Nuxt.js setup, I followed the installation steps for nuxt-i18n as outlined in the documented instructions:

{
  modules: [
    ['nuxt-i18n', {
      // Options
    }]
  ]
}

However, upon running npm run dev, I encountered the following error message:

 DONE  Compiled successfully in -4519ms                                12:53:52                                                                                         


 OPEN  http://localhost:3000                                                                                                                                            

  nuxt:render Rendering url / +0ms                                                                                                                                      
{ statusCode: 404,                                                                                                                                                      
  path: '/',                                                                                                                                                            
  message: 'This page could not be found' }

Any suggestions on how to resolve this issue?

javascriptvue.jsnuxt.jsnuxt-i18n

Answer №1

To build upon @Nicolas Pennec's insightful answer and prevent warning messages like this one: 

Locale ISO code is required to generate alternate link
, it is advisable to define the locales as outlined in the provided documentation:

// nuxt.config.js

['nuxt-i18n', {
  locales: [
    {
      code: 'en',
      iso: 'en-US'
    },
    {
      code: 'es',
      iso: 'es-ES'
    },
    {
      code: 'fr',
      iso: 'fr-FR'
    }
  ]
}]

Answer №2

Setting a default locale makes it work perfectly :)

  modules: [
    ['nuxt-i18n', {
      locales: ['en', 'fr', 'es'],
      defaultLocale: 'en',
      seo: false // This is a workaround to address the current issue with this module: https://github.com/nuxt-community/nuxt-i18n/issues/127
    }]
  ],

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

Is using setTimeout in a group of promises blocking in JavaScript?

Is it possible for multiple requests to be queued up and executed in sequence when calling the function func? The third promise within func includes a lengthy setTimeout that can run for as long as 3 days. Will additional calls to func trigger one after an ...

javascriptnode.jspromisesettimeout

What are the reasons behind lang sass not functioning within the style tag of a .vue file?

Even though I had previously installed sass-loader and node-sass in my project, I encountered an issue when attempting to use <style lang="sass"> in my vue file. The style did not compile as expected, however it worked perfectly without the lang="s ...

javascriptvue.js

Use asyncData to access vuex in data layer

When encountering the error "id is undefined", how can one access a Vuex property within the data object? asyncData({ store }) { let id = store.state.auth.id return { id } }, data: () => ({ items: [ { title: 'Profile&ap ...

vue.jsnuxt.js

Is there a way to figure out the number of days from the current date using jQuery UI datepicker?

Hello there, I'm currently facing an issue with calculating the number of days from the present to a chosen date after utilizing a jQuery datepicker. It seems that the date formatting is getting altered upon selection, causing discrepancies in the ca ...

javascriptjqueryjquery-uidatejquery-ui-datepicker

webpack-cli Configuration object is not valid

I have laravel 5.8 set up on my system and I am looking to integrate vue into it. I attempted to execute the following commands. I am using ubuntu, with node version 10.19. 1. npm install 2. npm run watch The first command executed successfully but displa ...

vue.jslaravel-5.8

React timer slide show malfunctioning

While I have some experience with React, I'm struggling with a seemingly simple problem that I just can't figure out. My goal is to cycle through an array of images and display the image at the current index. The console logs show the correct in ...

javascriptreactjsjsx

Attaching JSON data to AngularJS form fields

I have received some JSON data in this format: [{ "Id": 0, "Text": "Item 1", "Selected": 1 }, { "Id": 1, "Text": "Item 2", "Selected": 1 }] Additionally, there is an input element as follows: <input type="text" value="{{quest ...

javascriptjsonangularjs

Output data to file in a sequential order using JavaScript

I am struggling to comprehend this particular issue. In the context of executing the runOneCombination function across numerous files, my goal is to extract specific information, perform calculations, and then append the results to a file. However, the ch ...

javascriptnode.jsfilepromiseasync-await

Click on the link or tab to update the marker location on the Google Map

Can you click on Tab 2 to change the marker/location, and then go back to Tab 1 to switch it back to the original location? [Links to Fiddle] http://jsfiddle.net/ye3x8/ function initialize() { var styles = [{ stylers: [{ saturati ...

javascripthtmlgoogle-mapsjsfiddle

Having difficulty transforming the JSON data into the necessary format for Google Charts using JavaScript

The JSON data returned by the following controller is structured as shown below: [ {"classification":"CON","count":2}, {"classification":"PUB","count":1}, {"classification":"SENS","count":1} ] However, Google Charts requires the data to be in the followi ...

javascriptjsonasp.net-coregoogle-visualization

"Attempt to create angular fork results in an unsuccessful build

I have recently created a fork of angularJs and I am facing an issue when trying to build it. The build process fails when running grunt package npm -v --> 3.5.2 bower --version --> 1.7.2 I followed the steps provided in the official documentation ...

javascriptangularjsgruntjsnpm

Java Script Custom Print Preview: A unique way to showcase your content

Is there a way to create a custom print preview dialog similar to the browser's print preview using Java Script? I am working on a book reader application that requires customization of the print preview dialog for page counting, automatic pagination, ...

javascripthtml

Clicking on the edit button will open the form for editing the selected item

I am facing an issue with my HTML code. I have a list of data where each row has an edit button to update the specific record of that row. However, when I click on the edit button, I want only the form under that particular row to open for updating the rec ...

javascriptjqueryarraysangulartypescript

What is the best way to extract HTML using selenium.webdriver in Python?

Appreciate your attention, and please excuse any errors in my English. I am currently attempting to retrieve HTML from . The process involves entering some text into an input box and clicking a button, which triggers the following actions: Load the Yaho ...

javascriptpythonhtmlselenium

Rearrange elements in an array

Currently, I have an array of sphere meshes and I am looking for a way to position them in a level. The meshes are currently set in a specific position (in the shape of a skeleton), but I would like to move the entire array and place it in a different loca ...

javascriptthree.js

Tips on integrating Next/Previous functionality for a modal Ajax popup

I have been utilizing a bPopup jQuery plugin to display ajax HTML files in a modal popup on my website. However, I am interested in enhancing this functionality to allow users to seamlessly navigate to the next slide within the modal without having to exit ...

javascriptjqueryajaxmodal-dialogbpopup

When activating a bootstrap class button, I must ensure the reply-box remains hidden

let replyButton = document.getElementById('reply-button'); let cardBody = document.getElementById('card-body'); let responseBox = document.getElementById('reply-box'); let cancelButton = document.getElementById('btn btn-d ...

javascripthtmlcss

Tips for avoiding droppability on a specific node within an Antd tree

In my React application, I am utilizing Antd tree component with a drag and drop feature. Currently, I am facing an issue where I need to restrict users from dropping dragged nodes onto specific nodes. Is there a configuration option like droppable='f ...

javascriptreactjsantd

Passport - Pairing Plan "Error|The username provided for sign_request() is not recognized"

Currently experimenting with duo in node.js using passport to test its implementation in an application....Utilizing a passport-duo strategy and encountering issues when trying to apply the example provided in my own project. The GitHub repository for pass ...

javascriptnode.jsauthenticationpassport.js

AngularJS: Iterating through data and calling a callback function

When I attempt to fetch multiple JSON files in a loop, I encounter an issue where the callback function only retains the last key of the loop for each result. Here is how it is called: deckbuilderApp.factory('DeckFactory', ['$http', & ...

javascriptangularjs