npm package: @pinegrow/quasar-module
Description: Pinegrow Quasar Module
Author: Pinegrow
Latest version: 3.0.70

<!-- [![@pinegrow/quasar-module](https://tailwindcss.nuxtjs.org/social-card.png)](https://tailwindcss.nuxtjs.org) -->

# Pinegrow Quasar Module

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]

[Quasar](https://quasar.dev/) module for [Pinegrow](https://pinegrow.com) ⚡️

Pinegrow Quasar Module includes the [Pinegrow Vite Plugin](https://www.npmjs.com/package/@pinegrow/vite-plugin) that enables connection and interaction between your Vite Dev-Server and Pinegrow apps (currently only Vue Designer).

Pinegrow Quasar Module provides customized visual controls, design panel for theming and other rich visual features customized for your Quasar experience.

Note:

-   To use Quasar in Pinegrow apps, you require an active Quasar Addon subscription.
-   [&nbsp;Learn more about Vue Designer](https://vuedesigner.com)

## Features

-   🎨&nbsp; Visually live-design your Vite-powered Quasar apps
-   ⚙️&nbsp; Smartly integrates into your Vite workflow in dev-mode only
-   ✨&nbsp; Clean code 😃, No lock-in - You are in control of your projects and development workflow ❤️

## Quick Setup

1. Install: Add `@pinegrow/quasar-module` to your project

```bash
# Using npm
npm install -D @pinegrow/quasar-module

# Using pnpm
pnpm add -D @pinegrow/quasar-module
```

2. Configure: Add `@pinegrow/quasar-module` to your Quasar vitePlugins array `quasar.config.js`

```js
//quasar.config.js

module.exports = configure(function (/* ctx */) {
	return {
		//... existing config
		build: {
			vitePlugins: [
				[
					require('@pinegrow/vite-plugin').liveDesigner,
					{
						quasar: {
							/* Please ensure that you update the filenames and paths to accurately match those used in your project. */
							configPath: 'quasar.config.js',
							// themePath: false, // Set to false so that Design Panel is not used
							// restartOnConfigUpdate: true,
							restartOnThemeUpdate: true,
						},
						//... existing config
					},
				],
			],
		},
		//...
	}
})
```

3. Now, open your project in your Pinegrow app (currently only Vue Designer). ✨

4. Theme Customization (optional) - Pinegrow Quasar addon enables easy theming based on colors, fonts and background images. Theme files are saved at the location specified by the `themePath` option (default: **[src]/themes/pg-quasar/tokens.[cjs,mjs]**). To use the theme, follow the instructions in the Config Panel of your Pinegrow app (currently only Vue Designer) under `@pinegrow/quasar-module` package.

## Options

```ts
interface PinegrowQuasarModuleOptions {
	/**
	 * Absolute or relative path of the quasar configuration file.
	 */
	configPath: string | any

	/**
	 * Absolute or relative path of the quasar theme file.
	 * @default 'src/themes/pg-quasar/tokens.[cjs,mjs]'
	 * @default 'themes/pg-quasar/tokens.[cjs,mjs]' // Nuxt
	 * Set to false to turn off theming via Design Panel
	 */
	themePath?: string | boolean

	/**
	 * Restart on quasar config file updates
	 * @default false
	 */
	restartOnConfigUpdate?: boolean

	/**
	 * Restart on quasar theme file updates
	 * @default false
	 */
	restartOnThemeUpdate?: boolean
}

interface PinegrowQuasarModule {
	/**
	 * Pinegrow Quasar Module Options, added within liveDesigner in quasar config file
	 */
	quasar: PinegrowQuasarModuleOptions
}
```

## License

[MIT License](./LICENSE)

Copyright (c) Pinegrow

<!-- Badges -->

[npm-version-src]: https://img.shields.io/npm/v/@pinegrow/quasar-module/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/@pinegrow/quasar-module
[npm-downloads-src]: https://img.shields.io/npm/dm/@pinegrow/quasar-module.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/@pinegrow/quasar-module
[license-src]: https://img.shields.io/npm/l/@pinegrow/quasar-module.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://npmjs.com/package/@pinegrow/quasar-module