Exploring the different routing options for Nuxt.js: Dynamic versus Basic Routing

Can anyone suggest the best way to set up routing in Next.js for only Home, Gallery, and Contact us? Should I use dynamic routing or just keep it basic? Any ideas on how to path them? I'm still learning, so I would appreciate some guidance. I've looked at some articles online, but they mostly focus on home and about pages. Any recommendations for Nuxt.js or any related articles I can refer to?

Is it correct not to create Vue.use(router) in any component files within the webpack of Nuxt.js?

Would this routing setup be appropriate?

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'About',
      path: '/About',
      component: 'pages/about/index.vue'
    },
    {
      name: 'Contact-us',
      path: '/user/contact',
      component: 'pages/user/contact.vue'
    }
  ]
}

If there are any mistakes, please let me know so that I can correct them.

javascriptvue.jsroutesvuejs2nuxt.js

Answer №1

Welcome to this platform! To accomplish the example you provided, simply organize your files in the Pages Folder like this (assuming you are using the standard nuxt setup).

pages/
  index.vue
  about.vue
  user/
      contact.vue

If you have taken the time to research or gone through the documentation, you would already know how the Router in Nuxt operates. Here is a link to the well-written Docs again, make sure to read them thoroughly for best results. https://nuxtjs.org/guide/routing/

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

How can I display table rows along with their child table rows in Angular?

Is there a way to display API data in a table using Angular? The table should have collapsible rows with nested child rows. This is the JSON file structure: { "collapse1": [ { "name": "Soil", "budget": 12345, "child": [ { ...

javascripthtmlangulartypescript

Is there a way to open a particular Bootstrap tab within a modal using a URL?

I am seeking a way to automatically open a specific tab within a modal using its URL. To achieve this, I have included the following JavaScript code at the end of my website. By entering website.com/#modal-6 in the browser, it will open with modal-6 activa ...

javascripthtmltwitter-bootstrapbootstrap-5

Detach an item from its parent once it has been added to an array

Currently, I am facing an issue with a form on my blog. The blog is represented as an object that contains multiple content objects within it. I seem to be experiencing some confusion because the reactivity of the content I add to the Array persists with t ...

javascriptarraysvue.jsvuejs3

What is the best way to change the state of an Object?

I need to dynamically adjust the internalstatus based on the values of externalValues. If valueOne is true, then I want statusOne to be true. Similarly, if valueTwo is true, I want statusTwo to be true and statusOne to be false. const externalValues = { v ...

javascriptreactjs

Difficulty encountered while using React.js map function to access specific JSON data

I'm encountering an issue where I am unable to read data from a JSON file. After checking that the data is stored in the component state and logging it to the console once the component is mounted, I attempted to render the URL string from the JSON da ...

javascriptjsonajaxreactjsdictionary

How can I ensure my outcome is not in lowercase?

Is there a way to replace "man and wife" with their corresponding codes, e.g., husband = M and wife = F? I attempted using if and if-else but had to incorporate it within a div, which resulted in my output being lowercase. This is the code I have: <tem ...

vue.jsvuejs3

Using JavaScript to pre-select a radio button without any user interaction

Is there a way to programmatically set a radio button in a group without physically clicking on the button? I am attempting to open a jQuery page and depending on a stored value, the corresponding radio button should be selected. I have researched similar ...

javascriptjquery-mobile

Tips for navigating through a complex object returned from an API.integration**How to

Looking at this API response, I need to extract all the appId and userInfo values. How can I efficiently iterate through this response? { "status_code": "SUCCESS", "status": "SUCCESS", "message" ...

javascriptnode.jsjsonapijavascript-objects

Jasmine spies falsely report the calling of functions when they have not actually been called

Below is the code snippet I am currently working with: $scope.deleteJob = function(job) { SandboxService.deleteJob(job.id).then(res => { if (res.status == 200) { ngToast.success(); $scope.refreshApps(); } ...

javascriptangularjsjasminekarma-jasmine

Having trouble implementing types with typescript in Vue-toastification for vuejs 3

Having trouble incorporating vue-toast-notification into my vue 3 project. The issue seems to be with vue Augmenting Types. I've tried other solutions without success, encountering the following error: TS2339: Property '$toast' does not exis ...

typescriptvue.jsvuejs3

Leverage Pinia store in Vue helper functions

I have been working on my Vue.js application and I am looking to implement some helper functions that will utilize a Pinia store within the app. These functions need to be accessible by multiple components. Should I define these helper functions directly ...

javascriptvue.jsvuejs3pinia

Is there a way to verify if a given input is a URL in VueJS?

Trying to determine if a user-input text is a URL in VueJS. Need assistance on crafting the regex for this task. Here's my current code! function checkIfValidUrl(url) { let regEx = /^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#= ...

spring-bootvue.jsurlvue-componentweb-frontend

Having trouble getting Vue.js data to show up on the screen. I'm attempting to show a list of todos, but all that

I'm currently working on my App.vue file where I have set up the data for a todo list. However, despite creating an array of todos and attempting to display them, nothing is showing up on the screen. I'm at a standstill and could really use some ...

javascriptvue.js

Incorporating an external script within a Next.js application

I've been having trouble incorporating an external JavaScript source into my Next.js application and I keep encountering the following error: Failed to execute 'write' on 'Document': It isn't possible to write into a documen ...

javascripthtmlreactjsnext.js

How can we effectively combine vite and vue with Django without relying on Django Rest Framework?

I have a Django application and I am looking to incorporate Vue.js with Vite for the frontend, without relying on Django Rest Framework. Is there a solution to effectively integrate this technology stack? I experimented by installing Vite in a separate d ...

djangovue.jsdjango-rest-frameworkcdnvite

Customizing the input placeholder for password fields in IE8 using jQuery

Currently, I have opted to use jQuery instead of the HTML5 placeholder attribute <input type="text" name="email" value="Email" onfocus="if (this.value == 'Email') { this.value = ''; }" onblur="if (this.value == '') { this. ...

javascriptjquerycsshtml

Transferring information between a pair of PHP functions via AJAX communications

Currently, I am tackling the challenge of user verification on our website. The process involves prompting users to input their credentials, click on the "send confirmation" button, receiving a code through SMS or messenger, entering the code in a field, a ...

javascriptphpajaxwordpress

Utilizing a material-ui button within a React application as the trigger for a Popup using MuiThemeProvider

I want to trigger a Popup in React using a button with a custom theme: <PopUp modal trigger={ <MuiThemeProvider theme={buttonTheme}> <Button variant="contained" color="secondary">Excluir& ...

javascriptreactjsmaterial-ui

Creating a dynamic form field using JavaScript

I'm struggling with a JavaScript issue that requires some assistance. I have a form sending an exact number of inputs to be filled to a PHP file, and now I want to create a preview using jQuery or JavaScript. The challenge lies in dynamically capturin ...

javascriptphpjqueryhtml

Issue with Material-ui autocomplete not updating its displayed value according to the value prop

My task involved creating multiple rows, each containing a searchable Autocomplete dropdown populated through an API, along with other fields. Everything was functioning perfectly until I encountered an issue when deleting a row from the middle. After dele ...

javascriptreactjsdommaterial-uimaterial-design