2022년 이후에 멈춰버린 BootstrapVue는 나온 지 한참 된 Bootstrap 5를 제대로 지원하지 않는다. 따라서 대신할 BootstrapVueNext 프로젝트를 찾았고, 알파 버전 끄트머리라고는 하지만 사용이 가능한 상태로 판단하고 설치 순서를 정리한다.
환경
| OS | Windows 11 |
| Node.js | v22.14.0 |
| fnm | 1.38.1 |
| npm | 10.9.2 |
Node.js
Node.js 다운로드 페이지에서 환경에 맞게 Node.js를 설치할 수 있다.
fnm은 Node.js의 다양한 버전을 옮겨가며 사용할 수 있도록 도와주는 도구이다.
fnm을 먼저 설치하고 Node.js를 설치할 것이다.
1
| winget install Schniz.fnm
|
결과
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| 'msstore' 원본을 사용하려면 다음 계약을 확인해야 합니다.
Terms of Transaction: https://aka.ms/microsoft-store-terms-of-transaction
원본이 제대로 작동하려면 현재 컴퓨터의 두 글자 지리적 지역을 백 엔드 서비스로 보내야 합니다(예: "미국").
모든 원본 사용 약관에 동의하십니까?
[Y] 예 [N] 아니요: Y
찾음 Fast Node Manager [Schniz.fnm] 버전 1.38.1
이 응용 프로그램의 라이선스는 그 소유자가 사용자에게 부여했습니다.
Microsoft는 타사 패키지에 대한 책임을 지지 않고 라이선스를 부여하지도 않습니다.
다운로드 중 https://github.com/Schniz/fnm/releases/download/v1.38.1/fnm-windows.zip
██████████████████████████████ 3.25 MB / 3.25 MB
설치 관리자 해시를 확인했습니다.
보관 파일을 추출하는 중...
보관 파일을 추출했습니다.
패키지 설치를 시작하는 중...
경로 환경 변수 수정됨; 셸을 다시 시작하여 새 값을 사용합니다.
명령줄 별칭이 추가되었습니다. "fnm"
설치 성공
|
fnm에서 사용할 수 있는 node 버전을 설치한다.
결과
1
2
| Installing Node v22.14.0 (x64)
00:00:11 ██████████████████████████████████████████████████████████████████████████ 33.29 MiB/33.29 MiB (2.91 MiB/s, 0s)
|
기본적으로 node 명령어를 사용할 수 있도록 shell 설정을 추가한다.
1
2
3
| 'fnm env --use-on-cd --shell powershell | Out-String | Invoke-Expression' | Add-Content $PROFILE
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
. $PROFILE
|
아래와 같이 나오면 Node.js 설치까지 완료!
1
2
3
4
5
| node -v
v22.14.0
npm -v
10.9.2
|
Vue.js
Vue.js 프로젝트를 생성한다.
프로젝트 이름을 정하고 추가할 기능을 선택할 수 있는데, 일단 Router 정도만 추가한다.
결과
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| > npx
> create-vue
┌ Vue.js - The Progressive JavaScript Framework
│
◇ Project name (target directory):
│ vue-project
│
◇ Select features to include in your project: (↑/↓ to navigate, space to select, a to toggle all, enter to confirm)
│ ◻ TypeScript
│ ◻ JSX Support
│ ◼ Router (SPA development)
│ ◻ Pinia (state management)
│ ◻ Vitest (unit testing)
│ ◻ End-to-End Testing
│ ◻ ESLint (error prevention)
│ ◻ Prettier (code formatting)
Scaffolding project in C:\vue-project...
│
└ Done. Now run:
cd vue-project
npm install
npm run dev
| Optional: Initialize Git in your project directory with:
git init && git add -A && git commit -m "initial commit"
|
프로젝트 경로 안에 들어가서 Node.js 버전을 고정하고 기본적인 의존성을 설치한다.
1
2
3
4
| cd vue-project
fnm use 22
node -v > .node-version
npm install
|
결과
1
2
3
4
5
6
| added 145 packages, and audited 146 packages in 17s
43 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
|
BootstrapVueNext
BootstrapVueNext 의존성을 추가로 설치한다.
1
| npm i bootstrap bootstrap-vue-next
|
결과
1
2
3
4
5
6
| added 3 packages, and audited 149 packages in 6s
46 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
|
개발 환경에서만 사용할 의존성도 설치한다. 이게 없으면 사용하는 컴포넌트마다 다 꺼내와야 한다…
1
| npm i unplugin-vue-components -D
|
결과
1
2
3
4
5
6
| added 31 packages, and audited 180 packages in 5s
54 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
|
이제 코드를 수정해야 한다. 파일 두 개만 수정하면 된다.
/src/main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'
import './assets/main.css'
import { createApp } from 'vue'
import { createBootstrap } from 'bootstrap-vue-next'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.use(createBootstrap())
app.mount('#app')
|
/vite.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import Components from 'unplugin-vue-components/vite'
import { BootstrapVueNextResolver } from 'bootstrap-vue-next'
// https://vite.dev/config/
export default defineConfig({
plugins: [
vue(),
Components({
resolvers: [BootstrapVueNextResolver()],
}),
vueDevTools(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
},
},
})
|
이제 BootstrapVueNext 페이지에서 원하는 컴포넌트를 찾아 적용하면 된다.
번외 - 기본 세팅
Header, Container, Font 적용 예시
- src/assets/base.css
- src/App.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <script setup>
import Header from "./components/Header.vue"
</script>
<template>
<header>
<Header />
</header>
<BContainer fluid="md">
<RouterView />
</BContainer>
</template>
<style scoped>
</style>
|
- src/components/Header.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <script setup>
</script>
<template>
<BNavbar toggleable="sm">
<BNavbarToggle target="nav-collapse" />
<BNavbarBrand to="/">BootstrapVue</BNavbarBrand>
<BCollapse id="nav-collapse" is-nav>
<BNavbarNav>
<BNavItem to="/about">About</BNavItem>
</BNavbarNav>
</BCollapse>
</BNavbar>
</template>
<style scoped>
</style>
|
1
2
3
4
5
| @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
body {
font-family: "Noto Sans KR";
}
|
참고
- GitHub
- Vue.js
- BootstrapVueNext