Vue.jsにvuetifyとbootstrap-vueを共存させる

Vuetifyめんどくさい

Vue.jsのフレームワークはVuetifyがベストなのかもしれませんが、いかんせん細かい制御がめんどくさすぎる。レイアウトの扱いにくさ、レスポンシブの「なんでここでブレイクポイントが？？」デベロッパツールで見ても分かりにくすぎる。かゆいところに手が届かないのがもどかしい。

Vuetifyの良いところ

とはいえcomponentは素晴らしいと思う。ログイン画面をサクッといい感じに作れちゃうところとか。Vue.jsと仲良しなところも。

Bootstrap

containerとかgridを最初にフレームワークとして導入したのはBootstrapではなかろうか。わたくしはwebデザイナーではないのでよくわからないけど、RailsにBootstrapを導入したときはなかなかどうして感動したものである。

TailwindCSS

VueでTailwindCSSはどうだろうと思ったが、日本語ドキュメントが充実していない。学習コストが高すぎる。

で？

Vue.jsでさくっといい感じに作りたいだけだったら、Vuetifyはcomponentsとjs、Bootstrapのグリッドシステムのいいとこ取りでいいのでは？という結論に。

【本題】Vue.jsにVuetifyとBootstrap-vueを導入する

参考

まずdockerでviteでvueの環境を構築

プロジェクト名は"vueframework"とします。

mkdir vueframework

環境変数はdirenvを使用

touch .envrc

必要な環境変数はここに書き込む
ここではprojectnameを定義しているだけ

.envrc

# projectname
export PJNAME='vueframework'

環境変数を設定したらdirenv allow

direnv allow

開発用vue3-vite環境の追加

vue3-viteの環境を構築
まずcompose.yamlを作成し、
次にvueのvite開発用ディレクトリdevを作成。
その配下にvueディレクトリを切りDockerfileを作成します。

touch compose.yaml
mkdir dev
mkdir dev/vue && touch dev/Dockerfile

この時点でのtree -F

tree

./vueframework
├── compose.yaml
└── dev/
    ├── Dockerfile
    └── vue/

vue3-vite用のDockerfileを編集

dev/Dockerfile

FROM node:lts-alpine
WORKDIR /
RUN apk update

compose.yamlを編集

compose.yaml

services:
  vue:
    build: ./dev/
    ports:
      - 5173:5173
    # Timezoneを日本に
    environment:
       TZ: Asia/Tokyo
    volumes:
      - type: bind
        source: ./dev/vue
        target: /vue
networks:
  # コンテナ間通信用のネットワークセグメント
  nw:
    name: ${PJNAME}_nw

一旦build

docker compose build

create-vueでプロジェクトの作成

docker compose run --rm vue npm init vue@latest

対話式でvueプロジェクトを構築していきます。

create-vue@3.14.0
Ok to proceed? (y) y

> npx
> create-vue


Vue.js - The Progressive JavaScript Framework

✔ Project name: … vue #ここはdev配下に作成したディレクトリvueと同じにする
✔ Add TypeScript? … No / Yes #=>No まだTypeScriptに手を出していない
✔ Add JSX Support? … No / Yes #=>No
✔ Add Vue Router for Single Page Application development? … No / Yes #=>Yes
✔ Add Pinia for state management? … No / Yes #=>Yes
✔ Add Vitest for Unit Testing? … No / Yes #=>No
✔ Add an End-to-End Testing Solution? › No #=>No
✔ Add ESLint for code quality? … No / Yes #=>Yes
✔ Add Prettier for code formatting? … No / Yes #=>Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes #=>No

Scaffolding project in /vue...

Done. Now run:

  cd vue
  npm install
  npm run format
  npm run dev

完了するとfrontend/vue配下にファイルが作成される。

dev/Dockerfileを変更

WORKDIRを’/’から'/vue'へ変更
COPYコマンドを追加

Dockerfile

FROM node:lts-alpine
+ #変更
- WORKDIR /
+ WORKDIR /vue
RUN apk update
+ # 起動コマンドを追加
+ CMD ["yarn", "dev", "--host"]

再度build

Dockerfileの変更を反映させるため、再度build

docker compose build

確認

コンテナに入り、プロンプト(カレントディレクトリ：WORKDIR)が/vueだったらOK。
カレントが/vueにならないと次項のyarnが/vue配下にインストールされない。
確認後exitで抜ける

docker compose run --rm vue sh
/vue #　exit

yarnのインストール

docker compose run --rm vue yarn install

※一回目失敗する場合があるのでerrorが出たらもう一度

インストール完了後vue配下にyarn.lockファイルとnode_modulesフォルダができる。

orbstackを使用している場合

vite.config.jsに以下を追加

vite.config.js

export default defineConfig({
  server: {
    allowedHosts: true,
  },
  plugins: [
  ....

コンテナ起動

ここでコンテナを起動させ、vueが表示されることを確認する。

docker compose up -d

Vue3の起動確認

http://locahost:5173/
で以下のvueの画面が確認できていればVite + Vue3の環境まではOK

Vuetifyの導入

↑ここの「既存プロジェクトで使う場合」を参照

docker compose upのまま

docker compose exec vue yarn add vuetify

main.jsに次を追加する

main.js

// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
...
const vuetify = createVuetify({
  components,
  directives,
})
...
app.use(vuetify)
...

Vuetifyが適用されているか確認

vueの初期画面で確認してみます。
views/App.vueにv-btnを埋め込んでみます。(You did it!の下に)

App.vue

   <div class="wrapper">
      <HelloWorld msg="You did it!" />
<v-btn>
  Button
</v-btn>
...

あっという間にVuetify風の影付きボタンが表示されました。

Bootstrap-vueの導入

Vuetifyがインストールされている状態でBootstrap-vueをインストールします

• Bootstrap本体とpopperjs

docker compose exec vue yarn add bootstrap @popperjs/core

• sass

docker compose exec vue yarn add sass

• scssファイルを作成

docker compose exec vue touch src/assets/styles.scss

• scssファイルを編集

./assets/styles.scss

// Import all of Bootstrap's CSS
@import "bootstrap/scss/bootstrap"

main.jsにscssとbootstrapのJSをインポート

• main.jsにscssとbootstrapのJSをインポートします。

main.js

import './assets/main.css'
+ import './assets/styles.scss'
+ // Import all of Bootstrap's JS
+ import * as bootstrap from 'bootstrap'

vueの初期AboutViewにBootstrapのAccordionをコピペ

AboutView.vue

<template>
<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
</div>
</template>

BootstrapのAccordionが表示されました。

Bootstrapは全てが動くわけではない。

BootstrapのPopoverなど、Vuetifyと機能がかぶるものは動かないものもあるようです。
VuetifyのJSの機能を優先させ、BootstrapはCSSのみ使いたいというのであれば、main.jsでBootstrapのImportをコメントアウトするか、一部だけ有効にした方が良いです。