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

difficulty encountered when passing session variable on PHP pages

In my project, I have two important PHP pages: quizaction.php and result.php. The functionality involves passing variables from quizaction.php to result.php. Below is an overview of my code: <?php include 'db.php'; session_start( ...

javascriptphpformsvariablespost

My website using Dynamic Ajax technology is currently experiencing heavy traffic due to the number of getScript

I am facing an issue with my dynamic website where all links fetch new sections via ajax requests from other pages and replace the current section. The problem I encounter has two main aspects. When loading a new div from an Ajax get request, some sections ...

javascriptjqueryajaxgetscript

Is it possible to use the .focus() event on an entire form in JQuery? If so, how

Take a look at this HTML snippet: <form ....> <textarea>....</textarea <input .... /> </form> I'm trying to set up a help section that appears when the user focuses on any form element, and disappears when they lose ...

javascriptjqueryhtmlformsfocus

Tips for dynamically loading a different component based on route parameters with the VueJS Router

I'm searching for the best way to dynamically load a different VueJS component based on the presence of props in a route. For instance, navigating to /users would display the users list page, while going to /users/1 will take you to the user ...

vue.jsvuejs2vue-componentvue-router

Customizing Material UI Components: Implementing the onChange Method

I've been working with the materia kit react template from creative-tim: However, I noticed that the customerInput component in this template lacks an onChange method. Does anyone have a solution for handling user inputs using this specific template? ...

javascriptreactjsmaterial-ui

The click event fails to trigger on dynamically loaded Ajax content

I've encountered an issue while loading content using ajax from external HTML Files. After the content is loaded, the click event doesn't seem to be working in Safari (including mobile safari) for any of the newly loaded elements such as ul, li, ...

javascriptjqueryajaxsafarimobile-safari

React navigator appears stuck and unable to navigate between screens

I encounter an issue where my app closes when I press the switch screen button, but there is no error output displayed. I have checked for any version discrepancies and found no problem. The function I implemented for the button is functioning as expected ...

javascriptandroidreactjsreact-native

Using Angular2 to assign the response from an http.get request to a class object

I am a beginner in Angular and I have a JSON file that holds the configuration URL for my application. Path: app/config/development.json { "apiUrl": "http://staging.domain.com:9000/", "debugging": true } Below is the content of my config.service.t ...

javascriptangulartypescript

Trying to use v-on:click with vue bootstrapTable is not working as expected

After mounting .bootstrapTable(), I am unable to click on v-on:click. However, if I do not use .bootstrapTable(), the click works as expected. Do I need to listen for additional functions? What kind of code should I add? file.vue <template> <d ...

vue.jsvue-component

The webkitTransitionEnd event fires prior to a repaint or reflow occurring

My goal is to create a progressBar that changes its width when an ajax request is made. I want the ajax callback to only execute after the animation of the progressBar is complete. Here is the code I am using: CSS: #progressBar{ position: fixed; ...

javascriptcsscallbacktransitionrepaint

Changing the color of an input field in Vue when the delete button is clicked

I have recently started working with Vue.js and I am attempting to change the color of an input field when the user clicks on the trash-fill button. Currently, when I enter a character in the input field, it changes the color to green. Is there a way to c ...

javascriptvue.jsbootstrap-vue

The polygon array feature is not functioning as expected in the Google Maps API

I'm currently facing an issue with a code that is supposed to draw polygons from an array in the Google Maps API, but unfortunately, it doesn't seem to be working as expected. <!DOCTYPE html> <html> <head> <script src ...

javascriptgoogle-maps-api-3

Error: The term "require" is not recognized in the context of the React

After creating my own React component as an NPM package and publishing it on NPM, I encountered an error when trying to import and use it in other Create React App (CRA) projects. The error occurs when running npm start in the command line. See the screens ...

javascriptnode.jsreactjsnpmwebpack

I am currently developing a program that is displaying a blank page despite my efforts to write

I've been trying to write the code below but it only shows a blank page. var greeting = React.createClass({ render: function() { return ( <div> <h1>Hello</h1> </div> ...

javascriptreactjs

"Utilizing an if-else statement within a forEach loop

I have an array of ages and I want to determine the age range for each age along with the count, then push it into my object. The issue I am facing is that if there are multiple ages in the same range, it gets pushed twice. I only want to push it once and ...

javascripttypescript

When using @click as a link, it results in an

I'm attempting to create a clickable row in a datatable that functions as a link. Placing a standard <nuxt-link> within a <td> works fine, but wrapping the entire <tr> disrupts the table layout. Next, I tried using @click with a met ...

javascriptvue.jsvuejs2vue-componentnuxt.js

Activate the drop-down division when the search box is in focus with xoxco technology

Currently, I am incorporating Xoxco's tag input plugin which can be found at the following link: In my customization, I have implemented JQuery's focus() function <input id="tags_1" class="tag-holder" type="text" class="tags" /></p> ...

javascriptjqueryhtmlcss

Obtain the dynamic identifier of an element within every block using jQuery in a rails application

Let me illustrate my issue with a simple example. I am currently developing a recipe application. Within the show partial that loads via AJAX, I have the following setup: _show.html.erb <% @recipe.ingredients.each do |ingredient| %> <div class ...

javascriptjqueryruby-on-railsajax

Unfortunately, we encountered an AJAX error while trying to access data from the website datatables.net. You can find

I'm currently working on adding data to a datatables.net datatable using a JSON response, following the example provided here. To achieve this, I am making use of an AJAX call to fetch a JSON response from a database. After obtaining the data, I uti ...

javascriptjqueryjsonajaxdatatables

Navigating routes for a module sourced from NPM: Best practices

Looking for guidance on loading Angular routes from an NPM module? Take a look at this snippet from my app.module.ts file: import { HelloWorldModule } from 'hello-world-app-npm/hello-world-app.umd.js'; // Loading module from NPM const routes = ...

javascriptnode.jsangularangular2-routing