Pinegrow Vuetify Plugin
npm install @pinegrow/vuetify-plugin
@pinegrow/vuetify-plugin to your project
bash
Using npm
npm install -D @pinegrow/vuetify-plugin
Using pnpm
pnpm add -D @pinegrow/vuetify-plugin
`
2. Configure: Add vuetify along with configPath as options to liveDesigner in your config. To turn off visual helpers for Vuetify utility classes, set utilities: false.
`js
//vite.config.[js,ts]
export default defineConfig({
plugins: [
liveDesigner({
// For options, refer to https://www.npmjs.com/package/@pinegrow/vite-plugin
//...
vuetify: {
/ PinegrowVuetifyModuleOptions (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: 'vuetify.config.ts', // or file where vuetify is created
// utilities: false,
// restartOnConfigUpdate: true,
restartOnThemeUpdate: true,
},
}),
//...
],
//...
})
`
`js
//nuxt.config.ts
export default defineNuxtConfig({
modules: [
'@pinegrow/nuxt-module',
//...
],
pinegrow: {
liveDesigner: {
// For options, refer to https://www.npmjs.com/package/@pinegrow/vite-plugin
//...
vuetify: {
/ PinegrowVuetifyModuleOptions (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: 'vuetify.config.ts', // or file where vuetify is created
// utilities: false,
// restartOnConfigUpdate: true,
restartOnThemeUpdate: true,
},
},
},
//...
})
`
`js
//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
//...
vuetify: {
/ PinegrowVuetifyModuleOptions (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: 'vuetify.config.ts', // or file where vuetify is created
// utilities: false,
// restartOnConfigUpdate: true,
restartOnThemeUpdate: true,
},
} as LiveDesignerOptions,
},
],
//...
],
//...
})
`
`js
//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
//...
vuetify: {
/ PinegrowVuetifyModuleOptions (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: 'vuetify.config.ts', // or file where vuetify 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 Vuetify 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-vuetify/tokens.[cjs,mjs]). To use the theme, follow the instructions in the Config Panel of your Pinegrow app (currently only Vue Designer) under @pinegrow/vuetify-plugin package.
Options
`ts
interface PinegrowVuetifyModuleOptions {
/**
* Absolute or relative path of the vuetify configuration file.
*/
configPath: string | any
/**
* Absolute or relative path of the vuetify theme file.
* @default 'src/themes/pg-vuetify/tokens.[cjs,mjs]'
* @default 'themes/pg-vuetify/tokens.[cjs,mjs]' // Nuxt
* Set to false to turn off theming via Design Panel
*/
themePath?: string | boolean
/**
* Turn off visual controls for Vuetify utility classes
* @default true
*/
utilities?: boolean
/**
* Restart on vuetify config file updates
* @default false
*/
restartOnConfigUpdate?: boolean
/**
* Restart on vuetify theme file updates
* @default false
*/
restartOnThemeUpdate?: boolean
}
interface PinegrowVuetifyModule {
/**
* Pinegrow Vuetify Module Options, added within liveDesigner in vite/nuxt/quasar/iles/astro config files
*/
vuetify: PinegrowVuetifyModuleOptions
}
``