Pinegrow PrimeVue Plugin

PrimeVue plugin for Pinegrow ⚡️

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 the Pinegrow Vite Plugin or with the meta-framework specific Pinegrow modules for Iles, Nuxt and Astro.
• To use PrimeVue in Pinegrow apps, you require an active PrimeVue Addon subscription.
•  Learn more about Vue Designer

Features

• 🎨  Visually live-design your Vite-powered PrimeVue apps (Vue, Nuxt, 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 ❤️

Quick Setup

1. Install: Add @pinegrow/primevue-plugin to your project

# Using npm
npm install -D @pinegrow/primevue-plugin

# Using pnpm
pnpm add -D @pinegrow/primevue-plugin

2. Configure: Add primevue along with configPath and cssPath as options to liveDesigner in your config. To turn off visual helpers for PrimeVue utility classes, set utilities: false.

//vite.config.[js,ts]

export default defineConfig({
	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.ts

export default defineNuxtConfig({
	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.ts

import type { LiveDesignerOptions } from '@pinegrow/vite-plugin'
export default defineConfig({
  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,
          },
        } as LiveDesignerOptions,
      },
    ],
    //...
  ],
  //...
})

//astro.config.[mjs]

import { defineConfig } from 'astro/config'
import vue from '@astrojs/vue'
import Pinegrow from '@pinegrow/astro-module'

export default defineConfig({
	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,
				},
			},
		}),
		//...
	],
	//...
})

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

4. 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 themePath option (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-plugin package.

Options

interface PinegrowPrimeVueModuleOptions {
	/**
	 * Absolute or relative path of the primevue configuration file.
	 */
	configPath: string | any

	/**
	 * Absolute or relative path of the primevue entry css file.
	 */
	cssPath?: 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
}

interface PinegrowPrimeVueModule {
	/**
	 * Pinegrow PrimeVue Module Options, added within liveDesigner in vite/nuxt/iles/astro config files
	 */
	primevue: PinegrowPrimeVueModuleOptions
}

License

MIT License

Copyright (c) Pinegrow