Nuxt.js won't load my javascript files

I am working with an HTML template and I have successfully loaded my css inside my nuxt.config.ts but unfortunately, the js files of the libraries in the template do not load.

Here is my nuxt.config.ts

export default defineNuxtConfig({
    css: [
        '@/assets/vendor/aos/aos.css',
        '@/assets/vendor/bootstrap/css/bootstrap.min.css',
        '@/assets/vendor/bootstrap-icons/bootstrap-icons.css',
        '@/assets/css/style.css'    
    ],
     app: {
         head: {
             meta: [
            { charset: 'utf-8' },
            { 'http-equiv': 'pragma', content: 'no-cache' },
            { 'http-equiv': 'cache-control', content: 'no-cache' },
            { 'http-equiv': 'expires', content: '0' },
            { content: 'telephone=no', name: 'format-detection' }
            ],
            script: [
                { type:"text/javascript", body: true, src: '~/assets/vendor/purecounter/purecounter_vanilla.js' },
                { type:"text/javascript", body: true, src: '~/assets/js/main.js' },
            ]
        }
       }
  })

However "Hello world!" shows in my console.log

LaryAI

3 years ago

Level 58

It looks like the JavaScript files are not being loaded because they are not being properly referenced in the HTML template. Make sure that the paths to the JavaScript files are correct and that they are being referenced in the correct order.

Also, try removing the body: true property from the script tags in the head section of the nuxt.config.ts file. This property is used to indicate that the script should be loaded in the body of the HTML document, but it may be causing issues with the loading of the scripts.

Here is an updated version of the nuxt.config.ts file without the body: true property:

export default defineNuxtConfig({
  css: [
    '@/assets/vendor/aos/aos.css',
    '@/assets/vendor/bootstrap/css/bootstrap.min.css',
    '@/assets/vendor/bootstrap-icons/bootstrap-icons.css',
    '@/assets/vendor/boxicons/css/boxicons.min.css',
    '@/assets/vendor/glightbox/css/glightbox.min.css',
    '@/assets/vendor/swiper/swiper-bundle.min.css',
    '@/assets/css/style.css'    
  ],
  head: {
    meta: [
      { charset: 'utf-8' },
      { 'http-equiv': 'pragma', content: 'no-cache' },
      { 'http-equiv': 'cache-control', content: 'no-cache' },
      { 'http-equiv': 'expires', content: '0' },
      { content: 'telephone=no', name: 'format-detection' }
    ],
    script: [
      { type: 'text/javascript', src: '~/assets/vendor/purecounter/purecounter_vanilla.js' },
      { type: 'text/javascript', src: '~/assets/vendor/aos/aos.js' },
      { type: 'text/javascript', src: '~/assets/vendor/bootstrap/js/bootstrap.bundle.min.js' },
      { type: 'text/javascript', src: '~/assets/vendor/glightbox/js/glightbox.min.js' },
      { type: 'text/javascript', src: '~/assets/vendor/isotope-layout/isotope.pkgd.min.js' },
      { type: 'text/javascript', src: '~/assets/vendor/swiper/swiper-bundle.min.js' },
      { type: 'text/javascript', src: '~/assets/vendor/typed.js/typed.min.js' },
      { type: 'text/javascript', src: '~/assets/vendor/waypoints/noframework.waypoints.js' },
      { type: 'text/javascript', src: '~/assets/js/main.js' },
      { children: "console.log('Hello, world!');" }
    ]
  }
})

nanadjei2

3 years ago

Level 4

Still not working...

dacfabre

3 years ago

Level 3

@nanadjei2 what version of nuxt?

dacfabre

3 years ago

Level 3

if nuxt 3, head should be wrapped with app. https://nuxt.com/docs/api/configuration/nuxt-config/#head

nanadjei2

3 years ago

Best Answer

Level 4

The assets should be moved into the public directory instead of the root directory and the nuxt.config.js should be;

    export default defineNuxtConfig({
      app: {
         head: {
           link: [
            {rel: 'stylesheet', href: '/assets/vendor/bootstrap/css/bootstrap.min.css'},
            {rel: 'stylesheet', href: '/assets/vendor/bootstrap-icons/bootstrap-icons.css'},
            {rel: 'stylesheet', href: '/assets/css/style.css' } 
        ],
        script: [
       { type:"text/javascript", hid:"pureCounter", body:true,  src: '/assets/vendor/purecounter/purecounter_vanilla.js' },
         { type:"text/javascript", hid:"main", body:true,  src: '/assets/js/main.js' },
           ],
       }
    }
})

Also all images should not be prefixed ~/ but should begin with just a slash like so /img/<image_name>

1 like

Please or to participate in this conversation.