how can i install bootstrap on nuxtjs

user_14098151 0
Viewed 5475

I want to use Bootstrap in nuxt.js, how can I do this without using CDN? I want to use bootstrap files in the nuxt.config.js, but I can't, also I want to use jquery files and popper.js I tried to include those files on head array on the nuxt.config.js but it's doesn't work, and also I tried to include bootstrap.min.css on CSS array and fortunately it worked, but js property of bootstrap like Dropdown, Collapses and stuff like that didn't work, I know the reason why those properties don't work, its because Jquery and popper js didn't include, but really how can i include them? please help me

nuxtjs bootstrap-4
3 Answers

You can use bootsrap-vue or if you want to use pure bootstrap you can add CDN or download files add them manually:

nuxt.config.js

export default {
  head: {
    script: [
      {
        src: '/jquery-3.5.1.slim.min.js'
      },
      {
        src: '/popper.min.js'
      },
      {
        src: '/bootstrap.min.js'
      }
    ],
    link: [
      {
        rel: 'stylesheet',
        href: '/bootstrap.min.css'
      }
    ]
  }
}
user_86101270

here is a way I found to install bootstrap in Nuxt Js firstly, you need to install the sass and sass loader packages by using

npm install --save-dev sass sass-loader@10 fibers

Secondly, you install bootstrap using npm

npm install bootstrap@next

thirdly, go into your assets folder create a folder named scss, and inside the scss folder create an app.scss or any name you wish fourthly, you import bootstrap from your node modules by using the @import that is

@import "~bootstrap/scss/bootstrap";

fifthly, you go to the nuxt.config.js and you add your scss file you created by using,

{ src: '~/assets/scss/app.scss', lang: 'scss' },

here is the link for a project I did from github bootstrap-nuxt

user_111341040

Try this steps:

  1. Install Bootstrap using this command npm install bootstrap-vue

  2. Add this line to your nuxt.config.js

    module.exports = { modules: ['bootstrap-vue/nuxt'] }

I hope I understood your question right. For more information, you can check Getting Started part of the documentation

user_106405330
Related