Vue3+MDBootstrap5のサンプルを作ってみた

はじめに

久しぶりすぎて全くわからなくなったので、再度お勉強のためにサンプルコードを作ってみました。
ChatGPT に依頼してみました。

更新履歴

2025.3.29 初回投稿

インストール手順

1.　プロジェクトの作成

npm init vue@latest

インタラクティブな質問に答えて、プロジェクト名を入力し、Vue 3オプションを選択します。
わからなければチェックせずそのままリターン
** ここではsampleにしてみました。
2.　プロジェクトに移動して依存関係をインストール

cd sample
npm install

3.　MDBootstrap 5のインストール

npm install mdb-vue-ui-kit

4.　CSSとJSのインポート

• src/main.js ファイルを編集して、MDBootstrapのCSSとJSをインポートします。

import { createApp } from 'vue'
import App from './App.vue'
import 'mdb-vue-ui-kit/css/mdb.min.css' // MDBootstrapのCSSをインポート

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

サンプルコード

• 以下は、MDBootstrap 5のVueコンポーネントを使って、簡単なカードを表示するサンプルです。

App.vue

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'

// MDBootstrap 5のコンポーネントをインポート
import { MDBCard, MDBBtn } from 'mdb-vue-ui-kit'
import 'mdb-vue-ui-kit/css/mdb.min.css'
</script>

<template>
  <header class="bg-primary text-white py-4">
    <div class="text-center">
      <img alt="Vue logo" class="logo mb-3" src="./assets/logo.svg" width="125" height="125" />
      <h1>Welcome to MDBootstrap 5 + Vue 3</h1>
    </div>
  </header>

  <main class="container my-5">
    <MDBCard class="p-4 mb-4">
      <h2 class="text-center mb-4">Interactive Component</h2>
      <HelloWorld msg="You did it!" />
    </MDBCard>

    <MDBCard class="p-4">
      <h2 class="text-center mb-4">Enjoy More Components!</h2>
      <TheWelcome />
      <div class="text-center mt-4">
        <MDBBtn color="success" class="me-2" @click="showAlert">Click Me!</MDBBtn>
        <MDBBtn color="danger">Danger Button</MDBBtn>
      </div>
    </MDBCard>
  </main>
</template>

<script>
import { ref } from 'vue';

function showAlert() {
  alert('You clicked the button!');
}
</script>

<style scoped>
header {
  text-align: center;
}

.logo {
  display: block;
  margin: 0 auto;
}

.container {
  max-width: 700px;
}

@media (min-width: 1024px) {
  .logo {
    margin-bottom: 1rem;
  }
}
</style>

実行

• 以下のコマンドで開発サーバーを起動し、ブラウザで確認できます。

npm run dev

実行後の画面