### Basic Install Script Structure

Source: https://quasar.dev/app-extensions/development-guide/install-api

Example of the basic structure for an install script file (`/ae/src/install.js` or `.ts`). This script is optional and executed only during App Extension installation.

```javascript
import { defineInstallScript } from '#q-app'

// can be async
export default defineInstallScript((/* api */) => {})
```

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

### Install Quasar CLI and Create Project

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

Installs the Quasar CLI globally and then creates a new Quasar project using PNPM. This is the recommended way to start a new project.

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

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

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

### Example .env.template File Content

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

This snippet shows an example of a `.env.template` file. It includes the necessary keys but with blank or dummy values, serving as a guide for developers.

```dotenv
DB_HOST=
DB_USER=
DB_PASSWORD=
DB_PORT=
STRIPE_API_KEY=
NODE_ENV=
```

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

### Manage Quasar App Extensions Examples

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

Examples of using the 'quasar ext' command to manage App Extensions. This covers listing installed extensions, adding new ones, removing them, and invoking or uninvoking them without package management.

```bash
# display list of installed extensions
$ quasar ext
```

```bash
# Add Quasar App Extension
$ quasar ext add <ext-id>
```

```bash
# Remove Quasar App Extension
$ quasar ext remove <ext-id>
```

```bash
# Add Quasar App Extension, but
# skip installing the npm package
# (assumes it's already installed)
$ quasar ext invoke <ext-id>
```

```bash
# Remove Quasar App Extension, but
# skip uninstalling the npm package
$ quasar ext uninvoke <ext-id>
```

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

### Basic Timeline Example

Source: https://quasar.dev/vue-components/timeline

A simple example demonstrating the basic usage of the QTimeline component to display events.

```html
<template>
  <q-timeline>
    <q-timeline-entry title="Event Title" subtitle="February 22, 1986">
      Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </q-timeline-entry>

    <q-timeline-entry title="Event Title" subtitle="February 21, 1986" icon="delete">
      Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </q-timeline-entry>

    <q-timeline-entry title="Event Title" subtitle="November, 2017">
      <template v-slot:header>
        <div>November, 2017</div>
      </template>
      Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </q-timeline-entry>

    <q-timeline-entry title="Event Title" subtitle="February 22, 1986">
      Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </q-timeline-entry>

    <q-timeline-entry title="Event Title" subtitle="February 22, 1986">
      Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </q-timeline-entry>

    <q-timeline-entry title="Event Title" subtitle="February 22, 1986" icon="done_all">
      Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </q-timeline-entry>

    <q-timeline-entry title="Event Title" subtitle="February 22, 1986">
      Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </q-timeline-entry>

    <q-timeline-entry title="Event Title" subtitle="February 22, 1986">
      Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </q-timeline-entry>
  </q-timeline>
</template>

<script>
export default {
  name: 'QTimelineBasic'
}
</script>
```

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

### Install Surge CLI

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

Install the Surge command-line interface globally to enable static site deployment.

```bash
npm install -g surge
```

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

### Basic Dialog Example

Source: https://quasar.dev/quasar-plugins/dialog

A simple example demonstrating the basic usage of the Quasar Dialog plugin.

```javascript
import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()
  return () => {
    $q.dialog({
      title: 'Basic Dialog',
      message: 'This is a basic dialog.'
    })
  }
}
```

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

### Install Cordova Camera Plugin

Source: https://quasar.dev/quasar-cli-vite/developing-cordova-apps/cordova-plugins

Install the cordova-plugin-camera plugin by navigating to the /src-cordova directory and running the Cordova command.

```bash
# from /src-cordova:
cordova plugin add cordova-plugin-camera
```

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

### Install Cordova Device Plugin

Source: https://quasar.dev/quasar-cli-vite/developing-cordova-apps/cordova-plugins

Install the 'cordova-plugin-device' plugin by navigating to the '/src-cordova' directory and running the Cordova command.

```bash
# from /src-cordova:
cordova plugin add cordova-plugin-device
```

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

### Basic QDrawer Setup

Source: https://quasar.dev/layout/drawer

Demonstrates a basic QDrawer implementation within a containerized QLayout. This is useful for demoing purposes.

```html
<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-btn flat dense round icon="menu" aria-label="Menu icon" @click="left = !left" />
      </q-toolbar>
    </q-header>

    <q-drawer v-model="left" show-if-above bordered
      :width="200"
      :breakpoint="500"
      elevated
    >
      <q-scroll-area style="height: calc(100% - 97px); margin-top: 100px; border-right: 1px solid #ddd">
        <q-list>
          <q-item clickable v-ripple>
            <q-item-section>
              Menu
            </q-item-section>
          </q-item>
        </q-list>
      </q-scroll-area>
    </q-drawer>

    <q-page-container>
      <q-page padding>
        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?
        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?
        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?
        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?
        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?
        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?
        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?
        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?
        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?
        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?
        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?
        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?
        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?
        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?
        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?
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    return {
      left: ref(false)
    }
  }
}
</script>
```

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

### BEX Background Script with TypeScript

Source: https://quasar.dev/quasar-cli-vite/developing-browser-extensions/bex-with-typescript

Example of a BEX background script using TypeScript. It demonstrates importing the necessary bridge, handling extension installation and click events, declaring BEX event maps, and implementing communication handlers for logging, getting time, and storage operations.

```typescript
/**
 * Importing the file below initializes the extension background.
 *
 * Warnings:
 * 1. Do NOT remove the import statement below. It is required for the extension to work.
 *    If you don't need createBridge(), leave it as "import '#q-app/bex/background'"
 * 2. Do NOT import this file in multiple background scripts. Only in one!
 * 3. Import it in your background service worker (if available for your target browser).
 */
import { createBridge } from '#q-app/bex/background';

function openExtension () {
  chrome.tabs.create(
    {
      url: chrome.runtime.getURL('www/index.html')
    },
    (/* newTab */) => {
      // Tab opened.
    }
  );
}

chrome.runtime.onInstalled.addListener(openExtension);
chrome.action.onClicked.addListener(openExtension);

declare module '@quasar/app-vite' {
  interface BexEventMap {
    log: [{ message: string; data?: any[] }, void];
    getTime: [never, number];

    'storage.get': [string | undefined, any];
    'storage.set': [{ key: string; value: any }, Promise<void>];
    'storage.remove': [string, Promise<void>];
  }
}

/**
 * Call createBridge() to enable communication with the app & content scripts
 * (and between the app & content scripts), otherwise skip calling
 * createBridge() and use no bridge.
 */
const bridge = createBridge({ debug: false });

bridge.on('log', ({ from, payload }) => { 
  console.log(`[BEX] @log from "${ from }"`, payload);
});

bridge.on('getTime', () => {
  return Date.now();
});

bridge.on('storage.get', ({ payload: key }) => {
  const { promise, resolve } = Promise.withResolvers();
  if (key === void 0) {
    chrome.storage.local.get(null, items => {
      // Group the values up into an array to take advantage of the bridge's chunk splitting.
      resolve(Object.values(items));
    });
  } else {
    chrome.storage.local.get([key], items => {
      resolve(items[key]);
    });
  }

  return promise;
});
// Usage:
// bridge.send({
//   event: 'storage.get',
//   to: 'background',
//   payload: 'key' // or omit `payload` to get data for all keys
// }).then((result) => { ... }).catch((error) => { ... });

bridge.on('storage.set', async ({ payload: { key, value } }) => {
  await chrome.storage.local.set({ [key]: value });
});
// Usage:
// bridge.send({
//   event: 'storage.set',
//   to: 'background',
//   payload: { key: 'someKey', value: 'someValue' }
// }).then(() => { ... }).catch((error) => { ... });

bridge.on('storage.remove', async ({ payload: key }) => {
  await chrome.storage.local.remove(key);
});
// Usage:
// bridge.send({
//   event: 'storage.remove',
//   to: 'background',
//   payload: 'someKey'
// }).then(() => { ... }).catch((error) => { ... });

/*
// More examples:

// Listen to a message from the client
bridge.on('test', message => {
  console.log(message);
  console.log(message.payload);
});

// Send a message and split payload into chunks
// to avoid max size limit of BEX messages.
// Warning! This happens automatically when the payload is an array.
// If you actually want to send an Array, wrap it in an Object.
bridge.send({
  event: 'test',
  to: 'app',
  payload: [ 'chunk1', 'chunk2', 'chunk3', ... ]
}).then(responsePayload => { ... }).catch(err => { ... });

// Send a message and wait for a response
bridge.send({
  event: 'test',
  to: 'app',
  payload: { banner: 'Hello from background!' }
}).then(responsePayload => { ... }).catch(err => { ... });

// Listen to a message from the client and respond synchronously
bridge.on('test', message => {
  console.log(message);
  return { banner: 'Hello from background!' };
});

// Listen to a message from the client and respond asynchronously
bridge.on('test', async message => {
  console.log(message);
  const result = await someAsyncFunction();
  return result;
});
bridge.on('test', message => {
  console.log(message)
  const { promise, resolve } = Promise.withResolvers();
  setTimeout(() => {
    resolve({ banner: 'Hello from a content-script!' });
  }, 1000);
  return promise;
});

// Broadcast a message to app & content scripts
bridge.portList.forEach(portName => {
  bridge.send({ event: 'test', to: portName, payload: 'Hello from background!' });
});

// Find any connected content script and send a message to it
const contentPort = bridge.portList.find(portName => portName.startsWith('content@'));
if (contentPort) {
  bridge.send({ event: 'test', to: contentPort, payload: 'Hello from background!' });
}

// Send a message to a certain content script
bridge
  .send({ event: 'test', to: 'content@my-content-script-2345', payload: 'Hello from background!' })
  .then(responsePayload => { ... })
  .catch(err => { ... });

*/
```

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

### Run Documentation Locally

Source: https://quasar.dev/how-to-contribute/contribution-guide

Navigate to the docs directory and start the local development server for the Quasar documentation.

```bash
cd docs
pnpm dev
```

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

### Install Prettier Dependencies (PNPM)

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

Install Prettier and its ESLint integration for code formatting using PNPM. This setup allows ESLint to leverage Prettier for consistent code style.

```bash
pnpm add -D prettier@3 @vue/eslint-config-prettier
```

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

### Router Authentication Boot File Example

Source: https://quasar.dev/quasar-cli-vite/boot-files

Implement router authentication logic within a Quasar boot file. This example shows how to use router.beforeEach to intercept navigation.

```javascript
import { defineBoot } from '#q-app'

export default defineBoot(({ router, store }) => {
  router.beforeEach((to, from, next) => {
    // Now you need to add your authentication logic here, like calling an API endpoint
  })
})
```

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

### QMenu Sizing Examples

Source: https://quasar.dev/vue-components/menu

Examples demonstrating how to control the size of a QMenu. Includes fitting the menu to content, setting a maximum height, and setting a maximum width.

```html
<template>
  <q-btn label="Fit Menu">
    <q-menu>
      <q-list>
        <q-item clickable v-close-popup>
          <q-item-section>One</q-item-section>
        </q-item>
        <q-item clickable v-close-popup>
          <q-item-section>Two</q-item-section>
        </q-item>
      </q-list>
    </q-menu>
  </q-btn>

  <q-btn label="Max Height Menu">
    <q-menu>
      <q-list>
        <q-item clickable v-close-popup>
          <q-item-section>One</q-item-section>
        </q-item>
        <q-item clickable v-close-popup>
          <q-item-section>Two</q-item-section>
        </q-item>
        <q-item clickable v-close-popup>
          <q-item-section>Three</q-item-section>
        </q-item>
        <q-item clickable v-close-popup>
          <q-item-section>Four</q-item-section>
        </q-item>
      </q-list>
    </q-menu>
  </q-btn>

  <q-btn label="Max Width Menu">
    <q-menu>
      <q-list>
        <q-item clickable v-close-popup>
          <q-item-section>One</q-item-section>
        </q-item>
        <q-item clickable v-close-popup>
          <q-item-section>Two</q-item-section>
        </q-item>
      </q-list>
    </q-menu>
  </q-btn>
</template>
```

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

### api.hasPackage Example

Source: https://quasar.dev/app-extensions/development-guide/uninstall-api

Shows how to check if a specific package is installed in the host app, optionally with a semver condition.

```javascript
/**
 * @param {string} packageName
 * @param {string} (optional) semverCondition
 * @return {boolean} package is installed and meets optional semver condition
 */
if (api.hasPackage('vuelidate')) {
  // hey, this app has it (any version of it)
}
if (api.hasPackage('quasar', '^2.0.0')) {
  // hey, this app has Quasar UI v2 installed
}
```

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

### Basic QBadge Usage

Source: https://quasar.dev/vue-components/badge

Demonstrates the basic usage of the QBadge component with different content and colors.

```html
<q-badge color="#4D96F2" class="q-ma-sm">2</q-badge>
<q-badge color="primary" class="q-ma-sm">_bluetooth_</q-badge>
<q-badge color="accent" class="q-ma-sm">12</q-badge>
<q-badge color="dark" class="q-ma-sm">_warning_</q-badge>
<q-badge color="red" class="q-ma-sm">Badge</q-badge>
<q-badge color="orange" class="q-ma-sm">v1.0.0+</q-badge>
<q-badge color="teal" class="q-ma-sm">Feature</q-badge>
<q-badge color="purple" class="q-ma-sm">v1.0.0+</q-badge>
<q-badge color="info" class="q-ma-sm">Ganglia</q-badge>
<q-badge color="grey-4" class="q-ma-sm">3</q-badge>
<q-badge color="blue-grey-1" class="q-ma-sm">_warning_</q-badge>
<q-badge color="brown-5" class="q-ma-sm">2 min ago</q-badge>
```

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

### Basic Carousel Example

Source: https://quasar.dev/vue-components/carousel

A minimal carousel setup with custom transitions, controlled via its model. No embedded navigation is present.

```html
<template>
  <q-carousel
    v-model="slide"
    transition-prev="fade"
    transition-next="fade"
    swipeable
    animated
    control-color="white"
    class="bg-primary"
  >
    <q-carousel-slide name="first" img-src="https://cdn.quasar.dev/img/mountains.jpg" />
    <q-carousel-slide name="second" img-src="https://cdn.quasar.dev/img/parallax1.jpg" />
    <q-carousel-slide name="third" img-src="https://cdn.quasar.dev/img/parallax2.jpg" />
    <q-carousel-slide name="fourth" img-src="https://cdn.quasar.dev/img/quasar.jpg" />
  </q-carousel>
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    return {
      slide: ref('first')
    }
  }
}
</script>
```

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

### Basic QTime Usage

Source: https://quasar.dev/vue-components/time

Demonstrates the basic setup of the QTime component. The model is a String.

```html
<template>
  <div class="q-pa-md">
    <div class="row justify-center items-center">
      <q-time v-model="time" />
    </div>
  </div>
</template>

<script>
export default {
  setup () {
    return {
      time: '10:56'
    }
  }
}
</script>
```

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

### Quasar Serve Command Help

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

Displays help information for the 'quasar serve' command, outlining its usage for starting a local HTTP(S) server.

```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'))
      })
    }
```

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

### api.beforeDev

Source: https://quasar.dev/app-extensions/development-guide/index-api

A hook that runs before the `quasar dev` command starts. Useful for preparing external services or performing setup tasks.

```APIDOC
## api.beforeDev

### Description
Prepare external services before `quasar dev` command runs, like starting some backend or any other service that the app relies on.

### Parameters
#### Path Parameters
- **fn** (function) - Required - A function that receives `api` and an object containing `quasarConf`. Can return a Promise or use async/await.

### Example
```javascript
api.beforeDev((api, { quasarConf }) => {
  // do something
})
```
```

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

### Import and Use useId

Source: https://quasar.dev/vue-composables/use-id

Import the useId composable from 'quasar' and call it within your setup function to get a unique ID.

```javascript
import { useId } from 'quasar'

setup () {
  const id = useId()
  // ...
}
```

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

### QTime Coloring Examples

Source: https://quasar.dev/vue-components/time

Demonstrates basic coloring and forcing dark mode for the QTime component.

```html
<template>
  <div class="q-pa-md">
    <div class="row justify-center items-center">
      <q-time
        v-model="time"
        color="primary"
        dark
      />
    </div>
  </div>
</template>

<script>
export default {
  setup () {
    return {
      time: '10:56'
    }
  }
}
</script>
```

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

### Accessing $q in Composition API with 'script setup'

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

Use the `useQuasar()` composable to get the $q object within a Vue component's `<script setup>` block. This allows you to access Quasar functionalities like platform information and version.

```javascript
<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>
```

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

### QBtn with other options

Source: https://quasar.dev/vue-components/button?search=1&test=2

Demonstrates additional QBtn configurations, such as full-width and tooltip integration.

```html
<q-btn label="Full-width" class="full-width" />
<q-btn label="With Tooltip">
  <q-tooltip>This is a tooltip</q-tooltip>
</q-btn>
```

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

### Define Install Script for App Extension

Source: https://quasar.dev/app-extensions/common-formulas-and-patterns/starter-kit-equivalent

Use `defineInstallScript` to create an install script that renders files into the hosting project based on user prompts. Ensure compatibility with specified Quasar versions.

```javascript
import { defineInstallScript } from '#q-app'

export default defineInstallScript(api => {
  // (Optional!)
  // Quasar compatibility check; you may need
  // hard dependencies, as in a minimum version of the "quasar"
  // package or a minimum version of Quasar App CLI
  api.compatibleWith('quasar', '^2.0.0')
  api.compatibleWith('@quasar/app-vite', '^3.0.0-rc.1')

  // We render some files into the hosting project

  if (api.prompts.serviceA) {
    api.render('./templates/serviceA')
  }

  if (api.prompts.serviceB) {
    // we supply interpolation variables
    // to the template
    api.render('./templates/serviceB', {
      productName: api.prompts.productName
    })
  }

  // we always render the following template:
  api.render('./templates/common-files')
})
```

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

### Basic QUploader Design

Source: https://quasar.dev/vue-components/uploader

A fundamental example of the QUploader component's basic design. This snippet shows the default appearance and setup.

```html
<q-uploader
  url="http://localhost:4444/upload"
/>
```

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

### localhost.run Example Output

Source: https://quasar.dev/quasar-cli-vite/opening-dev-server-to-public

This shows an example of the public URL you will receive after successfully connecting with localhost.run. Press Ctrl+C to quit the tunnel.

```bash
ssh -R 80:localhost:8080 ssh.localhost.run
# Connect to http://fakeusername-random4chars.localhost.run or https://fakeusername-random4chars.localhost.run
# Press ctrl-c to quit.
```

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

### QUploader Component Configuration for ASP.NET

Source: https://quasar.dev/vue-components/uploader

Configures the QUploader component to point to an ASP.NET Web API endpoint. This example shows basic setup.

```html
<q-uploader
  url="http://localhost:4444/fileuploader/upload"
  label="Upload"
  style="max-width: 300px"
/>
```

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

### Initial Pagination Configuration

Source: https://quasar.dev/vue-components/table

Configure the initial pagination settings for a table. This example shows how to set up the starting page and items per page.

```html
Treats
Dessert (100g serving)__| Calories __| __Fat (g)|  Carbs (g)| Protein (g)| Sodium (mg)| __Calcium (%)| __Iron (%)
---|---|---|---|---|---|---|---
Frozen Yogurt| 159| 6| 24| 4| 87| 14%| 1%
Gingerbread| 356| 16| 49| 3.9| 327| 7%| 16%
Honeycomb| 408| 3.2| 87| 6.5| 562| 0%| 45%
Records per page:
3
 __
4 - 6 of 10 ________
```

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

### Lazy Rules Validation

Source: https://quasar.dev/vue-components/field

Configure validation to trigger only after the first blur event or on demand. This example shows validation starting after the first blur.

```javascript
value => value < 60 || 'Value must be less than 60'
```

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

### Folder Listing Example

Source: https://quasar.dev/vue-components/list-and-list-items

Presents a list of folders and files with their names, dates, and associated icons.

```html
<q-list>
  <q-item>
    <q-item-section top avatar>
      <q-icon name="folder" color="blue" size="md" />
    </q-item-section>

    <q-item-section>
      <q-item-label>Photos</q-item-label>
      <q-item-label caption>February 22nd, 2019</q-item-label>
    </q-item-section>

    <q-item-section side top>
      <q-btn
        flat
        round
        dense
        icon="info"
      />
    </q-item-section>
  </q-item>

  <q-item>
    <q-item-section top avatar>
      <q-icon name="folder" color="blue" size="md" />
    </q-item-section>

    <q-item-section>
      <q-item-label>Movies</q-item-label>
      <q-item-label caption>March 1st, 2019</q-item-label>
    </q-item-section>

    <q-item-section side top>
      <q-btn
        flat
        round
        dense
        icon="info"
      />
    </q-item-section>
  </q-item>

  <q-item>
    <q-item-section top avatar>
      <q-icon name="folder" color="blue" size="md" />
    </q-item-section>

    <q-item-section>
      <q-item-label>Photos</q-item-label>
      <q-item-label caption>January 15th, 2019</q-item-label>
    </q-item-section>

    <q-item-section side top>
      <q-btn
        flat
        round
        dense
        icon="info"
      />
    </q-item-section>
  </q-item>
</q-list>

<q-list>
  <q-item>
    <q-item-section top avatar>
      <q-icon name="assignment" color="grey" size="md" />
    </q-item-section>

    <q-item-section>
      <q-item-label>Expenses spreadsheet</q-item-label>
      <q-item-label caption>March 2nd, 2019</q-item-label>
    </q-item-section>

    <q-item-section side top>
      <q-btn
        flat
        round
        dense
        icon="info"
      />
    </q-item-section>
  </q-item>

  <q-item>
    <q-item-section top avatar>
      <q-icon name="place" color="grey" size="md" />
    </q-item-section>

    <q-item-section>
      <q-item-label>Places to visit</q-item-label>
      <q-item-label caption>February 22, 2019</q-item-label>
    </q-item-section>

    <q-item-section side top>
      <q-btn
        flat
        round
        dense
        icon="info"
      />
    </q-item-section>
  </q-item>

  <q-item>
    <q-item-section top avatar>
      <q-icon name="library_music" color="grey" size="md" />
    </q-item-section>

    <q-item-section>
      <q-item-label>My favorite song</q-item-label>
      <q-item-label caption>Singing it all day</q-item-label>
    </q-item-section>

    <q-item-section side top>
      <q-btn
        flat
        round
        dense
        icon="info"
      />
    </q-item-section>
  </q-item>
</q-list>
```

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

### Get App Package Version

Source: https://quasar.dev/app-extensions/development-guide/uninstall-api

Retrieve the version of a package installed in the host app. Returns the version string or undefined if the package is not found.

```javascript
/**
 * @param {string} packageName
 * @return {string|undefined} version of app's package
 */
console.log(api.getPackageVersion(packageName))
```

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

### QBtnToggle Design Examples

Source: https://quasar.dev/vue-components/button-toggle

Demonstrates styling QBtnToggle using QBtn props for design customization. Includes examples with different button styles and spread behavior.

```html
<template>
  <div class="q-pa-md">
    <div class="q-gutter-md row items-center">
      <q-btn-toggle
        v-model="toggle"
        color="primary"
        text-color="white"
        toggle-color="primary"
        toggle-text-color="white"
        :options="[
          {label: 'One', value: 'one'},
          {label: 'Two', value: 'two'},
          {label: 'Three', value: 'three'}
        ]"
      />

      <q-btn-toggle
        v-model="toggle"
        color="secondary"
        text-color="black"
        toggle-color="secondary"
        toggle-text-color="black"
        :options="[
          {label: 'One', value: 'one'},
          {label: 'Two', value: 'two'},
          {label: 'Three', value: 'three'},
          {label: 'Four', value: 'four'}
        ]"
      />

      <q-btn-toggle
        v-model="toggle"
        size="lg"
        color="accent"
        text-color="black"
        toggle-color="accent"
        toggle-text-color="black"
        :options="[
          {label: 'One', value: 'one'},
          {label: 'Two', value: 'two'}
        ]"
      />
    </div>
  </div>
</template>

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

const toggle = ref('one')
</script>
```

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

### QTabPanels with QTabs

Source: https://quasar.dev/vue-components/tab-panels

Integrates QTabPanels with QTabs to allow tab-based navigation between panels. This example shows a common setup where tabs control which panel is visible.

```html
<template>
  <div class="q-pa-md">
    <q-tab-panels
      v-model="panel"
      animated
      transition="fade" 
    >
      <q-tab-panel name="mails">
        <div class="text-h6">Mails</div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
      </q-tab-panel>

      <q-tab-panel name="alarms">
        <div class="text-h6">Alarms</div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
      </q-tab-panel>

      <q-tab-panel name="movies">
        <div class="text-h6">Movies</div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
      </q-tab-panel>
    </q-tab-panels>
  </div>
</template>

<script>
export default {
  data () {
    return {
      panel: 'mails' // or 'alarms', or 'movies'
    }
  }
}
</script>
```

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

### Launch Tunnelmole Programmatically

Source: https://quasar.dev/quasar-cli-vite/opening-dev-server-to-public

Programmatically start Tunnelmole within your project to create a public tunnel. This example shows how to configure the port and optionally a custom domain.

```javascript
const url = await tunnelmole({
  port: 80
  // Optionally, add "domain: 'mysubdomain.tunnelmole.com'" if using a custom subdomain
})
// url = https://idsq6j-ip-157-211-195-169.tunnelmole.com
```

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

### QParallax Video Background Example

Source: https://quasar.dev/vue-components/parallax

Shows how to implement a video background for the QParallax component. The video source should be a valid URL.

```html
<template>
  <q-page class="flex flex-center">
    <q-parallax src="https://www.youtube.com/embed/c1mQ_f_5_5g?autoplay=1&loop=1&playlist=c1mQ_f_5_5g" :height-decomposition="1" style="height: 400px" />
  </q-page>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'ParallaxPage'
})
</script>
```

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

### QFile Basic Usage

Source: https://quasar.dev/vue-components/file

Demonstrates the basic usage of the QFile component for single file selection.

```html
<template>
  <div class="q-pa-md">
    <div class="text-h6">Pick one file</div>
    <q-file v-model="model" label="Standard" />
  </div>
</template>

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

const model = ref(null)
</script>
```

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

### Get Host App Package Version

Source: https://quasar.dev/app-extensions/development-guide/prompts-api

Retrieves the version of a specified package installed in the host application. Returns the version string or undefined if the package is not found.

```javascript
/**
 * @param {string} packageName
 * @return {string|undefined} version of app's package
 */
console.log(api.getPackageVersion(packageName))
// output examples:
//   1.1.3
//   undefined (when package not found)
```