Quaserについて

概要

Quasar Frameworkは、Vue.jsベースのフルスタックフレームワークであり、SPA、SSR PWA、モバイルアプリ、デスクトップアプリなど、多くのプラットフォーム向けにアプリケーションを構築するためのツールを提供する。
公式ドキュメント：
https://quasar.dev/
導入方法：
https://quasar.dev/start/vite-plugin

基本的なQuasarコンポーネントの使用

Quaserは多くのUIコンポーネントを提供しており、これらを利用することで迅速にアプリケーションを構築することができる。

Quaserのボタンコンポーネントを使用する方法

<script setup>
defineProps({
  title: {
    type: String,
    required: true
  },
  content: {
    type: String,
    default: "Default content"
  }
})
</script>

Nuxt3とQuasarの統合

Nuxt3でもQuaserを使用できる。
以下の手順でNuxt3プロジェクトにQuasarを追加する。

Nuxt3プロジェクトの作成

まずは、Nuxt3プロジェクトを作成する。

npx nuxi init my-nuxt-app
cd my-nuxt-app
npm install

Quasarのインストール

Nuxt3プロジェクトにQuasarを追加する。

npm install quasar @quasar/extras

Quaserの設定

QuaserをNuxt3プロジェクトに統合するための設定を行う。
1.'quasar.config.js'ファイルを作成してQuasarの設定を行う。

import { Quasar } from 'quasar'
import iconSet from 'quasar/icon-set/fontawesome-v5'

export default {
  framework: {
    iconSet: iconSet,
    plugins: {}
  }
}

2.nuxt.config.tsファイルにQuasarをインポートし、プラグインとして追加する。

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  css: [
    'quasar/dist/quasar.prod.css'
  ],
  build: {
    transpile: ['quasar']
  },
  vite: {
    plugins: [
      Quasar()
    ]
  }
})

3.Quasarのスタイルとアイコンを設定する。

@import 'quasar/src/css/index.sass';
@import 'quasar/src/css/flex-addon.sass';

Quasarコンポーネントの使用

Nuxt3プロジェクト内でQuasarのコンポーネントを使用できる。

<template>
  <q-btn label="Click Me" color="primary" @click="handleClick" />
</template>

<script setup>
const handleClick = () => {
  alert('Button clicked!')
}
</script>