1

When I open dynamic page first time in Nuxtjs it works fine but when I reload this page manually all of css and js files stop working and page breaks. When I open these styling and js files in browser from its page source, it shows " /* style not found */ " Can anyone guide me why its happening and what is its solution. My app's mode in universal.

This is my nuxt.config.js file ... these files in script tag are located in static/assets folder:

enter image description here

This is my issue:

enter image description here

This is happening because path for pages/project/id page is one directory up for static folder files but direct path for pages/ViewProject file .... I just don't know how I can make path same for all nested as well as direct pages. Can anyone guide me about this ?

kissu
  • 40,416
  • 14
  • 65
  • 133
Faiza Zahoor
  • 39
  • 5
  • Can you show us some code and also the `nuxt.config.js` file please. – kissu Jun 27 '21 at 13:01
  • script: [ { src: `assets/plugins/custom/datatables/datatables.bundle.js`, body: true }] – Faiza Zahoor Jun 27 '21 at 15:07
  • Above is the script that is available in pages/viewProject page but not available in pages/project/viewProject. Its path issue that changes but I don't know how I can set this path that it don't change for nested pages. @kissu – Faiza Zahoor Jun 27 '21 at 15:08
  • Hm, this is not really helping me and is not representative of your bug. – kissu Jun 27 '21 at 16:15
  • What happens if you start all of your plugins paths with something like `'@/assets/js/...'`? `@` is basically saying "the root of my project", hence linking it in an _absolute_ way (from the root) rather than a _relative_ one (from your current component). – kissu Jun 28 '21 at 13:55
  • If all of those files are 3rd party scripts, you can maybe use my answer here (check `EDIT2`): https://stackoverflow.com/a/67535277/8816585 Btw, I'm not sure `script` exists by itself. – kissu Jun 28 '21 at 14:20
  • I checked all of these solutions but didn't help :( .. anyways I added solution which worked for me. Hope it help others as well. – Faiza Zahoor Jun 28 '21 at 14:45

1 Answers1

0

After spending a lot of time searching on internet for solutions, finally I figured one solution. Posting it here so it may help anyone and saves anyone's time. So to make nuxt to not modify script paths by adding prefixes I included script src in head object of nuxt.config.js this way :

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

This way now either from nested pages or direct pages under directory pages directory, script are loaded correctly.

Faiza Zahoor
  • 39
  • 5