@pinegrow/primevue-plugin
3.0.6 • Public • Published
PrimeVue plugin forPinegrow ⚡️
Pinegrow PrimeVue Plugin provides customized visual controls, design panel for theming and other rich visual features customized for your PrimeVue experience.
Note:
- This plugin is generally used in conjunction with thePinegrow Vite Plugin or with the meta-framework specific Pinegrow modules for Nuxt, Quasar, Iles and Astro.
- To use PrimeVue in Pinegrow apps, you require an active PrimeVue Addon subscription.
- Learn more about Vue Designer
- 🎨 Visually live-design your Vite-powered PrimeVue apps (Vue, Nuxt, Quasar, Iles, Astro, etc)
- ⚙️ 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 ❤️
- Install: Add
@pinegrow/primevue-pluginto your project
# Using npmnpm install -D @pinegrow/primevue-plugin# Using pnpmpnpm add -D @pinegrow/primevue-plugin
- Configure: Add
primevuealong withconfigPathas options toliveDesignerin your config.
//vite.config.[js,ts]exportdefaultdefineConfig({plugins:[liveDesigner({// For options, refer to https://www.npmjs.com/package/@pinegrow/vite-plugin//...primevue:{/* PinegrowPrimeVueModuleOptions (for more details, refer to Options section below) *//* Please ensure that you update the filenames and paths to accurately match those used in your project. */configPath:'primevue.config.ts',// or file where primevue is created// utilities: false,// restartOnConfigUpdate: true,restartOnThemeUpdate:true,},}),//...],//...})
//nuxt.config.tsexportdefaultdefineNuxtConfig({modules:['@pinegrow/nuxt-module',//...],pinegrow:{liveDesigner:{// For options, refer to https://www.npmjs.com/package/@pinegrow/vite-plugin//...primevue:{/* PinegrowPrimeVueModuleOptions (for more details, refer to Options section below) *//* Please ensure that you update the filenames and paths to accurately match those used in your project. */configPath:'primevue.config.ts',// or file where primevue is created// utilities: false,// restartOnConfigUpdate: true,restartOnThemeUpdate:true,},},},//...})
//iles.config.tsimporttype{LiveDesignerOptions}from'@pinegrow/vite-plugin'exportdefaultdefineConfig({modules:[['@pinegrow/iles-module',{liveDesigner:{// For options, refer to https://www.npmjs.com/package/@pinegrow/vite-plugin//...primevue:{/* PinegrowPrimeVueModuleOptions (for more details, refer to Options section below) *//* Please ensure that you update the filenames and paths to accurately match those used in your project. */configPath:'primevue.config.ts',// or file where primevue is created// utilities: false,// restartOnConfigUpdate: true,restartOnThemeUpdate:true,},}asLiveDesignerOptions,},],//...],//...})
//astro.config.[mjs]import{defineConfig}from'astro/config'importvuefrom'@astrojs/vue'importPinegrowfrom'@pinegrow/astro-module'exportdefaultdefineConfig({integrations:[vue(),Pinegrow({liveDesigner:{// For options, refer to https://www.npmjs.com/package/@pinegrow/vite-plugin//...primevue:{/* PinegrowPrimeVueModuleOptions (for more details, refer to Options section below) *//* Please ensure that you update the filenames and paths to accurately match those used in your project. */configPath:'primevue.config.ts',// or file where primevue is created// utilities: false,// restartOnConfigUpdate: true,restartOnThemeUpdate:true,},},}),//...],//...})
Now, open your project in your Pinegrow app (currently only Vue Designer). ✨
Theme Customization (optional) - Pinegrow PrimeVue addon enables easy theming based on colors, fonts and background images. Theme files are saved at the location specified by the
themePathoption (default:[src]/themes/pg-primevue/tokens.[cjs,mjs]). To use the theme, follow the instructions in the Config Panel of your Pinegrow app (currently only Vue Designer) under@pinegrow/primevue-pluginpackage.
interfacePinegrowPrimeVueModuleOptions{/** * Absolute or relative path of the primevue configuration file. */configPath:string|any/** * Absolute or relative path of the primevue theme file. * @default 'src/themes/pg-primevue/tokens.[cjs,mjs]' * @default 'themes/pg-primevue/tokens.[cjs,mjs]' // Nuxt * Set to false to turn off theming via Design Panel */themePath?:string|boolean/** * Turn off visual controls for PrimeVue utility classes * @default true */utilities?:boolean/** * Restart on primevue config file updates * @default false */restartOnConfigUpdate?:boolean/** * Restart on primevue theme file updates * @default false */restartOnThemeUpdate?:boolean}interfacePinegrowPrimeVueModule{/** * Pinegrow PrimeVue Module Options, added within liveDesigner in vite/nuxt/quasar/iles/astro config files */primevue:PinegrowPrimeVueModuleOptions}
Copyright (c) Pinegrow
Package Sidebar
Install
npm i @pinegrow/primevue-plugin
Weekly Downloads
1
Version
3.0.6
License
MIT
Unpacked Size
582 kB
Total Files
7