Vue3でBulmaフレームワークを使う方法

見た目をすっきりさせたウェブサイトを作りたい時があります。フロントエンド開発の世界は複雑で、VueとBulmaを組み合わせることでその問題を解決できるかもしれません。個人的には、どちらもシンプルで使いやすいと感じています。BulmaのUIは見栄えがよく、コミュニティも充実しており、問題の解決策も簡単に見つけることができます。以下のチュートリアルでは、新しく作成したVue3プロジェクトでBulmaを使用する方法を説明します。

1. Vue3アプリケーションの作成

npm init vue@latest

このコマンドは、Vueの公式プロジェクトスキャフォールディングツールであるcreate-vueをインストールして実行します。オプション機能のプロンプトが表示されます。

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

完了です。

学習プロジェクトの場合は、すべてのオプションで「はい」を選択してください。追加する価値はあります！

プロジェクトを作成したら、以下の手順で依存関係をインストールし、開発サーバーを起動します。

cd <your-project-name>
npm install
npm run dev

これらの簡単な手順で、最初の Vue 3 プロジェクトが実行されます。

2. Bulma をインストール

• Bulma の依存関係をインストール

  npm install --save-dev node-sass sass-loader

• Bulma をインストール

  npm install bulma

3. Vue 3 プロジェクトに Bulma をインポート

• src/assets/main.css ファイルに以下のコードを追加します。

  /* Bulma Import */ @import 'bulma/css/bulma.css';

• src/main.ts に、上記の main.css ファイルがインポートされていることを確認します。この記事の前半で説明した方法でプロジェクトを作成した場合、このファイルはデフォルトで既に含まれています。

    import { createApp } from "vue";
    import { createPinia } from "pinia";
  
    import App from "./App.vue";
    import router from "./router";
  
    import "./assets/main.css";
  
    const app = createApp(App);
  
    app.use(createPinia());
    app.use(router);
  
    app.mount("#app");
  

注: これは <pre>import "./assets/main.css";</pre> という行です。

4. about ルートに検証用のボタンを作成します。

以下のコードに示すように、src/views/AboutView.vue に bulma ボタンテストを追加します。

<template>
<div class="about">
    <h1>This is an about page</h1>
    <!-- bulma -->
    <div class="buttons">
    <button class="button is-info">Info</button>
    <button class="button is-success">Success</button>
    <button class="button is-warning">Warning</button>
    <button class="button is-danger">Danger</button>
    </div>
</div>
</template>

<style>
@media (min-width: 1024px) {
.about {
    min-height: 100vh;
    display: flex;
    align-items: center;
}
}
</style>

ブラウザで http://localhost:5173/about を開くと、画像のようになります。様々な色のボタンが正しく表示されており、Bulma が正常に使用されていることがわかります。

私はプロのフロントエンド開発者ではありませんので、間違いがあればご指摘ください。