1. bootstrap-vue 설치

bootstrap-vue.org/

BootstrapVue

2021.05.10 현재 Vue3에 Bootstrap 설치 안됨

main.js 아래 환경설정 등록시 오류 발생

---

Vue 프로젝트 main.js 등록

ㅁ main.js 기본

import { createApp } from 'vue'

import App from './App.vue'

createApp(App).mount('#app')

---

ㅁ main.js BootStrapVue 등록

import { createApp } from 'vue'

// 1. Vue Bootstrap 등록 import
import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

// 1. Import Bootstrap CSS import
import 'bootstrap/dist/css/bootstrap.css'import '

bootstrap-vue/dist/bootstrap-vue.css

import App from './App.vue'

createApp(App).mount('#app')

// 3. 현재 프로젝트 BootStrapVue 적용

Vue.use(BootstrapVue)

// 4. Bootstrapvue 아이콘 적용

Vue.use(IconsPlugin)

---

bootstrap-vue.org/docs

BootstrapVue

Using module bundlers

Most likely you are using module bundlers like Webpack, Parcel or rollup.js, which makes it easy to directly include the package into your project. To do this, use npm or yarn to get the latest version of Vue.js, Bootstrap v4 and BootstrapVue:

# With npm npm install vue bootstrap bootstrap-vue # With yarn yarn add vue bootstrap bootstrap-vue

Then, register BootstrapVue in your app entry point (typically app.js or main.js):

import Vue from 'vue'

import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

// Import Bootstrap an BootstrapVue CSS files (order is important)

import 'bootstrap/dist/css/bootstrap.css'

import 'bootstrap-vue/dist/bootstrap-vue.css'

// Make BootstrapVue available throughout your project Vue.use(BootstrapVue) // Optionally install the BootstrapVue icon components plugin Vue.use(IconsPlugin)

Theming Bootstrap

If you want to change Bootstrap's default styles (e.g. the $body-color), you have to use Bootstrap's and BootstrapVue's scss files.

Create your own scss file (e.g. app.scss) containing both your custom definitions and the 2 @import's at the end:

// Define variable defaults

$body-bg: #000;

$body-color: #111; // Then import Bootstrap an BootstrapVue SCSS files (order is important)

@import 'node_modules/bootstrap/scss/bootstrap.scss';

@import 'node_modules/bootstrap-vue/src/index.scss';

Then import that single scss file into your project:

import Vue from 'vue'

import { BootstrapVue } from 'bootstrap-vue'

import './app.scss'

Vue.use(BootstrapVue)

---