When refreshing a page in Nuxtjs, the dynamic page fails to load its CSS and JS files

Question

When refreshing a page in Nuxtjs, the dynamic page fails to load its CSS and JS files

Every time I open a dynamic page in Nuxtjs for the first time, it works perfectly. However, if I reload the page manually, all of the css and js files stop working, causing the page to break. When I open these styling and js files in the browser from their page source, it shows " /* style not found */ ". Can someone provide guidance on why this is happening and what the solution might be? My app's mode is set to universal.

In my nuxt.config.js file, the script tag refers to files located in the static/assets folder:

https://i.sstatic.net/R06Ao.jpg

This image illustrates my issue:

https://i.sstatic.net/hECts.jpg

The problem arises because the path for the pages/project/id page is one directory up from the static folder files, while the direct path for pages/ViewProject file remains different. I am unsure how to make the paths consistent for both nested and direct pages. Could anyone offer assistance with this?

javascript css nuxt.js dynamic-routing

Answer 1

Answer №1

After tirelessly scouring the internet for answers, I have finally stumbled upon a solution. I am sharing it here in hopes that it will assist others and save them valuable time. To prevent Nuxt from altering script paths by adding prefixes, I added the script source to the head object in my nuxt.config.js like so:

import { join } from 'path'
export default {
  head: {
         script: [
          {
            src: join('/', `assets/plugins/global/plugins.bundle.js`),
            body: true
          }
    ]
}

Now, whether it be from nested pages or direct pages within the pages directory, scripts are loading correctly.

Answer 2

After tirelessly scouring the internet for answers, I have finally stumbled upon a solution. I am sharing it here in hopes that it will assist others and save them valuable time. To prevent Nuxt from altering script paths by adding prefixes, I added the script source to the head object in my nuxt.config.js like so:

import { join } from 'path'
export default {
  head: {
         script: [
          {
            src: join('/', `assets/plugins/global/plugins.bundle.js`),
            body: true
          }
    ]
}

Now, whether it be from nested pages or direct pages within the pages directory, scripts are loading correctly.

When refreshing a page in Nuxtjs, the dynamic page fails to load its CSS and JS files

Answer №1

Similar questions

Vue.js computed property experiencing a minor setback

Can a universal attach() handler be implemented for all viewmodels worldwide?

Executing a Function Prior to onClick Event of a Link Element in Next.js

Angular - a simple method to determine the number of non-empty inputs in a complex template-driven form

Is it possible to integrate the Firestore npm library into my Express application?

Error: html2canvas encountered an uncaught undefined promise

Spring load without CSS

What is preventing me from being able to manipulate the data retrieved from this ajax request?

The AJAX functionality does not seem to be activated when scrolling

What is the correct way to establish and terminate a MongoDB connection in a Node.js application?

Are there any web browsers that automatically switch to a non-SSL connection if an attempt to connect with SSL

Issues arise when attempting to run JQuery functions with the $ symbol in the head tag of HTML

Is your div not loading correctly due to JQuery or Javascript?

Can a FilePicker be Cleared Automatically through Code?

Troubles with showcasing icons on a website

Challenge encountered in posting a variable generated through ajax

Guidelines for utilizing React to select parameters in an Axios request

JavaScript Leaflet Map fails to load

After adding on, do you wish to eliminate?

The localhost successfully accessed req.session.userid, but unfortunately the virtual host cannot be reached at this time