Quantcast
Channel: Integrate bootstrap theme with nuxt.js project - Stack Overflow
Viewing all articles
Browse latest Browse all 2

Integrate bootstrap theme with nuxt.js project

$
0
0

I just started a new project and am working with a bootstrap theme that I would like integrated with my Nuxt.js project.

I believe I have loaded all of the css asset files properly, although I am trying to figure out how to properly add the JS files.

I have tried loading the script source files in nuxt.config.js 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' }
    ],
    script: [
      { src: './assets/js/jquery-1.11.0.min.js'},
      { src: './assets/bootstrap/js/bootstrap.min.js'},
      { src: './assets/js/jquery.backstretch.min.js'},
      { src: './assets/js/owl.carousel.min.js'},
      { src: './assets/js/jquery.knob.min.js'},
      { src: './assets/js/jquery.magnific-popup.min.js'},
      { src: './assets/js/jquery.simple-text-rotator.min.js'},
      { src: './assets/js/jquery.waypoints.js'},
      { src: './assets/js/wow.min.js'},
      { src: './assets/js/smoothscroll.js'},
      { src: './assets/js/jquery.fitvids.js'},
      { src: './assets/js/gmaps.js'},
      { src: './assets/js/custom.js'},
      { src: 'http://maps.google.com/maps/api/js?sensor=true'}
    ]
  },
...

and I have also tried adding theme directly within my index.vue file like this:

<script>
// import Logo from '~/components/Logo.vue'

export default {
  components: {
    // Logo
  },
  head () {
    return {
      script: [
        { src: '/assets/js/jquery-1.11.0.min.js'},
        { src: '/assets/bootstrap/js/bootstrap.min.js'},
        { src: '/assets/js/jquery.backstretch.min.js'},
        { src: '/assets/js/owl.carousel.min.js'},
        { src: '/assets/js/jquery.knob.min.js'},
        { src: '/assets/js/jquery.magnific-popup.min.js'},
        { src: '/assets/js/jquery.simple-text-rotator.min.js'},
        { src: '/assets/js/jquery.waypoints.js'},
        { src: '/assets/js/wow.min.js'},
        { src: '/assets/js/smoothscroll.js'},
        { src: '/assets/js/jquery.fitvids.js'},
        { src: '/assets/js/gmaps.js'},
        { src: '/assets/js/custom.js'},
        { src: 'http://maps.google.com/maps/api/js?sensor=true'}
      ]
    }
  }
}
</script>

I've tried starting the paths with ~/, / as well as ./

The issue is that these source files are not being found with the declared path.

bootstrap theme integration with nuxt console err

Any ideas or help is greatly appreciated!


Viewing all articles
Browse latest Browse all 2

Latest Images

Trending Articles





Latest Images