Leveraging the power of dual layouts in Nuxt 3

I've encountered an issue with my /profile page setup. It utilizes a profile layout for common elements like the sidebar, but I also have a sub-page at /profile/favorite. My goal is to incorporate both the default layout (with a header and footer) and the profile layout (containing the sidebar and other shared parts) on both /profile and /profile/favorite.

The problem arises when assigning the /profile page to use the profile layout - the default layout components (header and footer) disappear, causing disruptions in transitions.

My question is:

How can I have the /profile and /profile/favorite pages share the same sidebar while preserving the default layout (header and footer) without duplicating code? Are there alternative solutions that could address this issue effectively?

Any advice or solution would be greatly appreciated.

Answer №1

To resolve this issue, I implemented nested routes in my project structure. Within the pages directory, I created a file named profile.vue which contained shared components and a placeholder for dynamic content using <NuxtPage/>. Additionally, I created a subdirectory called profile where I placed an index.vue and a favorite.vue with specific page content. This approach enables compatibility with both the default layout and a custom profile layout (housing shared components from the parent component within pages rather than layouts). In essence, we are utilizing the profile as a page while treating it like a layout, substituting the traditional <slot> mechanism with a <NuxtPage/>. Hopefully, these insights prove beneficial to others facing similar challenges.

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

A Three.JS Environment with a THREE.JSONLoader for mapping

Hello, I am looking to load an environment map from a jpg file ( env.jpg ) onto an object that has been loaded using THREE.JSONLoader(). Unfortunately, I was unable to export this map using Maya, so it needs to be added in this way. Can anyone help me with ...

Tips for utilizing React-router alongside {this.props.children}

I am a beginner in the world of react and I'm facing an issue while trying to utilize props on my test page. When I implement {this.props.children}, all the content gets replaced instead of being displayed at the specified children declaration. How c ...

You can utilize the mongooseModel.find() method on a schema that contains a Schema.Types.Mixed attribute

Having difficulty using the postModel.find() query in a schema defined as Schema.Types.Mixed. Here is an example of my schema: const PostSchema = new mongoose.Schema({ //..... address: { type: String, required: true, }, postDetails: { ...

Tips for creating auto-folding code in react-ace editor

Hi everyone, I have come across this JSON data that needs to be displayed in the react-ace editor with folded fields. Can anyone guide me on how to achieve this programmatically? This is what my JSON data looks like currently: https://i.sstatic.net/zhfvl ...

What is the best way to transmit a modified variable from a client to a server using the fetch API?

I'm facing a challenge in sending a modified variable from the client to the server and utilizing it in main.ejs. Here's my current code: <script> document.getElementById("char2btn").addEventListener("click", change) fun ...

String constant without an ending

My Description has a single quote character('). How can I make sure it doesn't break the code? <a href='javascript:select("<%= pageBean.replace(list.getColumn(0), "'", "'") %>", "<%= pageBean.replace(list.getColumn(1), ...

Ways to eliminate line breaks in a specific script

I am brand new to using phonegap and I need some help figuring things out. Here is the script source: <script src="http://www.transfermate.com/en/exchange_rates_api.asp"></script> I am attempting to remove the s in the div 'currency_c ...

Troubleshooting AWS S3 SDK upload error when sending data from Next.js API endpoint hosted on Vercel - ERR_HTTP_HEADERS_SENT

I'm currently working on uploading a file from my Next.js API endpoint running on Vercel using the @aws-sdk/client-s3 package. Here's a snippet of my code: import { PutObjectCommand, S3Client } from "@aws-sdk/client-s3"; import type { N ...

Trouble arises when using jQuery to retrieve the precise current time

I'm currently developing a system to track employee attendance. One issue I am facing is with the time format. When the current time is, for example, 12:03 or 11:06, the code I have only displays 12:3 and 11:6 without the leading zero. I can't s ...

Does Protractor have a logging feature that will integrate log invocations into the control-flow?

Can Protractor log functions be used to add log invocations to the control-flow? Is there a feature that allows me to access and utilize the control-flow directly? It seems like console.log logs outside of the control-flow, which may not always be ideal. ...

Send the style description to the child component

Is there a way to define a style in a parent component and then pass it to a child component? <style> .teststyle { background-color: red; width: 100px; } </style> I initially thought that if I did not use scoped, the .teststyle ...

Encountering difficulty linking MongoDB with Node.js

I recently delved into the world of MongoDB and I am currently attempting to locally host my Node.js application using MongoDB Server 6.0 (without relying on Mongoose or Atlas). After copying the async JavaScript code from the MongoDB documentation, I ens ...

I need help determining the starting date and ending date of the week based on a given date

I am looking to determine the starting date (Monday) and ending date of a specified date using Javascript. For instance, if my date is 2015-11-20, then the starting date would be 2015-11-16 and the ending date would be 2015-11-21. ...

Ensure the active button is set within a bootstrap modal upon opening

I have a specific goal in mind: Upon page load, I want the focus to be automatically set on the first element of the form. When the form button is clicked, I need a modal to appear for confirmation, with the focus directed towards the "Proceed" button wi ...

Sort the array based on the order specified in the model and numerically arrange the elements

I need to organize the list based on the order specified in the model's selection. Specifically, items with "VHS_" should be listed first in numerical order. Following that, LEE_, JE_, and CHS_ should be organized underneath in their own numerical ord ...

Spin the sphere texture in Three.js

Currently, I am working on rendering a sphere through three.js. While applying a texture to the sphere works well, I am having some difficulties rotating the texture to align it with marker positions. The issue arises when trying to place markers over Kag ...

Ensure that the sidebar automatically scrolls to the bottom once the main content has reached the bottom

I am facing an issue with a sticky sidebar that has a fixed height of calc(100vh-90px) and the main content. The sidebar contains dynamic content, which may exceed its defined height, resulting in a scrollbar. On the other hand, the main content is lengthy ...

Guide on retrieving data from local storage and exhibiting it in an input box that is disabled using AngularJS

I have securely stored my API key in local storage. Now I need to retrieve and display that key in an input field on a different HTML page. The input field should be pre-filled with the key from local storage and disabled so it cannot be edited. Below ...

The functionality of Change Detection is inconsistent when data is being received from the Electron Container IPC Channel

I have a program that is waiting for incoming information from an IPC Renderer Channel. Here is how I have it set up: container sending data to Angular app (mainWindow): mainWindow.loadURL('http://www.myangularapp.com') //location of the angul ...

Issue with fetching API data and sending it to the Node server

My node backend is all set up and running smoothly for GET requests, but I'm facing an issue with POST requests as the data doesn't seem to be getting sent to the backend. Here's the code snippet: fetch("http://localhost:3000/", ...