🔖

【Vue】QuasarでもVuetifyのコンポーネントが使いたかった【Vuetify】

2023/06/30に公開

Vue.js

発端

趣味で作っているみちくさびゅあーは二代目がVuetify、三代目がQuasarで作られている。

二代目→https://movue.iranika.info/#/
三代目→https://momoco.iranika.info/#/

Quasar版を作るきっかけになったのは、VuetifyのVue3対応遅れ。
そのあたりの色々はCi-enのブログにも書いたが、2023年になりようやくVuetifyもVue3に対応した。
めでたい。

そこで、Quasar版の三代目を実装した際に違和感を感じていたq-headerコンポーネントをVuetifyのToolbarで実装し直そうと思った。

QuasarでVuetifyのコンポーネントを使う準備

まずはQuasarのプロジェクトを作る。

yarn create quasar

今回は私的によく使うVite、Typescriptなプロジェクトを前提に話を進める。
次にVuetifyをプロジェクトに追加する。

※作成したプロジェクトのディレクトリに移動して

yarn add vuetify@^3.3.6

ここからが本題。
Quasarにはbootという仕掛けがあって、今回はそれを使ってVuetifyを使えるようにする。

Vuetifyのマニュアルセットアップを参考にして、src\boot\vuetify.tsを作る。
iconの設定などは好みでどうぞ

// ./src/boot/vuetify.ts
import { boot } from 'quasar/wrappers';
import 'vuetify/styles';
import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';
import { aliases, mdi } from 'vuetify/iconsets/mdi'

export default boot(({ app }) => {
  const vuetify = createVuetify({
    components,
    directives,
    icons: {
      defaultSet: 'mdi',
      aliases,
      sets: {
        mdi,
      },
    },
  })

  app.use(vuetify).mount('#app');
});

そしたら、上記をBootで呼び出すようにquasar.config.jsのbootに'vuetify'を追加する。
※これでbootディレクトリ配下のvuetify.tsを呼び出すようになる

~略~
    // app boot file (/src/boot)
    // --> boot files are part of "main.js"
    // https://v2.quasar.dev/quasar-cli-vite/boot-files
    boot: [
      'i18n',
      'axios',
      'vuetify' //// ←これを追加した
    ],
~略~

あとはQuasarのコンポーネントと同じように呼び出せばいい。

ただ、Vuetify3にはv-layoutという新しい概念な奴がいたり、Vuetify3のドキュメントを読み直す必要があるので、Vuetify2の知識のままだとハマるポイントが結構ありそうだと思った。

終。

発端

QuasarでVuetifyのコンポーネントを使う準備

Discussion