TypeScript環境でのVue3プロジェクトにBootstrap 5ボタンを実装する方法

こちらの記事で Vue CLI で作成した Vue3 プロジェクトで Bootstrap 5 を用いてボタンを実装する方法を紹介しましたが、今回はこちらの記事で作成した Vue3 + TypeScript の環境での Bootstrap5 でのボタン実装について紹介していきます。

結論からいうと TypeScript 環境においても JavaScript 環境においても Bootstrap5 を利用する方法は特に違いはありませんが、手順など参考にしていただければと思います。

macOS: 12.3
vue: 3.2.1
typescript: 4.5.5
bootstrap: 5.1.3

プロジェクト作成

[ads]

Vue3 プロジェクト以下の関連記事で作成した方法と同様のものを使います。プロジェクト作成のポイントは以下の通りです。

Vue CLI ではなく “npm init vue@3” コマンド (create-vue) で vue3 プロジェクトを作成
✔ Add TypeScript? で Yes を選択

プロジェクトの作成についての詳細は以下を参照してください。

TypeScript に対応した Vue 3 プロジェクトの作成

本記事では TypeScript を用いて Vue プロジェクトを作成していこうと思います。

Bootstrap 5 のインストール

[ads]

Vue 3 プロジェクトが作成できたところで、引き続き Bootstrap 5 をプロジェクトにインストールしていきます。以下のように npm install コマンドを実行することで最新版をインストールすることができます。

terminal

npm install --save bootstrap

npm install 完了後 Vue 3 プロジェクト内の package.json ファイルを確認すると dependencies に bootstrap が追加されていることが分かります。今回のタイミングでは 5.1.3 がインストールされました。

ここまでで Vue 3 プロジェクトの準備は完了です。続いて Bootstrap Button を実装していきます。

Bootstrap5 Button の実装

[ads]

Bootstrap5 の Button には様々なスタイルのボタンが用意されていますが、ここでは最も標準的な以下のボタンを実装していきます。

Buttons (ボタン)

ボタンはフォームやダイアログなどのアクションにカスタムボタンスタイルを利用できます。サイズや状態管理に対応しています。ボタンの使い方の例を示します。

新規コンポーネントの追加

Vue 3 プロジェクトを作成した状態では TheWelcome.vue と WelcomeItem.vue という 2 つのコンポーネントを使ったプロジェクトとなっています。今回はその 2 つのコンポーネントを使わず、 BootstrapTest.vue というコンポーネントを新規に作成し、そこに Bootstrap5 の Button を実装していきます。

src / components ディレクトリに以下の内容で Bootstrap.vue というファイルを作成します。

<template>
<div>
  Bootstrap Test
  <br>
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-warning">Warning</button>
</div>
</template>

内容としては Bootstrap5 のサイトにも紹介されている通りのボタン実装方法をそのまま記載している形です。

App.vue から呼び出すコンポーネントの変更

続いて TheWelcome.vue と WelcomeItem.vue という 2 つのコンポーネントを呼び出している App.vue を修正して先ほど作成した BootstrapTest.vue のみを呼び出すように変更していきます。

App.vue

<script setup lang="ts">
import BootstrapTest from './components/BootstrapTest.vue'
 </script>

<template>
<div>
  <BootstrapTest />
</div>
</template>

今回は Vue3 プロジェクトで TypeScript を有効にしているため、 script タグで setup lang=”ts” としている点に注目してください。それ以外は単純に BootstrapTest.vue をインポートして呼び出している形になります。なお、コードをより簡潔にする意味で style タグは削除しています。

main.ts で bootstrap をインポート

上記までの段階でプロジェクトを実行すると以下のように Bootstrap が有効ではありません。

Bootstrap を有効にするためには src ディレクトリ直下に配置されている main.ts ファイルで Bootstrap をインポートする必要があります。以下のようにインポートする行を追加します。

main.ts

import { createApp } from 'vue'
import App from './App.vue'
 
import "bootstrap/dist/css/bootstrap.min.css"
 
createApp(App).mount('#app')

これで TypeScript を追加した Vue3 プロジェクトで Bootstrap5 のボタンの実装が完了しました。続いて npm run dev コマンドを使って実行していきます。

Bootstrap5 の Button を実装したプロジェクトの実行

[ads]

以下のように npm run dev コマンドで今回作成したプロジェクトを実行します。

npm run dev

App.vue の style タグを全て削除しているため少し窮屈な表示になっていますが、無事 TypeScript を追加した Vue3 プロジェクトで Bootstrap5 のボタンを実装することができました。

まとめ

[ads]

TypeScript を追加した Vue3 プロジェクトでも Bootstrap5 の追加手順は JavaScript と特に変わらない
main.ts で Bootstrap のインポートを忘れずに

参考記事

TypeScript に対応した Vue 3 プロジェクトの作成

本記事では TypeScript を用いて Vue プロジェクトを作成していこうと思います。

TypeScript コンポーネントを Vue3 プロジェクトに追加

前回の記事に引き続き、今回は Vue3 プロジェクトにTypeScript コンポーネントを追加して実際に Vue.js のなかで TypeScript を使っていきたいと思います。

[ Vue3 ] 新規作成した Vue 3 CLI プロジェクトで Bootstrap 5 を利用する方法

Vue CLI で新規作成した Vue 3 プロジェクトでは、 bootstrap-vue 用いると、 Uncaught TypeError が発生してしまいます。今回は、Bootstrap 5 を利用することで、このエラーを回避する方法を紹介します。

[ Vue3 + TypeScript ] 子コンポーネントで実装したドロップダウンで選択した内容をリアクティブに親コンポーネントと連携する方法

本記事では通常ツリー構造となるコンポーネントの「親コンポーネントから子コンポーネント」、「子コンポーネントから親コンポーネント」のそれぞれについてリアクティブなデータのやりとりを TypeScript で実現する方法についてドロップボックス (Select) を例に用いて整理していきます。

[ads]

本記事で使用したサンプルコード

src/

main.ts

import { createApp } from 'vue'
import App from './App.vue'
 
import "bootstrap/dist/css/bootstrap.min.css"
 
createApp(App).mount('#app')

App.vue

<script setup lang="ts">
import BootstrapTest from './components/BootstrapTest.vue'
</script>

<template>
<div>
  <BootstrapTest />
</div>
</template>

src/components

BootstrapTest.vue

<template>
<div>
  Bootstrap Test
  <br>
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-warning">Warning</button>
</div>
</template>