JS files not being loaded in Nuxt project

Question

I am working with a bootstrap template and am trying to implement it into a Nuxt project. I believe I have loaded all the necessary files except for the scripts.

I am importing my scripts into nuxt.config.js . I have tried doing this a couple different ways:

1.) I have tried including the local src paths like this:

script: [
    { src: '~assets/js/jquery.js' },
    { src: '~assets/js/popper.min.js' },
    { src: '~assets/js/bootstrap.min.js' },
    { src: '~assets/js/jquery.cubeportfolio.min.js' },
    { src: '~assets/js/parallax.min.js' },
    { src: '~assets/js/jquery.appear.min.js' },
    { src: '~assets/js/jquery.themepunch.tools.min.js' },
    { src: '~assets/js/jquery.themepunch.revolution.min.js' },
    { src: '~assets/js/extensions/revolution.extension.actions.min.js' },
    { src: '~assets/js/extensions/revolution.extension.carousel.min.js' },
    { src: '~assets/js/extensions/revolution.extension.kenburn.min.js' },
    { src: '~assets/js/extensions/revolution.extension.layeranimation.min.js' },
    { src: '~assets/js/extensions/revolution.extension.migration.min.js' },
    { src: '~assets/js/extensions/revolution.extension.parallax.min.js' },
    { src: '~assets/js/extensions/revolution.extension.slideanims.min.js' },
    { src: '~assets/js/extensions/revolution.extension.video.min.js' },
    { src: '~assets/js/revolution-addons/before-after-affect/revolution.addon.beforeafter.min.js'}
  ],

2.) And as static files:

script: [
    { src: '/js/jquery.js' },
    { src: '/js/popper.min.js' },
    { src: '/js/bootstrap.min.js' },
    { src: '/js/jquery.cubeportfolio.min.js' },
    { src: '/js/parallax.min.js' },
    { src: '/js/jquery.appear.min.js' },
    { src: '/js/jquery.themepunch.tools.min.js' },
    { src: '/js/jquery.themepunch.revolution.min.js' },
    { src: '/js/extensions/revolution.extension.actions.min.js' },
    { src: '/js/extensions/revolution.extension.carousel.min.js' },
    { src: '/js/extensions/revolution.extension.kenburn.min.js' },
    { src: '/js/extensions/revolution.extension.layeranimation.min.js' },
    { src: '/js/extensions/revolution.extension.migration.min.js' },
    { src: '/js/extensions/revolution.extension.parallax.min.js' },
    { src: '/js/extensions/revolution.extension.slideanims.min.js' },
    { src: '/js/extensions/revolution.extension.video.min.js' },
    { src: '/js/revolution-addons/before-after-affect/revolution.addon.beforeafter.min.js'}
  ],

My entire nuxt.config.js file looks like this:

export default {
  mode: 'universal',
  /*
  ** Headers of the page
  */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },
  /*
  ** Global CSS
  */
  css: [
    '~/assets/css/style.css',
    '~/assets/css/animate.css',
    '~/assets/css/bootstrap-reboot.min.css',
    '~/assets/css/bootstrap.min.css',
    '~/assets/css/cubeportfolio.min.css',
    // '~/assets/css/fontawesome-all.min'
    '~/assets/css/green.css',
    '~/assets/css/jquery.fancybox.min.css',
    '~/assets/css/layer.css',
    '~/assets/css/morphext.css',
    '~/assets/css/navigation.css',
    '~/assets/css/settings.css',
    '~/assets/css/swiper.min.css',
    '~/assets/css/themify-icons.css',
    '~/assets/css/yellow.css',
    '~/assets/css/revolution-addons/before-after-affect/revolution.addon.beforeafter.css',
    '~/assets/css/revolution-addons/particles-effect/revolution.addon.particles.css'
  ],
  script: [
    { src: '~assets/js/jquery.js' },
    { src: '~assets/js/popper.min.js' },
    { src: '~assets/js/bootstrap.min.js' },
    { src: '~assets/js/jquery.cubeportfolio.min.js' },
    { src: '~assets/js/parallax.min.js' },
    { src: '~assets/js/jquery.appear.min.js' },
    { src: '~assets/js/jquery.themepunch.tools.min.js' },
    { src: '~assets/js/jquery.themepunch.revolution.min.js' },
    { src: '~assets/js/extensions/revolution.extension.actions.min.js' },
    { src: '~assets/js/extensions/revolution.extension.carousel.min.js' },
    { src: '~assets/js/extensions/revolution.extension.kenburn.min.js' },
    { src: '~assets/js/extensions/revolution.extension.layeranimation.min.js' },
    { src: '~assets/js/extensions/revolution.extension.migration.min.js' },
    { src: '~assets/js/extensions/revolution.extension.parallax.min.js' },
    { src: '~assets/js/extensions/revolution.extension.slideanims.min.js' },
    { src: '~assets/js/extensions/revolution.extension.video.min.js' },
    { src: '~assets/js/revolution-addons/before-after-affect/revolution.addon.beforeafter.min.js'}
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
  ],
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
  ],
  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {
    }
  }
}

When inspecting the page, I am not seeing any of the script files listed which is what seems to be preventing the rest of this bootstrap theme from loading properly.

It should look like this: http://www.themesindustry.com/html/treely/index.html

My entire repo can be found here: https://github.com/SIeep/brandon-evans-portfolio

Would really appreciate any sort of guidance or help!

Thanks :)

Answer 1

I believe that scripts array should be inside head object like so:

export default {
  ...
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  script: [
    { src: '~assets/js/jquery.js' },
    { src: '~assets/js/popper.min.js' },
    { src: '~assets/js/bootstrap.min.js' },
    { src: '~assets/js/jquery.cubeportfolio.min.js' },
    { src: '~assets/js/parallax.min.js' },
    { src: '~assets/js/jquery.appear.min.js' },
    { src: '~assets/js/jquery.themepunch.tools.min.js' },
    { src: '~assets/js/jquery.themepunch.revolution.min.js' },
    { src: '~assets/js/extensions/revolution.extension.actions.min.js' },
    { src: '~assets/js/extensions/revolution.extension.carousel.min.js' },
    { src: '~assets/js/extensions/revolution.extension.kenburn.min.js' },
    { src: '~assets/js/extensions/revolution.extension.layeranimation.min.js' },
    { src: '~assets/js/extensions/revolution.extension.migration.min.js' },
    { src: '~assets/js/extensions/revolution.extension.parallax.min.js' },
    { src: '~assets/js/extensions/revolution.extension.slideanims.min.js' },
    { src: '~assets/js/extensions/revolution.extension.video.min.js' },
    { src: '~assets/js/revolution-addons/before-after-affect/revolution.addon.beforeafter.min.js'}
  ],
  ...
}

Answer 2

You should use import statement and webpack instead of importing all this js files. This isn't good practice.

Also, I'm not sure property script exist for nuxt. However, if you really want to do that, you can import your file in your head content, like this example:

export default {
  mode: 'universal',
  /*
  ** Headers of the page
  */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
      { rel: 'stylesheet', href: '/assets/css/jquery.fancybox.min.css' }
    ],
    script: [
      { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'}
    ]
  },