Quasar Framework Generator

Create a Quasar Framework application using Quasar CLI:

Quasar CLI を使用して Quasar Framework アプリケーションを作成します。

npm i -g @quasar/cli
npm init quasar
cd my-app

It will ask you some questions, you can use these answers:


What would you like to build ? App with Quasar CLI, let's go!
Project folder: my-app
Pick Quasar version: Quasar v2 (Vue 3 | latest and greatest)
Pick script types: Typescript
Pick Quasar App CLI variant: Quasar App CLI with Vite
Package name: my-app
Pick a Vue component style: Composition API with <script setup>
Check the features needed for your project: ESLint / State Management (Pinia) / Vue-i18n
Pick an ESLint Preset: Prettier

Install the required dependencies:


npm install dayjs qs @types/qs

In the app directory, generate the files for the resource you want:

app ディレクトリで、必要なリソースのファイルを生成します。

npm init @api-platform/client https://demo.api-platform.com src/ -- --generator quasar --resource foo

Replace the URL by the entrypoint of your Hydra-enabled API. You can also use an OpenAPI documentation with https://demo.api-platform.com/docs.json and -f openapi3.

URL を Hydra 対応 API のエントリポイントに置き換えます。https://demo.api-platform.com/docs.json および -f openapi3 を使用して OpenAPI ドキュメントを使用することもできます。

Omit the resource flag to generate files for all resource types exposed by the API.

API によって公開されるすべてのリソース タイプのファイルを生成するには、リソース フラグを省略します。

Note: Make sure to follow the result indications of the command to register the routes and the translations.

注: コマンドの結果表示に従って、ルートと変換を登録してください。

Import common translations:


// src/i18n/en-US/index.ts
import common from './common';

export default {
  // ...

Finally, make sure to update the config:


// quasar.conf.js
framework: {
  plugins: ['Notify'],
  config: {
    // ...
    notify: {
      position: 'top',
      multiLine: true,
      timeout: 0,

You can launch the server with:


quasar dev

Go to http://localhost:9000/books/ to start using your app.

http://localhost:9000/books/ に移動して、アプリの使用を開始します。

Note: In order to Mercure to work with the demo, you have to use the port 3000.

注: Mercure がデモを操作するには、ポート 3000 を使用する必要があります。