Nuxt - Dynamically manage routes while utilizing server-side rendering functionality

Hello! I have a question for you: I have:

  • a Nuxt app set up with target: 'server' in the nuxt.config.js
  • an API that provides me with a template associated with a given path (for example, /person/maxime will return template: PersonsSingle)
  • a vue component that manages this page (_pages/person.vue)

How can I handle this dynamically at runtime? I think it may involve using middlewares, but I'm not sure which one or what the best approach is. Any advice?

PS: I've implemented this system because having two URLs with similar structure (e.g., /person/maxime and /person/sam) could result in entirely different templates. Unfortunately, I have to work with this setup :/

javascriptvue.jsnuxt.js

Answer №1

This is my approach to solving the problem.

async fetchData({ $axios }) {
  const response = await $axios.$get('...')

  const type = response.templateType

  return {
    type
  }
}

<template>
  <div>
    <page-1 v-if="type === 'foo'" />

    <page-2 v-else />
  </div>
</template>

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

Issue with Promise.all not waiting for Promise to resolve

After making a request to the server, I receive the data as a promise, which contains the correct information. However, for some reason, the program fails to execute properly. Prior to uploading it on Zeit, this program was functioning correctly. Fetch R ...

javascriptreactjspromisefrontendes6-promise

Adjusting image width using jQuery

I have been experimenting with creating a Webgl hover effect for an image. The effect works well, but now I am trying to specify a width for the image within jQuery. new hoverEffect({ parent: document.querySelector('.ticket'), intensity1: 0. ...

javascriptjqueryhtmlcss

What is the best way to resize an element such as an image?

When an image is resized using a percentage, it preserves its aspect ratio properly. I am looking for a way to replicate this behavior with a div. My current challenge involves precisely positioning an element relative to an image. The image fills 100% of ...

javascriptjqueryhtmlcsssass

The appearance of responsive CSS is altered when deployed compared to when it is viewed on the

I'm a beginner in web development and facing an issue with my mobile CSS. The strange thing is that when I view it on localhost, everything looks great, but once deployed (tried both Heroku and GitHub), it appears distorted. Even when I make extreme c ...

javascripthtmlcssgithubfrontend

What could be the reason for Jest flagging CSS as untested instead of identifying untested functions?

While working on my vue3 project and writing tests with jest, I have encountered an issue where jest is incorrectly marking the CSS within several single file components as untested, even though it doesn't need to be tested. Moreover, its assessment ...

javascriptvue.jsunit-testingjestjsvue-jest

What is the best method for sending a PHP variable to an AJAX request?

I am working with three files - my main PHP file, functions.php, and my JS file. My challenge is to pass a PHP variable to JavaScript. Below is a snippet from my MAIN PHP FILE: function ccss_show_tag_recipes() { //PHP code here } Next, here's t ...

javascriptphpjqueryajaxwordpress

Angular2's change detection mechanism does not behave as anticipated after receiving a message from a Worker

Within my angular2 application, I encountered a rather intriguing scenario which I will simplify here. This is AppComponnet export class AppComponent { tabs: any = []; viewModes = [ { label: "List View"}, { label: "Tree View" }, ...

javascriptangularangular2-changedetection

leaflet.js - Place a marker when clicked and update its position while dragging

Currently working on a small project that requires the ability to place a marker on an image-map powered by leaflet.js, and update its position if it's dragged. I was using the code below for this functionality but keep getting an error 'marker n ...

javascriptjquerymapsmarkerleaflet

Struggling to retrieve the Object from a JSON file located at a specific URL

Apologies if this comes across as naive, but my venture into javascript and json is just starting. I'm eager to access the JSON object from the twitter API after executing var myjson; $.getJSON('url of the Object', function(data) { ...

javascriptjsonobjecturlgetjson

Angular updates location, but browser redirects to incorrect page

I want my application to redirect non-logged in users to a login page. Following advice from a popular source, the app listens for routeChangeStart events like this: $rootScope.$on("$routeChangeStart", function(event, next, current) { if ($rootScope.c ...

javascriptangularjs

Error occurred due to a reference to a function being called before it was

Occasionally, I encounter a "Reference Error" (approximately once in every 200 attempts) with the code snippet below. var securityPrototype = { init: function(){ /* ... */ }, encryptionKey: function x() { var i = x.identifier; ...

node.jsgoogle-chromejavascriptjavascript-objects

"Converting domain names with punycode and utilizing Firebase for a

My current project involves updating a Firebase app with NextJS, and I've encountered an issue that needs to be resolved. Upon running the command: % npm run build I received the following message: (node:3719) [DEP0040] DeprecationWarning: The `pun ...

javascriptnext.jsnext.js13punycode

Properly update Vue component props

I'm currently developing a straightforward component that focuses on displaying an element from an array, but I'm encountering some challenges due to Vue's principles. As you may be aware, when a mutation occurs on a prop, Vue reacts strong ...

vue.jscomponentsmutationvue-props

Is there a way to easily open the RSS link XML Element in a separate browser tab or window?

I have been exploring RSS and creating titles with links. However, when clicking on the link it opens in the same window. I would like it to open in a new window instead. Can someone please advise me on how to achieve this? <a href="http://www.google ...

phpjavascriptxml

how to change class on vue function result

I need a way to display the content stored in requestData as li elements. Each list item should have an onclick function that, when clicked (selected), adds a specific value from a reference to an array. If clicked again (unselected), it should remove the ...

javascripthtmlvue.jsvue-component

Having trouble with Angular JS's ngRoute feature not functioning properly

I've been struggling with my ngRoute implementation. I seem to be unable to load the 'ngRoute' module for some reason. Whenever I run this code, I just end up with a blank page. Below is my app.js file: var app = angular.module('tutor ...

javascripthtmlangularjs

Set onfocus for DOM elements dynamically

I have a question regarding assigning onfocus or similar functions to DOM elements during runtime. Here is the scenario: <input type="text" id="box" onfocus="inputFocused()"/> Now, in a runtime assignment case: <input type="text" id="box"/> ...

javascriptjquerydomruntimeonfocus

Exposing a Hidden Division with a Link via jQuery

I currently have a jQuery Panel set up to open when clicking a button. Now, I am looking to add a second link at the bottom of the page that will also open the same panel. Can anyone provide guidance on how to accomplish this? You can view my JSFiddle a ...

javascriptjquery

Obtain the current name of the Material UI breakpoint

Looking for a MUI function called MaterialUIGiveMeCurrentBreakPointName that can help me execute an action in a component like so: const currentBreakPointName = MaterialUIGiveMeCurrentBreakPointName() if(currentBreakPointName === 'myCustomBreakPointN ...

javascriptreactjsmaterial-uifrontend

What techniques can I use to adjust the size of an image through zooming in and out?

In my custom gallery component, the crucial code section looks like this: <Gallery> <Header> <img src={galleryIcon} alt='Galley icon' /> <h1>My Gallery</h1> </Header> ...

javascriptcssreactjstypescript