A stationary webpage nested within a lively pathway on NuxtJS

I have a Nuxt app with a list of cars available at: /cars. You can select a specific car at /cars/:id. I would like to have a toolbar that routes to different views such as: /cars/:id/routes, /cars/:id/drivers, etc.

Within the /cars/:id page, I have created a toolbar and a div using <NuxtChild />

<template>
  <v-container>
    <v-toolbar flat class="rounded-pill " height="50">
      <v-tabs centered slider-color="#356FA4" color="#55BAB4" icons-and-text>
        <v-tab>Overview<v-icon>fa-eye</v-icon></v-tab>
        <v-tab :to="`${$route.params.id}/gauges`"
          >Gauges <v-icon>mdi-gauge</v-icon></v-tab
        >
        <v-tab>Routes <v-icon>mdi-map-marker</v-icon></v-tab>
        <v-tab>Drivers <v-icon>fa-users</v-icon></v-tab>
        <v-tab>Damages <v-icon>fa-car-crash</v-icon></v-tab>
        <v-tab>Documents <v-icon>mdi-file-document-outline</v-icon></v-tab>
        <v-tab>Reminders <v-icon>mdi-alarm</v-icon></v-tab>
      </v-tabs>
    </v-toolbar>
    <div>
      <NuxtChild />
    </div>
  </v-container>
</template>

When I click on "Gauges" the whole page changes, but I want to keep the toolbar in place. What am I missing?

Folder structure:

|   index.vue
|   login.vue
|   map.vue
|   organization.vue
|   register.vue
|
+---cars
|   |   index.vue
|   |
|   \---_id
|           gauges.vue
|           index.vue
|
\---users
    |   index.vue
    |
    \---_id
            index.vue

View desired outcome

Answer №1

After testing it out, I discovered that it works best to simply place the _id.vue file instead of _id/index.vue. Your folder structure should look something like this:

+---cars
|   |   index.vue
|   |   _id.vue (move your main code here)
|   \---_id
|           gauges.vue
|

For further guidance, refer to the example provided in the nuxt nested pages documentation:

pages/parent.vue includes the component. Content on this page will be visible on both the parent and child pages.

pages/parent/index.vue contains text that will be swapped out when child links are clicked.

pages/parent/child.vue and pages/parent/child2.vue will be displayed as parent/child and parent/child2.

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

Employing the join() method on an array that is nested within object entries retrieved from a vuex

I am struggling to format my vuex getter to return errors in a specific structure. Currently, my errors object looks like this: errors: { email: ['error message.'] email_confirm: ['error message.', 'another error message.&apo ...

What is the best way to display elements in a v-for loop with varying intervals?

Is there a way to use the v-for loop to display elements of an array at specific time intervals? For instance, could I show the first element after 100ms, the second after 200ms, and so on for subsequent elements? If so, what would be the solution to ach ...

How to dynamically delete React Router Link components after they have been clicked on?

When using React Router, how do I remove the div that contains a Link component or the Link component itself when it is clicked on and the routing is complete? For instance, consider an app structured in the following way: ==Header== ==Link1 Link2== Onc ...

Creating a layered effect by overlaying one image on top of another in an HTML5

Currently, I am facing an issue with drawing a level field inside my canvas. The images of the tank and enemies are being drawn underneath the field image, which is causing some problems as they should actually be moving above the field. Here is a link t ...

ajax - unable to fetch information from the same domain

UPDATE: The solution provided by Cavid Kərimov indeed works. By setting the form as shown below, it also resolves the issue. <form onsubmit="return false;"></form> I am attempting to fetch a simple text string from a PHP file using jQuery an ...

Having trouble retrieving JSON data from the open weather API

I'm working on a small website to display the weather of a specific city using an API. However, I am facing an issue where I can't seem to display the temperature from the response. Below are snippets of my JavaScript and HTML files: var ap ...

Tips for minimizing excessive repetition in your for loops

I'm currently working on developing a Chess game and I've encountered an issue with code redundancy within my Bishop class. My goal is to create a function that can determine all possible moves of a bishop on the board. In order to achieve this, ...

Timer Does Not Appear to be Counting Down

I recently added a countdown clock to my website, but I'm having an issue with it not updating in real-time unless the page is refreshed. I'm not very familiar with javascript, so I found some code online and made some modifications myself to sui ...

Updating the layout in Vue.js without the need for a full page refresh

My goal is to have the Dialog expand to fullscreen when the screen size is small. The current code I am using is as follows: <v-dialog max-width="600px" :fullscreen="screen_width < 450 ? true : false"> ... screen_width: screen.width U ...

Validating data with Joi can result in multiple error messages being displayed for a single field

I'm attempting to implement a validation flow using the joi package, which can be found at https://www.npmjs.com/package/joi. 1) First, I want to check if the field category exists. If it doesn't, I should display the error message category requ ...

Different file paths in the 'public' directory using VUE CLI

My current application architecture is structured as follows: Within the 'frontend' folder, I have my applications. The 'html' folder contains the single page application (spa) that was constructed. Inside the 'spa' directory, ...

Utilize PHP to import an HTML file with JavaScript code into MySQL database

I've been attempting to use JavaScript to retrieve my location, but I'm facing an issue where when I click submit, the data is not getting entered into the page action.php. geolocation.php <form action="action.php" method="post"> < ...

Choose the row based on the values in the columns

I am facing a situation where I have to choose a specific row in a datatable that displays rows in groups of 10, based on the value of its column. Previously, I successfully used the following code to select the first row. myGroupTable.row(':eq(0)&ap ...

Adjust the vertical size and smoothly lower a text input field

When a user clicks on a textarea, I want it to smoothly change height to 60px and slide down in one fluid animation. Check out the JSFiddle example here: http://jsfiddle.net/MgcDU/6399/ HTML: <div class="container"> <div class="well"> ...

Using jQuery to change date format from mm/dd/yy to yyyy-dd-mm

I need to transform a date in mm/dd/yy format from an ajax response into yyyy-mm-dd format using jquery. Is there a built-in function in jquery that can handle this conversion for me? ...

The use of props in mapState may result in unexpected behavior in Vue.js

When trying to pass a value from props and use it as the namespace in mapState, an error occurs: 'Error while initializing app TypeError: Cannot read property 'store' of undefined' Here is the code snippet: In the ParentComponent: < ...

Tips on sending data with a unique identifier to the backend through a route parameter

Can anyone help me figure out how to send a message to a specific backend route parameter while passing the current ID? I'm not sure how to inform the system about this ID. Here's the Vuex action: postMessage({commit}, payload, id) { axios.pos ...

Setting up a nodejs application on a web server

As a newcomer to NodeJS, I am currently learning how to create a sample app using this technology. I have successfully tested it on my localhost, but now I am facing issues when trying to host it on a public server. var http = require('http'); ...

The Composition API does not allow VueI18n to access or update the locale

I have integrated VueI18n into my Vue application, utilizing the Composition API. To ensure proper implementation, I am referencing the VueI18n Composition documentation. Initialization of I18n : import { createI18n } from "vue-i18n"; const i18 ...

Unleashing the Power of Vuejs: Setting Values for Select Options

I have a specific requirement in my Vue application where I need to extract values from an XLS file and assign them to options within a select dropdown. Here is what I currently have: <tr v-for="header in fileHeaders" :key="header"&g ...