TechVue.jsJapanese

Vue3 + TypeScript + Bootstrap 5 で ボタン を設置する

Tech

こちらの記事で 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 を選択

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


Bootstrap 5 の インストール

[ads]

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

npm install --save bootstrap

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

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


Bootstrap5 Button の 実装

[ads]

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

引用元:https://getbootstrap.jp/docs/5.0/components/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 のみを 呼び出すように変更していきます。

<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 を インポート する必要があります。以下のように インポート する行を追加します。

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 の インポート を忘れずに

参考記事


[ads]

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

src / main.ts

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

src / 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>

Ads