Home

Issue: 178

nuxt.js + bootstrap

[issue link]

Hi,

I’ve tried to include http://getbootstrap.com/ to my project using this:

npm i bootstrap
npm i jquery
# besides, I've installed them via bower to have the css available

here is my nuxt.config.js:

module.exports = {
  build: {
    vendor: ['jquery', 'bootstrap']
  },
  /*
  ** Headers of the page
  */
  head: {
    title: 'starter',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', content: "Nuxt.js project" }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: 'favicon.ico' }
    ]
  },
  /*
  ** Global CSS
  */
  css: ['~assets/css/main.css', '~assets/bower_components/bootstrap/dist/css/bootstrap.css', '~assets/bower_components/bootstrap/dist/css/bootstrap-theme.css'],
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#3B8070' }
}

Here is the result:
image

Could anyone help, how can I connect it more correctly? Is that possible to somehow state to the webpack that jquery should be connected before the bootstrap ?

Regards,

This question is available on Nuxt.js community (#c150)