Nuxt2에 vue-bootstrap 설치하기

지금 진행중인 프로젝트에 vue-bootstrap이 필요해서 설치해 보았습니다.

 

** vue 2.6 버전 기준입니다.

공식 문서에 따르면 Nuxt 버전 2.15.8 이상을 권장하고 있습니다.

 

npm 과 yarn 둘 중 각자의 프로젝트가 사용하는 것을 기준으로 아래 명령어를 실행해줍니다.

# npm
npm install bootstrap-vue

# yarn
yarn add bootstrap-vue

 

nuxt.config.js파일에 아래의 코드를 넣어줍니다.

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

모듈에 추가해주면 boostrap.css와 bootstrap-vue.csss가 기본적으로 미리 컴파일 되는 것 같습니다.

 

만약 custom 하게 Scss를 사용하려면 아래의 코드를 추가하면 된다고 합니다.

module.exports = {
    modules: ['bootstrap-vue/nuxt'],
    bootstrapVue: {
       bootstrapCSS: false,
       bootstrapVueCSS: false
    }
}

 

이제 template 코드에서 bootstrap을 사용할 수 있습니다.

 

예시)

<b-buttom> 버튼 </b-button>

 

https://bootstrap-vue.org/docs 를 참고했습니다.