ViteプラグインとしてのQuasarを使ってみる

2022年9月7日 09:31

こんにちは。株式会社レスキューナウでエンジニアをしている金子です。

今までクライアントアプリで主にバックエンドを触ることが多かったんですが、縁がありwebアプリ開発に携われることになったので、チームで採用しているQuasarをサンプルプロジェクトに追加して触ってみました。

プロジェクト作成

適当にサンプルプロジェクトを作ります。

yarn create vite

vue、typescriptで作りました。
このyarnとviteによるプロジェクト作成方法も最近知りましたが楽すぎて無駄にプロジェクト作ってます。

導入

vue同様公式ページのドキュメントが豊富ですので、一通り読んでみるといいと思います。

導入についてはこちらのページに記載されています。

今回はviteのプラグインとして追加します。
まずはインストール。
公式ではyarn、npm、pnpmでの方法を紹介していますが、私はyarnを使いました。

$ yarn add quasar @quasar/extras
$ yarn add -D @quasar/vite-plugin sass@1.32.12

インストールしたら、作っておいたサンプルプロジェクトに適用していきます。

// FILE: main.ts

import { createApp } from 'vue'
import { Quasar } from 'quasar'

// Import icon libraries
import '@quasar/extras/material-icons/material-icons.css'

// Import Quasar css
import 'quasar/src/css/index.sass'

// Assumes your root component is App.vue
// and placed in same folder as main.js
import App from './App.vue'

const myApp = createApp(App)

myApp.use(Quasar, {
  plugins: {}, // import Quasar plugins and add here
})

// Assumes you have a <div id="app"></div> in your index.html
myApp.mount('#app')

// FILE: vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { quasar, transformAssetUrls } from '@quasar/vite-plugin'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue({
      template: { transformAssetUrls }
    }),

    quasar({
      sassVariables: 'src/quasar-variables.sass'
    })
  ]
})

quasar-variables.sassは作ったプロジェクトにはないので作成する。

src/quasar-variables.sass

$primary   : #1976D2
$secondary : #26A69A
$accent    : #9C27B0

$dark      : #1D1D1D

$positive  : #21BA45
$negative  : #C10015
$info      : #31CCEC
$warning   : #F2C037

適用すると早速変化します。
まずは未適用のページがこちらです。

適用したらこんな感じになります。

Layout Builderを使う

これだけだとなんともという感じですので、レイアウトを試してみます。
Quasarのサイト上部にある「toots」の中に「Layout Builder」というものがあるのでアクセスします。

5種類のパーツを選択し、調整し、確認してEXPORTする流れだと思いますが、どの段階でもEXPORTできますので、今回はHeaderとHeaderの中にTabをつけるのと、Footerを選んでEXPORTして、サンプルプロジェクトのApp.vueに反映しました。

<template>
  <q-layout view="hHh lpR fFr">

    <q-header elevated class="bg-primary text-white">
      <q-toolbar>
        <q-toolbar-title>
          <q-avatar>
            <img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg">
          </q-avatar>
          header
        </q-toolbar-title>
      </q-toolbar>

      <q-tabs align="left">
        <q-route-tab to="/page1" label="Page One" />
        <q-route-tab to="/page2" label="Page Two" />
        <q-route-tab to="/page3" label="Page Three" />
      </q-tabs>
    </q-header>

    <q-page-container>
      <router-view />
      <div class="contets">
        <a href="https://vitejs.dev" target="_blank">
          <img src="/vite.svg" class="logo" alt="Vite logo" />
        </a>
        <a href="https://vuejs.org/" target="_blank">
          <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
        </a>
      </div>
      <HelloWorld msg="Vite + Vue" />
    </q-page-container>

    <q-footer elevated class="bg-grey-8 text-white">
      <q-toolbar>
        <q-toolbar-title>
          <!-- <q-avatar>
            <img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg">
          </q-avatar> -->
          Rescuenow
        </q-toolbar-title>
      </q-toolbar>
    </q-footer>

  </q-layout>
</template>

適用した結果がこちらです。

まとめ

書き出しにも書きましたが、筆者は長いことクライアントアプリの特にバックエンドを触ってきましたが、いい機会を得れてwebアプリのフロント、バックエンド両方に携わることになりました。デザインには疎いですが、触っていて楽しいというのはモチベーションになります。

今回は単にQuasarをUIフレームワークとして紹介しましたが、Quasar CLIではweb開発に必要十分なコンポーネントなどを提供し、一つのコードで複数のプラットフォームに展開できる機能を提供しているようです。
viteなどとの連携も強化しているようですので、楽しみです。

今回は比較などしませんでしたので、他のフレームワークについても調べて機会があれば記事にできればと思います。

最後まで読んでいただきありがとうございました。

最後に

現在、レスキューナウでは、災害情報の提供、災害情報を活用した安否確認サービスなどのWebサービスの開発エンジニアを募集しています！
社員・フリーランスに関わらず、参画後に安心してご活躍できることを目指し、応募された方の特性・ご希望にマッチしたチームをご紹介します。
ちょっと話を聞いてみたい、ぜひ応募したい、など、当社にご興味を持っていただけましたら、お気軽にエントリーください！！