Is it possible to change between universal and spa mode based on the query string?

Currently, I am working on a Nuxt.js application set to universal mode and deployed as a static website using nuxt generate. The app is pulling data from a GraphQL API linked to a CMS, and everything is functioning properly. Whenever content is updated in the CMS, a deployment script triggers nuxt generate, and the changes reflect on the website within seconds.

The issue I'm facing is related to the live preview feature of the CMS (Craft CMS) accessible during content editing. The preview window sends a token to the app, allowing it to adjust its query based on the token value. This functionality seems to work fine in spa mode but not in universal mode. In universal mode, the query has already been executed on the server during generation of static files.

I have attempted various approaches with a serverMiddleware inspired by the example provided here. I also forked the code sandbox and tried different logics inside the serverMiddleware function, but unfortunately, no results have been achieved so far.

javascriptvue.jsnuxt.js

Answer №1

Nuxt 2.13 introduces a new feature called preview mode that can be activated using a plugin: 

export default async function ({ query, activatePreview }) => {
  if (query.preview) {
    activatePreview()
  }
}

Enabling the activatePreview() function switches the page to fetch live data from the API instead of relying on pre-generated content.

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

Methods for dynamically populating dropdown lists with JavaScript and Bootstrap

I have collected all 387 regions for the current date and now I want to dynamically populate a bootstrap dropdown with these regions using JavaScript. Below is the basic HTML code for a bootstrap dropdown: <div class="dropdown"> <button class ...

javascripthtmlcsstwitter-bootstrap

Determining whether a string includes any elements from an array

Recently, I've embarked on a journey to learn javascript and ventured into developing a small chrome extension. This extension aims to scan item listings on a specific website for products that match keywords provided by users. I am seeking guidance o ...

javascriptarraysstring

Navigating Wordpress posts with a Month data format filter in Vue.js

Can anyone suggest the most effective method for filtering WordPress Posts by month using Vue.js? I am currently retrieving my data from WP_JSON posts, but I need a dropdown menu that allows users to select a specific month such as "September" so that onl ...

wordpressvue.jsfilteringposts

Is there a way to have the user input data into a Firebase database directly from a Vue.js component?

Any assistance for a beginner like me would be greatly appreciated. I am currently working with vuejs and firebase to write data into the database from a vue component. I have successfully implemented authentication and writing functionality, but now I wan ...

javascriptfirebasefirebase-realtime-databasevue.js

The layout option is not specified within the ejs-mate package

error boilerplate I am baffled as to why the layout is not being defined. I have installed ejs-mate and ejs, yet it still gives this error. <% layout('layouts/boilerplate') %> <h1>All campgrounds </h1> <div> <a ...

javascripthtmlnode.jsejs

interval-based animation

I'm trying to create a simple animation using setInterval in JavaScript. The goal is to make an image move from left to right. HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"& ...

javascript

Having trouble locating node_modules/nan on your system?

Trying to globally install this project is proving to be a challenge as I run the command npm i -g. Followed these steps: git clone https://github.com/superflycss/cli cd cli npm i npm i -g However, encountered this result: ole@mki:~/cli$ npm i -g npm W ...

javascriptnode.jsnpm

retrieving the outcome from a PHP script invoked through Ajax

Having trouble transferring the results of a PHP script to HTML input fields This is my PHP script: $stmt->execute(); if ($stmt->rowCount() > 0){ $row = $stmt->fetch(PDO::FETCH_ASSOC); echo 'Located: ' . $row[&ap ...

javascriptphpjqueryajax

Unpacking a props object results in an undefined value

I've been struggling to set up a data-grid in react because I'm facing issues with accessing the data from my props. Whenever I try to access or destructure the prop, it shows up as "undefined" in my console. This problem only arises when the p ...

javascriptreactjstypescriptreact-propsdestructuring

What is the method for indicating the data type in an XDR request?

Currently, I am successfully using XDR for cross domain resource sharing in IE. However, I am facing an issue with specifying the return dataType to receive JSON as responseText. Below is the snippet of my code: if (window.XDomainRequest && $.browser.m ...

javascriptajaxinternet-explorercross-domainxdr

Utilizing AJAX to define the attributes of an object

As a beginner in OOP, I am trying to create an object using an ajax request. My goal is to retrieve 'responseArray' in JSON format and then manipulate it. function address(adres) { this.address_string = adres; var self = this; $.ajax({ typ ...

javascriptajaxoopjquery

Check the validity of multiple selection groups using JavaScript

Here is the link to my JS Fiddle: http://jsfiddle.net/m4tyC/ I am working with multiple select tags and need to validate them upon submission. For example, at least one of size1, color1, or Qty1 must be selected in the first group. If one item is selected ...

javascriptjquery

Conceal the <p> element when the user interacts with the internal href

After creating this document using JQuery, whenever the user clicks on different internal links, a div with id = "change" is loaded which effectively "erases" the content. My challenge at the moment is that while images are successfully deleted, text rema ...

javascriptjqueryhtml

Restricting variable values in Node.js

As I work in an IDE, there is a feature that helps me with autocomplete when typing code. For example, if I type: x = 5 s = typeof(x) if (s === ) //Cursor selection after === (before i finished the statement) The IDE provides me with a list of possible ...

javascriptnode.jsvariables

Tips for designating all content within a <div> element to open in a blank target (target="_blank")

I am looking to open all content within a specific <div> in a new tab (target="_blank"). I am open to any solution, whether it involves JS, CSS, HTML, classes, IDs, etc. I experimented with using <base target="_blank">, but it affect ...

javascripthtmlcsstarget

Capture an entire webpage screenshot with Webdrivercss

When trying to capture a screenshot of an entire webpage, I encountered a challenge. The code I used below with Firefox successfully took a screenshot of the whole page, but it didn't work with Chrome. According to the API documentation, I should use ...

javascriptselenium-webdriverwebdriver

Need to style today's date and selected date differently using react datepicker

I am currently working with the React Datepicker and I am facing an issue where two different styles need to be applied for the current date and a selected date. Specifically, I have defined a style for the current date as well as a separate style for whe ...

javascriptcssreactjs

React array mapping issue does not produce any error message

I have exhaustively searched through every answer on Stack Overflow in hopes of finding a solution to my problem. However, I find myself at an impasse as there are no error messages appearing in the console. It seems that there is a hidden bug eluding my d ...

javascriptjqueryreactjsnext.jsecmascript-6

Attaching events to the window in Vue.js

Having recently started working with Vue.js, I have come across a problem related to attaching and detaching keyboard events to the window within one of my components. Below are the methods I am using: created() { this.initHotkeys(); }, beforeDestroy() ...

javascripteventsvue.jsbindaddeventlistener

Implementing File Retrieval in a Controller

I have a specific file where I declared the URL for my videouploadfolder, and now I need to reference that file in my JavaScript config.js. var filepath = { uploadVideoUrl : './public/videos' } In my Node.js script, I included it like th ...

javascripthtmlangularjsmean