Vue.jsのフレームワーク　Nuxt.jsとQuasarの比較

概要 #

Vue.js はフロントエンド開発のための、JavaScript フレームワークです。

ですが、その Vue.js をラッピングしているフレームワーク、Nuxt.js と Quasar が存在しています。

現在 Nuxt.js のほうが知名度が高いですが、Quasar も Nuxt も違う特徴が存在しており、Nuxt.js の方が人気が高いからと言って直ぐにそれを使うのは早計です。

Nuxt.js の特徴 #

Nuxt.js は、Vue.js のフレームワークであり Vue.js アプリケーションの開発を効率化することができ、Vue.js アプリケーション必要な構成が事前に用意されています。また Vue.js 単体では厳しい SSR、SPA、PWA、静的サイト、の作成が容易になります。

Nuxt CLI で CSS フレームワークやテストツールを事前設定することができ、
初心者にもお勧めできる Vue.js フレームワークです。

主な機能 #

• 自動トランスパイルとバンドル
• ホットモジュールの交換
• サーバーサイドレンダリングまたはシングルページアプリまたは静的生成

Nuxt CLI #

Nuxt.js はコマンドラインツールを提供しており(Nuxt CLI)、これを利用することで開発工数を短縮できます。

Nuxt CLI で作成したアプリケーションで簡単に追加できる項目として以下があります。
事前に設定できる項目としては以下があります。

• パッケージマネージャー

  • Yarn
  • Npm

• プログラミング言語

  • JavaScript
  • TypeScript

• UI フレームワーク

  • None (feel free to add one later)
  • Ant Design Vue
  • BalmUI
  • Bootstrap
  • Buefy
  • Chakra UI
  • Element
  • Framevuerk
  • Oruga
  • Tachyons
  • Tailwind CSS
  • Vant
  • View UI
  • Vuesax
  • Vuetify
  • Nuxt モジュール
  • Axios - Promise based HTTP client
  • Progressive Web App (PWA)
  • Content - Git-based headless CMS

• リントルール

  • ESLint
  • Prettier
  • Lint staged files
  • StyleLint
  • Commitlint

• テスティングフレームワーク

  • None
  • Jest
  • AVA
  • WebdriverIO
  • Nightwatch

• レンダリング方法

  • Universal (SSR / Static)
  • SPA

• デプロイ先

  • Server (Node.js hosting)
  • Static (Static/JAMStack hosting)

• デベロップメントツール

  • jsconfig.json
  • Semantic PR
  • Dependabot (for GitHub only)

• 継続的インテグレーション

  • GitHub Actions

設定可能な項目が多く、煩わしいモジュール選定や適用作業を省くことが可能です。

Quasar の特徴 #

Quasar は非常に多くのレンダリングとアプリケーションイメージを提供します。 提供している主な機能としては以下の通りです。

主な機能 #

• SPA（シングルページアプリ）
• SSR（サーバー側レンダリングアプリ）
• PWA（プログレッシブウェブアプリ）
• ハイブリッドモバイルアプリ
• エレクトロンアプリ

Nuxt より豊富かと思います、少しもったいないのが静的サイトの作成ができないことです。 しかしエレクトロンアプリが作成できるの、js フレームワークの中でも Quasar にしかない特徴です。 Quasar は独自の CSS を適用されており、Vuetify/bootstrap/tailwind などの CSS の適用を行うと Quasar の機能の大部分は使えなくなります。

まとめ #

それぞれ特徴がありますが、Quasar はエレクトロンアプリを開発できるのが最大のメリットになっています。 反対に Nuxt.js はエレクトロンアプリの開発はできないが、様々な開発を助ける機能が多彩に備わっています。 vue.js でエレクトロンアプリ開発をしたい場合は、Quasar を使えばいいと思います。 またデザインについても Quasar は選択肢を持ちません。Quasar 独自の CSS を使うしかありません。 反対に Nuxt は vuetify/bootstrap/tailwind などの css フレームワークを使用できます。