Creating a personalized router with Nuxt

Question

Creating a personalized router with Nuxt

Currently, I am working on setting up a custom route in Nuxt using the following nuxt.config.js:

router: {
    base: '/',
    router: {
      extendRoutes (routes, resolve) {
        routes.push({
          name: 'custom',
          path: 'here-i-am',
          component: resolve(__dirname, 'pages/Slug.vue')
        })
      }
    }
  },

However, when trying to access localhost:3000/here-i-am, it is displaying an error message: This page cannot be found. I have already created Slug.vue in the /pages directory.

Could there be something else missing? I even attempted to recompile but with no success.

javascript vue.js nuxt.js

Answer 1

Answer №1

Here are a couple of issues to address:

Ensure that the extendRoutes function is placed at the top level of the router property instead of being nested within another router property.

router: {
  extendRoutes() {...}
}

Remember to begin the path property with a leading slash for non-nested routes:

routes.push({
  path: '/here-i-am'
})

Answer 2

Here are a couple of issues to address:

Ensure that the extendRoutes function is placed at the top level of the router property instead of being nested within another router property.

router: {
  extendRoutes() {...}
}

Remember to begin the path property with a leading slash for non-nested routes:

routes.push({
  path: '/here-i-am'
})

Creating a personalized router with Nuxt

Answer №1

Similar questions

Adjusting the bottom property to a negative value in CSS will stretch the page downwards

Setting up a universal property for all components across an application

Mastering the art of utilizing $filter alongside select in angular.js

Encountered issues while trying to utilize wasm function within Vue framework

The development mode of NextJS is experiencing issues, however, the build and start commands are functioning normally

Node.Js made user authentication effortless

Using data from an API, I am implementing JavaScript validation for my dropdown select menu

What is causing the check box in the simple_form view to consistently return a value of 1 when checked or unchecked in rails 3.2?

When using angular-ui-select and having an empty <option>, it displays two blank fields

Step-by-step guide to creating a polyline on OpenStreetMap using JavaScript arrays

Creating a scheduled redirect button using JavaScript and another button to cancel it

AngularJS - Custom directive to extract a property value from an object

Guide to loading an image and incorporating it into a canvas using Gatsby's server-side rendering

Ways to verify the existence of a particular word within a nested array of objects

Guide to utilizing JSDoc within your local project

Using AngularJS to access JSON files through the $http service

How can we toggle a function to expand or collapse fields generated in an ngFor loop?

Using a JavaScript variable within an AngularJS scope

Retrieve the HTML code from a webpage on a different domain

Transmit information from a bean to JavaScript using JSON in JavaServer Faces