how can i install bootstrap on nuxtjs

Question

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

please add some code, so its easier to find possible mistakes. — deelde, Aug 22 '20 at 17:12

BeHappy · Accepted Answer · 2020-08-22T13:06:42.330

7

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'
      }
    ]
  }
}

edited Aug 22 '20 at 13:06

answered Aug 22 '20 at 12:15

BeHappy

3,705
5
18
59

thanks for the answer, I knew how to use of CDN, but I don't want use of it for some reasons, I want use manual files, and I include bootstrap.min.css in CSS array on nuxt.config.js its work, but I don't know how can I include js files , which needs for working pure bootstrap like jquery and popper.js, which usually used for DropDown and Copllapse – Mohammad Aug 22 '20 at 12:25
@MohammadAli Just add them in `static` folder and change src as my edit in answer. – BeHappy Aug 22 '20 at 13:07
Here is how to accept answer: https://stackoverflow.com/help/someone-answers#:~:text=To%20accept%20an%20answer%3A,the%20answer%2C%20at%20any%20time. – BeHappy Aug 22 '20 at 15:37

score 3 · Answer 2 · answered Apr 06 '21 at 05:55

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

score -1 · Answer 3 · answered Aug 22 '20 at 12:12

-1

Try this steps:

Install Bootstrap using this command npm install bootstrap-vue
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

answered Aug 22 '20 at 12:12

Cemil Uzunhasan

222
3
6

1

thanks for your answer, but I don't want using of bootstrap-vue because its doesn't support of RTL, and it's hard to change config for RTL support – Mohammad Aug 22 '20 at 12:28

how can i install bootstrap on nuxtjs

3 Answers3