Vue3 Bootstrap インストール

はじめに

Vue3でBoostrapのインストール方法について紹介する

インストール手順

1. インストールバージョン確認
   Bootstrapのnpmパッケージ公開サイトよりインストール対象パージョンを確認する

   今回はBootstrap4.6をインストールするのでバージョンを指定してパッケージをインストールする
   バージョン指定なしだと最新バージョンがインストールされる

2. インストールコマンド実行
   インストールコマンド

   npm install bootstrap@4.6.0
   

3. Vueに適応するための設定を追加
   インストール後、Bootstrapを適応するためにmain.jsファイルに以下の内容を追加する

   import 'bootstrap/dist/css/bootstrap.min.css'
   import 'bootstrap/dist/js/bootstrap.min.js'
   

確認

1. App.vueに以下のHTMLを追加

   <button type="button" class="btn btn-primary">Bootstrap</button>
   

2. npm run serveでVueを起動

3. 画面でボタンにBootstrapのスタイルが適応されていることを確認