[#. Vue] [Vue warn]: Unknown custom element: <b-list-group-item> - did you register the component correctly? For recursive components, make sure to provide the "name" option. vue bootstrap 에러 해결하기

 

 

 

 

 

Vue에서 UI 프레임워크로 bootstrap를 사용하려고 하는데 에러가 발생했다

 

 

 

 

버전은 아래와 같고, 버전 문제는 분명 아니다

 

Vue 2.6.12

bootstrap 4.5.3

bootstrap-vue 2.21.2

 

 

 

처음부터 살펴보자

 

 

 

① bootstrap, bootstrap-vue 설치

 

npm install vue bootstrap-vue bootstrap --save

 

 

 

 

 

② main.js에 세팅

 

import Vue from 'vue'
import App from './App.vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.config.productionTip = false

Vue.use(BootstrapVue)

new Vue({
  render: h => h(App),
}).$mount('#app')

 

 

 

 

이렇게 세팅되어 있으면 된다

근데 나는 이렇게 세팅했다고 생각했는데도 에러가 발생했고

결국 원인은

 

 

 

 

이렇게 App 마운팅을 bootstrap 사용 선언보다 위에 해서였다🤦‍♂️