投稿日： 2019年9月8日
最終更新日： 2023年3月28日

【Vue.jsのUIフレームワーク】Electronアプリのデザインフレームワークに「Quasar」をインストール・導入する方法

YouTubeも見てね♪

Anker PowerCor

Anker PowerCore モバイルバッテリー 20000mAh iPhone iPad Android

created by Rinker

Anker

¥3,990 (2025/01/05 12:09:11時点 Amazon調べ-詳細)

旅行には必須の大容量モバイルバッテリー！

【最新機種】GoPro hero11 Black

【最新機種】GoPro HERO13 Black【完全防水】

created by Rinker

¥61,300 (2025/01/05 20:59:47時点楽天市場調べ-詳細)

最新機種でVlogの思い出を撮影しよう！

[ノースフェイス] THE NORTH FACE メンズアウターマウンテンライトジャケット

created by Rinker

THE NORTH FACE(ザノースフェイス)

¥33,000 (2025/01/05 13:22:08時点 Amazon調べ-詳細)

防水暴風で耐久性抜群なので旅行で大活躍です！

ペヤングソースやきそば 120g×18個

created by Rinker

ペヤング

¥3,280 (2025/01/05 12:33:38時点 Amazon調べ-詳細)

とりあえず保存食として買っておけば間違いなし！

モンスターエナジー 355ml×24本 [エナジードリンク]

アサヒ飲料モンスターエナジー 355ml×24本 [エナジードリンク]

created by Rinker

モンスター

¥4,718 (2025/01/05 12:33:40時点 Amazon調べ-詳細)

脳を活性化させるにはこれ！

Bauhutte ( バウヒュッテ ) 昇降式 L字デスクブラック BHD-670H-BK

created by Rinker

Bauhutte(バウヒュッテ)

¥15,855 (2025/01/05 12:09:12時点 Amazon調べ-詳細)

メインデスクの横に置くのにぴったりなおしゃれな可動式ラック！

サンディスク microSD 128GB

サンディスク microSD 128GB UHS-I Class10 Nintendo Switch SanDisk Ultra SDSQUA4-128G-EPK

created by Rinker

SanDisk

¥3,279 (2025/01/05 12:33:41時点 Amazon調べ-詳細)

スマホからSwitchまで使える大容量MicroSDカード！

目次 [閉じる]

1 VueのUIフレームワークは「Quasar」で決まり
2 やり方
3 終わりに

VueのUIフレームワークは「Quasar」で決まり

沢山あって迷う問題

先日、Vue.jsを使う中で、UIフレームワークを何にするかで悩みました。

Vuetify やBootstrap-Vue 、Buefy 、Element などなど、様々なものがありますが、その中でもQuasarがダントツで使いやすい&コンポーネントの数が膨大だったので使ってみる事にしました。

Quasarとは？

Quasar(クエーサー)とは、マテリアルデザインベースのデザインを簡単に構築することが可能なVue.js製のデザインフレームワークです。

Build high-performance VueJS user interfaces in record timeQuasar Framework

使いやすさやデザインはもちろんですが、何よりコンポーネントの数が圧倒的に多いのが特徴だと思います。

どんなものがあるかはドキュメントを見ていただければなと思います。

vue-cliで簡単にプロジェクトに導入可能

また、このQuasarはvue-cliによる導入に対応しているのでコマンドラインからさくッと導入することが出来ます。

今回は実際に導入してみましたので手順を紹介しようと思います。

やり方

quasar-frameworkの導入

まずはyarnからインストールしましょう。

yarn add v1.17.3
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > sass-loader@7.3.1" has unmet peer dependency "webpack@^3.0.0 || ^4.0.0".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ quasar-framework@0.17.20
info All dependencies
└─ quasar-framework@0.17.20
$ electron-builder install-app-deps
  • electron-builder  version=21.2.0
✨  Done in 5.41s.

yarn add v1.17.3

[1/4] 🔍 Resolving packages...

[2/4] 🚚 Fetching packages...

[3/4] 🔗 Linking dependencies...

warning " > sass-loader@7.3.1" has unmet peer dependency "webpack@^3.0.0 || ^4.0.0".

[4/4] 🔨 Building fresh packages...

success Saved lockfile.

success Saved 1 new dependency.

info Direct dependencies

└─ quasar-framework@0.17.20

info All dependencies

└─ quasar-framework@0.17.20

$ electron-builder install-app-deps

• electron-builder version=21.2.0

✨ Done in 5.41s.

コンポーネント利用の追加

次に、Vue.jsでquasarを利用する記述をmain.tsに追加しましょう。

...
(略)
...
import Quasar, * as All from 'quasar-framework/dist/quasar.mat.esm.js'
require('quasar-framework/dist/umd/quasar.mat.min.css')

Vue.use(Quasar, {
  components: All
})
...
(略)
...

...

(略)

...

import Quasar, * as All from 'quasar-framework/dist/quasar.mat.esm.js'

require('quasar-framework/dist/umd/quasar.mat.min.css')

Vue.use(Quasar, {

components: All

})

...

(略)

...

これで各コンポーネントでimportすることなくquasarのコンポーネントを使えるようになりました♪

確認

では、試しにButtonコンポーネントを使ってみましょう。

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>

    <q-btn label="My Button"/> <!-- ★追加 -->
  </div>
</template>
...
(略)
...

<q-btn label="My Button"/>

</div>

</template>

...

(略)

...

無事にコンポーネントが表示されましたね♪

vue-cliとyarnで扱えるバージョンが違う

無事にquasarのコンポーネントが使えるようになりましたが、yarnでquasarをインストールすると、バージョンがv0.17系になってしまいます。

最新版はv1系がすでにリリースされているので、ドキュメントに記載されているコンポーネントを使おうとすると存在しないコンポーネントがあるのでうまく動かなくなってしまいます。

なので、先ほどの修正を戻した上でvue-cli経由でquasarをインストールし直そうと思います。

📦  Installing vue-cli-plugin-quasar...

yarn add v1.17.3
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 16 new dependencies.
info Direct dependencies
├─ @quasar/extras@1.3.1
├─ babel-plugin-transform-imports@1.5.0
├─ quasar@1.1.0
├─ stylus-loader@3.0.2
├─ stylus@0.54.7
└─ vue-cli-plugin-quasar@1.0.0
info All dependencies
├─ @quasar/extras@1.3.1
├─ babel-plugin-transform-imports@1.5.0
├─ babel-types@6.26.0
├─ css-parse@2.0.0
├─ is-invalid-path@0.1.0
├─ is-valid-path@0.1.1
├─ lodash.camelcase@4.3.0
├─ lodash.clonedeep@4.5.0
├─ lodash.findkey@4.6.0
├─ lodash.snakecase@4.1.1
├─ quasar@1.1.0
├─ stylus-loader@3.0.2
├─ stylus@0.54.7
├─ to-fast-properties@1.0.3
├─ vue-cli-plugin-quasar@1.0.0
└─ when@3.6.4
$ electron-builder install-app-deps
  • electron-builder  version=21.2.0
✨  Done in 16.02s.
✔  Successfully installed plugin: vue-cli-plugin-quasar

? Allow Quasar to replace App.vue, About.vue, Home.vue and (if available) router.js? Yes
? Treeshake Quasar? (you'll need to import the components, directives and plugins that you use yourself) Yes
? Use RTL support? No
? Choose Quasar Icon Set Material
? Quasar language pack - one from https://github.com/quasarframework/quasar/tree/dev/quasar/lang ja
? Select features: Material, Fontawesome

🚀  Invoking generator for vue-cli-plugin-quasar...
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-quasar
   The following files have been updated / added:

     src/layouts/Default.vue
     src/quasar.js
     src/styles/quasar.styl
     src/styles/quasar.variables.styl
     babel.config.js
     package.json
     public/favicon.ico
     src/App.vue
     src/assets/logo.png
     src/main.ts
     src/router.ts
     src/views/About.vue
     src/views/Home.vue
     vue.config.js
     yarn.lock

   You should review these changes with git diff and commit them.

 INFO  quasar
                       Documentation can be found at: https://quasar.dev

         Quasar is relying on donations to evolve. We'd be very grateful
          if you can read our manifest on "Why donations are important":
                                           https://quasar.dev/why-donate
         Donation campaign: https://donate.quasar.dev Any amount is very
                welcomed. If invoices are required, please first contact
                                                       razvan@quasar.dev

             Please give us a star on Github if you appreciate our work:
                               https://github.com/quasarframework/quasar

                                                    Enjoy! - Quasar Team

📦 Installing vue-cli-plugin-quasar...

yarn add v1.17.3

[1/4] 🔍 Resolving packages...

[2/4] 🚚 Fetching packages...

[3/4] 🔗 Linking dependencies...

[4/4] 🔨 Building fresh packages...

success Saved lockfile.

success Saved 16 new dependencies.

info Direct dependencies

├─ @quasar/extras@1.3.1

├─ babel-plugin-transform-imports@1.5.0

├─ quasar@1.1.0

├─ stylus-loader@3.0.2

├─ stylus@0.54.7

└─ vue-cli-plugin-quasar@1.0.0

info All dependencies

├─ @quasar/extras@1.3.1

├─ babel-plugin-transform-imports@1.5.0

├─ babel-types@6.26.0

├─ css-parse@2.0.0

├─ is-invalid-path@0.1.0

├─ is-valid-path@0.1.1

├─ lodash.camelcase@4.3.0

├─ lodash.clonedeep@4.5.0

├─ lodash.findkey@4.6.0

├─ lodash.snakecase@4.1.1

├─ quasar@1.1.0

├─ stylus-loader@3.0.2

├─ stylus@0.54.7

├─ to-fast-properties@1.0.3

├─ vue-cli-plugin-quasar@1.0.0

└─ when@3.6.4

$ electron-builder install-app-deps

• electron-builder version=21.2.0

✨ Done in 16.02s.

✔ Successfully installed plugin: vue-cli-plugin-quasar

? Allow Quasar to replace App.vue, About.vue, Home.vue and (if available) router.js? Yes

? Treeshake Quasar? (you'll need to import the components, directives and plugins that you use yourself) Yes

? Use RTL support? No

? Choose Quasar Icon Set Material

? Quasar language pack - one from https://github.com/quasarframework/quasar/tree/dev/quasar/lang ja

? Select features: Material, Fontawesome

🚀 Invoking generator for vue-cli-plugin-quasar...

⚓ Running completion hooks...

✔ Successfully invoked generator for plugin: vue-cli-plugin-quasar

The following files have been updated / added:

src/layouts/Default.vue

src/quasar.js

src/styles/quasar.styl

src/styles/quasar.variables.styl

babel.config.js

package.json

public/favicon.ico

src/App.vue

src/assets/logo.png

src/main.ts

src/router.ts

src/views/About.vue

src/views/Home.vue

vue.config.js

yarn.lock

You should review these changes with git diff and commit them.

INFO quasar

Documentation can be found at: https://quasar.dev

Quasar is relying on donations to evolve. We'd be very grateful

if you can read our manifest on "Why donations are important":

https://quasar.dev/why-donate

Donation campaign: https://donate.quasar.dev Any amount is very

welcomed. If invoices are required, please first contact

razvan@quasar.dev

Please give us a star on Github if you appreciate our work:

https://github.com/quasarframework/quasar

Enjoy! - Quasar Team

すると、プロジェクト全体が自動で修正されます。

次、プロジェクトルートに作成されたquasar.jsをmain.tsからimportします。

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './registerServiceWorker';
import './quasar'; // 追加

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');