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 module for Pinegrow ⚡️

Pinegrow Quasar Module includes the 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.
-  Learn more about Vue Designer

Features

- 🎨  Visually live-design your Vite-powered Quasar apps
- ⚙️  Smartly integrates into your Vite workflow in dev-mode only
- ✨  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

Copyright (c) Pinegrow

[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