Quasar

https://quasar.dev
Admin
Quasar is an enterprise-ready cross-platform Vue.js framework that enables building web, mobile,...
Tokens:1,007,295
Snippets:5,851
Trust Score:9.9
Update:1 month ago
Show doc for...
Tokens:
Raw
### Start dev server with Bun

Source: https://quasar.dev/start/quick-start.md

Navigate into the project folder and run the Quasar CLI command to start the dev server. Use the global CLI if installed, otherwise use the local command.

```bash
# if you have the global CLI:
quasar dev

# otherwise:

bun run dev
# to run a local Quasar CLI command:
bun quasar dev
```

--------------------------------

### Start dev server with PNPM

Source: https://quasar.dev/start/quick-start.md

Navigate into the project folder and run the Quasar CLI command to start the dev server. Use the global CLI if installed, otherwise use the local command.

```bash
# if you have the global CLI:
quasar dev

# otherwise:

pnpm run dev
# to run a local Quasar CLI command:
pnpm quasar dev
```

--------------------------------

### Install ofetch with PNPM or Bun

Source: https://quasar.dev/quasar-cli-vite/fetching-data.md

Install the ofetch package with either the PNPM or Bun package manager. The example uses ofetch, but the pattern is the same for any HTTP client such as axios.create() or a custom fetch wrapper.

```bash
pnpm add ofetch
```

```bash
bun add ofetch
```

--------------------------------

### Create project with Bun

Source: https://quasar.dev/quasar-cli-vite/creating-a-quasar-app-vite-project-folder.md

Install @quasar/cli globally if needed, then run bun create quasar@latest to start the project creation wizard. Choose 'App with Quasar CLI' when prompted.

```bash
# optional, if you don't have it already:
bun add -g @quasar/cli

# now create the project folder:
bun create quasar@latest
```

--------------------------------

### Create project with PNPM

Source: https://quasar.dev/quasar-cli-vite/creating-a-quasar-app-vite-project-folder.md

Install @quasar/cli globally if needed, then run pnpm create quasar@latest to start the project creation wizard. Choose 'App with Quasar CLI' when prompted.

```bash
# optional, if you don't have it already:
pnpm add -g @quasar/cli

# now create the project folder:
pnpm create quasar@latest
```

--------------------------------

### quasar serve -h: Start HTTP(S) server

Source: https://quasar.dev/quasar-cli-vite/commands-list.md

Shows the help output for the `quasar serve` command, which starts an HTTP(S) server on a folder. It includes usage, options like `--port`, `--hostname`, `--cors`, `--history`, `--https`, and a proxy file example using hono/proxy. Note that `quasar serve` binds to `0.0.0.0` by default and should not be used in production.

```bash
$ quasar serve -h

  Description
    Start a HTTP(S) server on a folder.

  Usage
    $ quasar serve [path]
    $ quasar serve . # serve current folder

    If you serve a SSR dist folder built with Quasar CLI then
    run "node index.js" instead.

  Options
    --port, -p              Port to use (default: 4000)
    --hostname, -H          Address to use (default: 0.0.0.0)
    --silent, -s            Suppress log message
    --cors                  Enable CORS
    --open, -o              Open browser window after starting

    --index, -i <path>      Index url path (default: index.html)
    --history               Use history mode;
                              All requests fallback to /index.html,
                              or whatever "--index" parameter specifies
                              (default: false)

    --https                 Enable HTTPS
    --cert, -C [path]       Path to SSL cert file (Optional)
    --key, -K [path]        Path to SSL key file (Optional)

    --no-color              Disable colored output
    --help, -h              Displays this message

    --proxy, -P [path]      Path to proxy definition file (Optional)

  Proxy file example:
    // https://hono.dev/docs/helpers/proxy
    // "proxy" param is hono/proxy
    export default ({ app, proxy }) => {
      app.get('/proxy/:path', (c) => {
        return proxy('http://some.api.com/' + c.req.param('path'))
      })
}
```

--------------------------------

### Horizontal QStepper with QStepperNavigation

Source: https://quasar.dev/vue-components/stepper.md

Example of a horizontal stepper using QStepperNavigation in the global navigation slot. The navigation includes Continue/Finish and Back buttons that call the stepper's next() and previous() methods via a ref. The step is controlled by a reactive ref initialized to 1.

```vue
<template>
  <div class="q-pa-md">
    <q-stepper v-model="step" ref="stepperRef" color="primary" animated>
      <q-step
        :name="1"
        title="Select campaign settings"
        icon="settings"
        :done="step > 1"
      >
        For each ad campaign that you create, you can control how much you're
        willing to spend on clicks and conversions, which networks and
        geographical locations you want your ads to show on, and more.
      </q-step>

      <!-- ... -->

      <template v-slot:navigation>
        <q-stepper-navigation>
          <q-btn
            @click="$refs.stepperRef.next()"
            color="primary"
            :label="step === 4 ? 'Finish' : 'Continue'"
          />
          <q-btn
            v-if="step > 1"
            flat
            color="primary"
            @click="$refs.stepperRef.previous()"
            label="Back"
            class="q-ml-sm"
          />
        </q-stepper-navigation>
      </template>
    </q-stepper>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const step = ref(1)
</script>
```

--------------------------------

### Vertical QStepper with QStepperNavigation

Source: https://quasar.dev/vue-components/stepper.md

Example of a vertical stepper where each QStep contains its own QStepperNavigation. The navigation buttons directly set the step value. Includes a disabled step and a final step with a Finish button.

```vue
<template>
  <div class="q-pa-md">
    <q-stepper v-model="step" vertical color="primary" animated>
      <q-step
        :name="1"
        title="Select campaign settings"
        icon="settings"
        :done="step > 1"
      >
        For each ad campaign that you create, you can control how much you're
        willing to spend on clicks and conversions, which networks and
        geographical locations you want your ads to show on, and more.

        <q-stepper-navigation>
          <q-btn @click="step = 2" color="primary" label="Continue" />
        </q-stepper-navigation>
      </q-step>

      <q-step
        :name="2"
        title="Create an ad group"
        caption="Optional"
        icon="create_new_folder"
        :done="step > 2"
      >
        An ad group contains one or more ads which target a shared set of
        keywords.

        <q-stepper-navigation>
          <q-btn @click="step = 4" color="primary" label="Continue" />
          <q-btn
            flat
            @click="step = 1"
            color="primary"
            label="Back"
            class="q-ml-sm"
          />
        </q-stepper-navigation>
      </q-step>

      <q-step :name="3" title="Ad template" icon="assignment" disable>
        This step won't show up because it is disabled.
      </q-step>

      <q-step :name="4" title="Create an ad" icon="add_comment">
        Try out different ad text to see what brings in the most customers, and
        learn how to enhance your ads using features like ad extensions. If you
        run into any problems with your ads, find out how to tell if they're
        running and how to resolve approval issues.

        <q-stepper-navigation>
          <q-btn color="primary" label="Finish" />
          <q-btn
            flat
            @click="step = 2"
            color="primary"
            label="Back"
            class="q-ml-sm"
          />
        </q-stepper-navigation>
      </q-step>
    </q-stepper>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const step = ref(1)
</script>
```

--------------------------------

### QStepper with alternative-labels prop

Source: https://quasar.dev/vue-components/stepper.md

Use the `alternative-labels` prop on QStepper to display step labels above the step icons. The example includes a navigation template with Continue/Back buttons that call `$refs.stepperRef.next()` and `previous()`. The `step` ref tracks the current step, and the `:done` prop marks steps as done when `step > 1`.

```vue
<template>
  <div class="q-pa-md">
    <q-stepper
      v-model="step"
      ref="stepperRef"
      alternative-labels
      color="primary"
      animated
    >
      <q-step
        :name="1"
        title="Select campaign settings"
        icon="settings"
        :done="step > 1"
      >
        For each ad campaign that you create, you can control how much you're
        willing to spend on clicks and conversions, which networks and
        geographical locations you want your ads to show on, and more.
      </q-step>

      <!-- ... -->

      <template v-slot:navigation>
        <q-stepper-navigation>
          <q-btn
            @click="$refs.stepperRef.next()"
            color="primary"
            :label="step === 3 ? 'Finish' : 'Continue'"
          />
          <q-btn
            v-if="step > 1"
            flat
            color="primary"
            @click="$refs.stepperRef.previous()"
            label="Back"
            class="q-ml-sm"
          />
        </q-stepper-navigation>
      </template>
    </q-stepper>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const step = ref(1)
</script>
```

--------------------------------

### QStepper with contracted prop

Source: https://quasar.dev/vue-components/stepper.md

Use the `contracted` prop on QStepper to reduce the stepper's width. The tip suggests connecting `contracted` to `$q.screen` for responsive behavior, e.g., `:contracted="$q.screen.lt.md"`. The example includes navigation buttons that use `$refs.stepperRef.next()` and `previous()`.

```vue
<template>
  <div class="q-pa-md">
    <q-stepper
      v-model="step"
      ref="stepperRef"
      contracted
      color="primary"
      animated
    >
      <q-step
        :name="1"
        title="Select campaign settings"
        icon="settings"
        :done="step > 1"
      >
        For each ad campaign that you create, you can control how much you're
        willing to spend on clicks and conversions, which networks and
        geographical locations you want your ads to show on, and more.
      </q-step>

      <!-- ... -->

      <template v-slot:navigation>
        <q-stepper-navigation>
          <q-btn
            @click="$refs.stepperRef.next()"
            color="primary"
            :label="step === 3 ? 'Finish' : 'Continue'"
          />
          <q-btn
            v-if="step > 1"
            flat
            color="primary"
            @click="$refs.stepperRef.previous()"
            label="Back"
            class="q-ml-sm"
          />
        </q-stepper-navigation>
      </template>
    </q-stepper>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const step = ref(1)
</script>
```

--------------------------------

### Stepper with header navigation and reset

Source: https://quasar.dev/vue-components/stepper.md

Use this Vue 3 component to create a QStepper with `header-nav` enabled, allowing users to click step headers to navigate. It includes a reset button that clears the done flags and returns to the first step. The example uses three steps with captions and done indicators.

```vue
<template>
  <div class="q-pa-md">
    <q-btn
      label="Reset"
      push
      color="white"
      text-color="primary"
      @click="reset"
      class="q-mb-md"
    />

    <q-stepper v-model="step" header-nav color="primary" animated>
      <q-step
        :name="1"
        title="Select campaign settings"
        icon="settings"
        :done="done1"
      >
        For each ad campaign that you create, you can control how much you're
        willing to spend on clicks and conversions, which networks and
        geographical locations you want your ads to show on, and more.

        <q-stepper-navigation>
          <q-btn
            @click="
              () => {
                done1 = true
                step = 2
              }
            "
            color="primary"
            label="Continue"
          />
        </q-stepper-navigation>
      </q-step>

      <q-step
        :name="2"
        title="Create an ad group"
        caption="Optional"
        icon="create_new_folder"
        :done="done2"
      >
        An ad group contains one or more ads which target a shared set of
        keywords.

        <q-stepper-navigation>
          <q-btn
            @click="
              () => {
                done2 = true
                step = 3
              }
            "
            color="primary"
            label="Continue"
          />
          <q-btn
            flat
            @click="step = 1"
            color="primary"
            label="Back"
            class="q-ml-sm"
          />
        </q-stepper-navigation>
      </q-step>

      <q-step :name="3" title="Create an ad" icon="add_comment" :done="done3">
        Try out different ad text to see what brings in the most customers, and
        learn how to enhance your ads using features like ad extensions. If you
        run into any problems with your ads, find out how to tell if they're
        running and how to resolve approval issues.

        <q-stepper-navigation>
          <q-btn color="primary" @click="done3 = true" label="Finish" />
          <q-btn
            flat
            @click="step = 2"
            color="primary"
            label="Back"
            class="q-ml-sm"
          />
        </q-stepper-navigation>
      </q-step>
    </q-stepper>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const step = ref(1)
const done1 = ref(false)
const done2 = ref(false)
const done3 = ref(false)

function reset() {
  done1.value = false
  done2.value = false
  done3.value = false
  step.value = 1
}
</script>
```

--------------------------------

### Linear header navigation with reset button

Source: https://quasar.dev/vue-components/stepper.md

A stepper with header navigation enabled. The reset button sets the step back to 1. Each step uses the 'done' and 'header-nav' props to control navigation. The script setup uses a ref for the current step.

```vue
<template>
  <div class="q-pa-md">
    <q-btn
      label="Reset"
      push
      color="white"
      text-color="primary"
      @click="step = 1"
      class="q-mb-md"
    />

    <q-stepper v-model="step" header-nav color="primary" animated>
      <q-step
        :name="1"
        title="Select campaign settings"
        icon="settings"
        :done="step > 1"
        :header-nav="step > 1"
      >
        For each ad campaign that you create, you can control how much you're
        willing to spend on clicks and conversions, which networks and
        geographical locations you want your ads to show on, and more.

        <q-stepper-navigation>
          <q-btn
            @click="
              () => {
                done1 = true
                step = 2
              }
            "
            color="primary"
            label="Continue"
          />
        </q-stepper-navigation>
      </q-step>

      <q-step
        :name="2"
        title="Create an ad group"
        caption="Optional"
        icon="create_new_folder"
        :done="step > 2"
        :header-nav="step > 2"
      >
        An ad group contains one or more ads which target a shared set of
        keywords.

        <q-stepper-navigation>
          <q-btn
            @click="
              () => {
                done2 = true
                step = 3
              }
            "
            color="primary"
            label="Continue"
          />
          <q-btn
            flat
            @click="step = 1"
            color="primary"
            label="Back"
            class="q-ml-sm"
          />
        </q-stepper-navigation>
      </q-step>

      <q-step
        :name="3"
        title="Create an ad"
        icon="add_comment"
        :header-nav="step > 3"
      >
        Try out different ad text to see what brings in the most customers, and
        learn how to enhance your ads using features like ad extensions. If you
        run into any problems with your ads, find out how to tell if they're
        running and how to resolve approval issues.

        <q-stepper-navigation>
          <q-btn color="primary" @click="done3 = true" label="Finish" />
          <q-btn
            flat
            @click="step = 2"
            color="primary"
            label="Back"
            class="q-ml-sm"
          />
        </q-stepper-navigation>
      </q-step>
    </q-stepper>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const step = ref(1)
</script>
```

--------------------------------

### QStepper coloring with done-color, active-color, inactive-color

Source: https://quasar.dev/vue-components/stepper.md

Use the `done-color`, `active-color`, and `inactive-color` props on QStepper to customize step colors. The example sets `done-color="deep-orange"`, `active-color="purple"`, and `inactive-color="secondary"`. The navigation buttons use `deep-orange` to match the done color.

```vue
<template>
  <div class="q-pa-md">
    <q-stepper
      v-model="step"
      ref="stepperRef"
      animated
      done-color="deep-orange"
      active-color="purple"
      inactive-color="secondary"
    >
      <q-step
        :name="1"
        title="Select campaign settings"
        icon="settings"
        :done="step > 1"
      >
        For each ad campaign that you create, you can control how much you're
        willing to spend on clicks and conversions, which networks and
        geographical locations you want your ads to show on, and more.
      </q-step>

      <!-- ... -->

      <template v-slot:navigation>
        <q-stepper-navigation>
          <q-btn
            @click="$refs.stepperRef.next()"
            color="deep-orange"
            :label="step === 3 ? 'Finish' : 'Continue'"
          />
          <q-btn
            v-if="step > 1"
            flat
            color="deep-orange"
            @click="$refs.stepperRef.previous()"
            label="Back"
            class="q-ml-sm"
          />
        </q-stepper-navigation>
      </template>
    </q-stepper>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const step = ref(1)
</script>
```

--------------------------------

### Configure Vitest with Quasar plugin and install Quasar in test utils

Source: https://quasar.dev/start/vite-plugin.md

Vitest setup for Quasar. Keep quasar() in the Vite config that Vitest uses; add it to vitest.config.js if present. Then install Quasar into @vue/test-utils so every mount() gets the $q object.

```js
// vitest.config.js
import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'
import { quasar, transformAssetUrls } from '@quasar/vite-plugin'

export default defineConfig({
  plugins: [vue({ template: { transformAssetUrls } }), quasar()],
  test: {
    environment: 'jsdom'
  }
})
```

```js
import { config, mount } from '@vue/test-utils'
import { Quasar } from 'quasar'

config.global.plugins.unshift([Quasar, {/* Quasar plugin options */}])
```

--------------------------------

### Example create-quasar commands

Source: https://quasar.dev/quasar-cli-vite/creating-a-quasar-app-vite-project-folder.md

Two example commands showing how to create a project with the app template and Vite engine, and with the ae template and multiple presets.

```bash
pnpm create quasar@latest my-app --template app --engine vite-3
pnpm create quasar@latest --template ae --preset prompts --preset oxlint
```

--------------------------------

### PM2 start script

Source: https://quasar.dev/quasar-cli-vite/developing-ssr/deploying.md

To use all server cores, install PM2 and change the start script to use pm2 start index.js.

```json
"scripts": {
  "start": "pm2 start index.js"
}
```

--------------------------------

### Inspect Cordova project state with platform, plugin, requirements, and info commands

Source: https://quasar.dev/quasar-cli-vite/developing-cordova-apps/troubleshooting-and-tips.md

Run these commands from /src-cordova to get a snapshot of the project state when builds start failing after platform or plugin changes. Compare installed versions with /src-cordova/package.json and include cordova info output when reporting issues.

```bash
cordova platform ls
cordova plugin ls
cordova requirements [android|ios]
cordova info
```

--------------------------------

### quasar dev - Start development server

Source: https://quasar.dev/quasar-cli-vite/developing-spa/build-commands.md

Starts the development server for a Quasar SPA. Use this command while developing your application to get hot-reload and other development features.

```bash
quasar dev
```

--------------------------------

### create-quasar CLI usage and options

Source: https://quasar.dev/quasar-cli-vite/creating-a-quasar-app-vite-project-folder.md

Shows the usage, examples, and all available options for the create-quasar command, including --template, --overwrite, --preset, --name, --author, --no-git, --install, --engine, --product, --defaults, --no-color, and --help.

```text
Usage
  [dir] [options]

  # examples:
  my-app --template app --engine vite-3 --defaults
  --template ae --preset prompts --preset oxlint --defaults

Options
  --template, -t  Type of project to create: app | ae
  --overwrite, -o Overwrite existing dir if it exists
  --preset        Preset to apply (can be used multiple times)
                  - template "app" presets:
                    typescript, sass, oxlint, eslint, i18n, pinia, fbr (filename-based routing)
                  - template "ae" presets:
                    typescript, oxlint, prompts, install, uninstall
  --name          Name of the project for package.json (must be a valid npm package name)
  --author        Author name for package.json
  --no-git        Do not initialize a git repository
  --install, -i   When invoked through a package manager it's a boolean (eg. --install)
                  Otherwise, the package manager to auto-install with:
                    --install pnpm
                    --install yarn
                    --install npm
                    --install bun

  --engine, -e    (ONLY for template "app") Quasar App Local CLI to use
                    Please note that these do NOT refer to the version of
                    Vite, but rather to the @quasar/app-vite version to use:
                      vite-3 or vite-2
  --product       (ONLY for template "app") Product name for the app

  --defaults, -d  Use default values for the remaining non-specified options
  --no-color      Disable colored output
  --help, -h      Displays this message
```

--------------------------------

### /quasar.config build.define and defineEnv example

Source: https://quasar.dev/quasar-cli-vite/handling-import-meta-env.md

Example of /quasar.config file with build.define and build.defineEnv. Shows how to define values that will be available via import.meta.env.

```js
build: {
  define: {
    DEFINE_BOOL: JSON.stringify(true),
    DEFINE_STR: JSON.stringify("hello"),
    DEFINE_NUMBER: JSON.stringify(42),
    DEFINE_NULL: JSON.stringify(null),
    DEFINE_ARR: JSON.stringify([1,2,3]),
    DEFINE_OBJ: JSON.stringify({key: "val"})
  },

  defineEnv: {
    DEFINE_ENV_BOOL: true,
    DEFINE_ENV_STR: "hello",
    DEFINE_ENV_NUMBER: 42,
    DEFINE_ENV_NULL: null,
    DEFINE_ENV_ARR: [1,2,3],
    DEFINE_ENV_OBJ: {key:"val"}
  }
}
```

--------------------------------

### Generated package.json start script

Source: https://quasar.dev/quasar-cli-vite/developing-ssr/deploying.md

The generated package.json defines a start script that runs the production Node.js webserver. Copy the distributables folder to the server, install production dependencies, and run this script.

```json
"scripts": {
  "start": "node index.js"
}
```

--------------------------------

### Create a boot file to supply an EventBus (JavaScript, Quasar CLI)

Source: https://quasar.dev/quasar-utils/event-bus-util.md

Shows a convenience boot file that instantiates and provides the EventBus to the app, both for Options API (globalProperties.$bus) and Composition API (app.provide). Register it in quasar.config file's boot array.

```js
import { EventBus } from 'quasar'
import { defineBoot } from '#q-app'

export default defineBoot(({ app }) => {
  const bus = new EventBus()

  // for Options API
  app.config.globalProperties.$bus = bus

  // for Composition API
  app.provide('bus', bus)
})
```

--------------------------------

### TSX in <script setup lang="tsx">

Source: https://quasar.dev/quasar-cli-vite/handling-vite.md

Use TSX inside a <script setup> block in a .vue file by declaring lang="tsx". The example defines a MyBadge component that renders a QBadge.

```html
<script setup lang="tsx">
  import { QBadge } from 'quasar'

  const MyBadge = () => <QBadge color="accent" label="Hello" />
</script>

```

--------------------------------

### Electron main process example (electron-main.ts)

Source: https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-with-typescript.md

Example of the main process file in /src-electron. It creates a BrowserWindow, loads the app URL in dev or index.html in production, and handles devtools and app lifecycle events. Uses #q-app/electron/main helpers.

```javascript
import { BrowserWindow, app } from 'electron'
import path from 'node:path'
import os from 'node:os'
import {
  registerQuasarRuntime,
  resolveElectronAssetsPath
} from '#q-app/electron/main'

// needed in case process is undefined under Linux
const platform = process.platform || os.platform()

async function createWindow() {
  /**
   * Initial window options
   */
  const mainWindow = new BrowserWindow({
    icon: resolveElectronAssetsPath('icons/icon.png'), // Windows and Linux
    width: 1000,
    height: 600,
    useContentSize: true,
    webPreferences: {
      contextIsolation: true,
      // https://v2.quasar.dev/quasar-cli-vite/developing-electron-apps/electron-preload-script
      preload: path.join(import.meta.dirname, 'electron-preload.cjs')
    }
  })

  if (import.meta.env.QUASAR_DEV) {
    await mainWindow.loadURL(import.meta.env.QUASAR_APP_URL)
  } else {
    await mainWindow.loadFile('index.html')
  }

  if (import.meta.env.QUASAR_DEBUG) {
    // if on DEV or Production with debug enabled
    mainWindow.webContents.openDevTools()
  } else {
    // we're on production; no access to devtools pls
    mainWindow.webContents.on('devtools-opened', () => {
      mainWindow?.webContents.closeDevTools()
    })
  }
}

void app.whenReady().then(() => {
  registerQuasarRuntime()
  void createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      void createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (platform !== 'darwin') {
    app.quit()
  }
})
```

--------------------------------

### JSX in <script setup lang="jsx">

Source: https://quasar.dev/quasar-cli-vite/handling-vite.md

Use JSX inside a <script setup> block in a .vue file by declaring lang="jsx". The example defines a MyBadge component that renders a QBadge.

```html
<script setup lang="jsx">
  import { QBadge } from 'quasar'

  const MyBadge = () => <QBadge color="accent" label="Hello" />
</script>
```

--------------------------------

### Create a shared ofetch client in a boot file

Source: https://quasar.dev/quasar-cli-vite/fetching-data.md

Create a boot file that configures a shared API client with ofetch. Register this boot file in the `boot` array of your `quasar.config` file. The client is not suitable for SSR if you add per-user state to it.

```js
import { defineBoot } from '#q-app'
import { ofetch } from 'ofetch'

// Not suitable for SSR if you add per-user state to it. See the SSR considerations section below.
export const apiFetch = ofetch.create({
  baseURL: 'https://api.example.com'
  // you can add interceptors (onRequest, onResponse, ...) and other options here
})

export default defineBoot(({ app }) => {
  // You can use the app instance here if needed
})
```

--------------------------------

### package.json scripts for Quasar commands

Source: https://quasar.dev/start/quasar-cli.md

Example package.json scripts to run Quasar commands without a globally installed @quasar/cli.

```json
"scripts": {
  "dev": "quasar dev",
  "build": "quasar build",
  "build:pwa": "quasar build -m pwa"
}
```

--------------------------------

### Dense QRadio group

Source: https://quasar.dev/vue-components/radio.md

Uses the 'dense' prop on each QRadio to reduce its size. The displayed selection and the script setup are the same as the standard example.

```vue
<template>
  <div class="q-pa-md q-gutter-sm">
    <div class="q-gutter-sm">
      <q-radio dense v-model="shape" val="line" label="Line" />
      <q-radio dense v-model="shape" val="rectangle" label="Rectangle" />
      <q-radio dense v-model="shape" val="ellipse" label="Ellipse" />
      <q-radio dense v-model="shape" val="polygon" label="Polygon" />
    </div>

    <div class="q-px-sm q-pt-sm">
      Your selection is: <strong>{{ shape }}</strong>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const shape = ref('line')
</script>
```

--------------------------------

### Install Oxlint and Oxfmt with Bun

Source: https://quasar.dev/quasar-cli-vite/lint-and-format-code.md

Install the linter and formatter as dev dependencies using Bun.

```bash
bun add -D oxlint oxfmt

```

--------------------------------

### Composition API with script setup - useQuasar

Source: https://quasar.dev/options/the-q-object.md

Shows how to use the $q object in a .vue file with script setup. Import useQuasar from 'quasar' and call it to get $q. The template uses $q.platform.is.ios to conditionally render content. The script logs $q.platform.is.ios and $q.version.

```html
<template>
  <div>
    <div v-if="$q.platform.is.ios"> Gets rendered only on iOS platform. </div>
  </div>
</template>

<script setup>
  import { useQuasar } from 'quasar'

  const $q = useQuasar()

  console.log($q.platform.is.ios)

  // showing an example on a method, but
  // can be any part of Vue script
  function show() {
    // prints out Quasar version
    console.log($q.version)
  }
</script>
```

--------------------------------

### Vue expanded example with q-page-sticky

Source: https://quasar.dev/layout/page-sticky.md

Example showing a layout with a `q-page-sticky` that expands to a toolbar, along with two drawers and a header.

```vue
<template>
  <div class="q-pa-md">
    <q-layout
      view="lHh Lpr lFf"
      container
      style="height: 400px"
      class="shadow-2 rounded-borders"
    >
      <q-header reveal elevated>
        <q-toolbar>
          <q-btn
            aria-label="Toggle left drawer"
            flat
            round
            dense
            icon="menu"
            @click="drawerLeft = !drawerLeft"
          />

          <q-toolbar-title> <strong>Quasar</strong> Framework </q-toolbar-title>

          <q-btn
            aria-label="Toggle right drawer"
            flat
            round
            dense
            icon="menu"
            @click="drawerRight = !drawerRight"
          />
        </q-toolbar>
      </q-header>

      <q-drawer
        aria-label="Left drawer"
        v-model="drawerLeft"
        :width="150"
        :breakpoint="700"
        behavior="desktop"
        bordered
        :class="$q.dark.isActive ? 'bg-grey-9' : 'bg-grey-3'"
      >
        <q-scroll-area class="fit">
          <div class="q-pa-sm">
            <div v-for="n in 50" :key="n">Drawer {{ n }} / 50</div>
          </div>
        </q-scroll-area>
      </q-drawer>

      <q-drawer
        aria-label="Right drawer"
        side="right"
        v-model="drawerRight"
        bordered
        :width="150"
        :breakpoint="500"
        behavior="desktop"
        :class="$q.dark.isActive ? 'bg-grey-9' : 'bg-grey-3'"
      >
        <q-scroll-area class="fit">
          <div class="q-pa-sm">
            <div v-for="n in 50" :key="n">Drawer {{ n }} / 50</div>
          </div>
        </q-scroll-area>
      </q-drawer>

      <q-page-container>
        <q-page padding style="padding-top: 66px">
          <p v-for="n in 15" :key="n">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil
            praesentium molestias a adipisci, dolore vitae odit, quidem
            consequatur optio voluptates asperiores pariatur eos numquam rerum
            delectus commodi perferendis voluptate?
          </p>

          <!-- place QPageSticky at end of page -->
          <q-page-sticky expand position="top">
            <q-toolbar class="bg-accent text-white">
              <q-avatar>
                <img
                  alt="Quasar logo"
                  src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg"
                />
              </q-avatar>
              <q-toolbar-title> Page Title </q-toolbar-title>
            </q-toolbar>
          </q-page-sticky>
        </q-page>
      </q-page-container>
    </q-layout>
  </div>
</template>

<script setup>
import { useQuasar } from 'quasar'
import { ref } from 'vue'

const $q = useQuasar()

const drawerLeft = ref($q.screen.width > 700)
const drawerRight = ref($q.screen.width > 500)
</script>
```

--------------------------------

### Morph a QCard from a QFabAction

Source: https://quasar.dev/quasar-utils/morph-utils.md

This example morphs between a QFabAction and a QCard. It uses the morph function with from and to functions to get the elements, and toggles the card visibility on click.

```vue
<template>
  <div class="q-pa-md relative-position" style="min-height: 300px">
    <div class="absolute-bottom-right q-ma-lg">
      <div
        ref="fabRef"
        class="absolute-center bg-accent"
        style="border-radius: 50%; width: 50%; height: 50%"
      />

      <q-fab
        direction="up"
        icon="add"
        color="accent"
        @update:model-value="val => val && morphState(false)"
      >
        <q-fab-action color="primary" @click="morphState(true)" icon="alarm" />
      </q-fab>
    </div>

    <q-card
      v-if="toggle"
      ref="cardRef"
      class="my-card text-white absolute-center bg-grey-10"
      @click="morphState(false)"
    >
      <q-card-section>
        <div class="text-h6">Our Changing Planet</div>
        <div class="text-subtitle2">by John Doe</div>
      </q-card-section>

      <q-card-section class="q-pt-none">
        {{ lorem }}
      </q-card-section>
    </q-card>
  </div>
</template>

<script setup>
import { morph } from 'quasar'
import { ref, useTemplateRef } from 'vue'

const toggle = ref(false)
const fabRef = useTemplateRef('fabRef')
const cardRef = useTemplateRef('cardRef')

const getFab = () => fabRef.value
const getCard = () => cardRef.value?.$el

const lorem =
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'

function morphState(state) {
  if (state === toggle.value) return

  morph({
    from: toggle.value ? getCard : getFab,
    to: toggle.value ? getFab : getCard,
    onToggle: () => {
      toggle.value = state
    },
    duration: 500
  })
}
</script>
```

--------------------------------

### Fun examples QSplitter with images and resize observer

Source: https://quasar.dev/vue-components/splitter.md

This example shows a QSplitter with two images (one color, one black-and-white) and uses `q-resize-observer` to dynamically adjust the splitter's width and height. The `splitterModel` starts at 50% and the `limits` prop is set to `[0, 100]`.

```vue
<template>
  <div class="overflow-hidden">
    <q-resize-observer @resize="onResize" :debounce="0" />

    <q-splitter
      id="photos"
      v-model="splitterModel"
      :limits="[0, 100]"
      :style="splitterStyle"
      before-class="overflow-hidden"
      after-class="overflow-hidden"
    >
      <template v-slot:before>
        <img
          alt="Landscape photo"
          src="https://cdn.quasar.dev/img/parallax1.jpg"
          :width="width"
          class="absolute-top-left"
        />
      </template>

      <template v-slot:after>
        <img
          alt="Landscape photo in black and white"
          src="https://cdn.quasar.dev/img/parallax1-bw.jpg"
          :width="width"
          class="absolute-top-right"
        />
      </template>
    </q-splitter>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'

const width = ref(400)
const splitterModel = ref(50) // start at 50%

const splitterStyle = computed(() => ({
  height: Math.min(600, 0.66 * width.value) + 'px',
  width: width.value + 'px'
}))

function onResize(info) {
  width.value = info.width
}
</script>
```
Tokens:
Raw