Pinegrow Vite Plugin

Vite plugin for Pinegrow ⚡️

Pinegrow Vite Plugin enables connection and interaction between your Vite Dev-Server and Pinegrow apps (currently only Pinegrow Web Editor & Vue Designer).

•  Learn more about Vue Designer

Features

• 🎨  Visually live-design your Vite-powered 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/vite-plugin to your project

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

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

2. Configure: Add liveDesigner() to your Vite Plugins array vite.config.{ts,js}

//vite.config.js (or) vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { liveDesigner } from '@pinegrow/vite-plugin'

export default defineConfig({
	plugins: [
		liveDesigner({
			/* LiveDesignerOptions (for more details, refer to Options section below) */
		}),
		vue(),
		//...
	],
	//...
})

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

Options

interface PinegrowExternalPlugin {
	/**
	 * Display name in Props Panel and Library Panels
	 * Eg, "My Awesome Lib 3.3.1", defaults to key if not provided
	 */
	name?: string
	/**
	 * Unique key that doesn't conflict with other pinegrow frameworks
	 * Run `Object.values(pinegrow.getFrameworks()).map(fx => fx.key)` in Vue Designer's devtools console for existing keys
	 *
	 * Allowed characters - alphanumeric with hyphens or period, no spaces
	 * Eg, 'my-awesome-lib'
	 */
	key: string
	/**
	 * Web-types of component library (or) pinegrow commonjs plugin
	 * Must return an absolute path
	 *
	 * Use path functions according to the project module type (commonjs/module)
	 * For eg, path.resolve(__dirname, '../my-awesome-lib/web-types.json')
	 * (or)
	 * import { fileURLToPath, URL } from 'node:url'
	 * fileURLToPath(new URL('./web-types/my-awesome-lib.json', import.meta.url)) // pinegrow commonjs plugin
	 * fileURLToPath(new URL('./my-awesome-lib/web-types.json', import.meta.url)) // pinegrow commonjs plugin
	 * fileURLToPath(new URL('./relative-path/web-types.json', import.meta.url)) // web-types of component library
	 */
	pluginPath: string
}

export interface LiveDesignerOptions {
	/**
	 * When your project is part of a mono-repo
	 * Absolute path to the root of a monorepo (or)
	 * Relative path from the project root to the root of a monorepo.
	 */
	repoRoot?: string

	/**
	 * When using a custom config file (for eg, vite-dev.config.js)
	 * Absolute path to a custom config file (for eg, vite-dev.config.js) (or)
	 * Relative path from the project root to a custom config file (for eg, vite-dev.config.js).
	 */
	configPath?: string

	/**
	 * Key of the devtools exposed on the window object.
	 * For instructions, check Config Panel > Devtools tab in Vue Designer
	 */
	devtoolsKey?: string

	/**
	 * Mapping of custom folder setup that deviates from the standard project setup of the framework/meta-framework
	 * For eg, in Vitepress, the standard folders could be re-mapped outside the .vitepress folder.
	 * Vue Designer utilizes this information when a user intends to create a new component from the page tree or the Vue menu.
	 */
	dirs?: {
		src?: string
		components?: string
		pages?: string
		layouts?: string
	}

	/**
   * By default, one among the pages and components following these naming conventions is opened automatically as the startup page - ['Hero*', 'app', 'App', 'home', 'Home', 'index', 'Index', 'welcome', 'Welcome'].

    To open a specific page or component as the default startup page, configure the startupPage key in your liveDesigner config.
	 * For eg '@/Pages/Welcome.vue',
	 * For eg './resources/js/Pages/Welcome.vue',
	 */
	startupPage?: string

	/**
	 * Dev-server URLs.
	 * The local URL is set to the application URL, when Vite is used as a middleware in certain setups, such as Laravel applications.
	 * The network URL is set when when the dev-server is running on a remote server/machine.
	 * Make sure the URLs are fixed via the CLI configurations, so that the next available port is not auto-picked if the fixed URL's port was already used by some other process. For Vite, use the `server.host` & `server.port` options for Vite - https://vitejs.dev/config/server-options.html#server-options).
	 */
	devServerUrls?: {
		local?: string
		network?: string
	}

	/**
	 * Preferred format for icons in icon-picker - https://github.com/antfu/icones/blob/main/src/utils/case.ts
	 * * @default 'unocss' // For eg, i-material-symbols-home
	 * * When using Nuxt-Icon, you need to change this to 'iconify'
	 *
	 */
	iconPreferredCase?:
		| 'unocss'
		| 'iconify'
		| 'bare'
		| 'barePascal'
		| 'dash'
		| 'slash'
		| 'doubleHyphen'
		| 'camel'
		| 'pascal'
		| 'component'
		| 'componentKebab'

	/**
	 * Router history modes - 'html5', 'hash'
	 * @default 'html5'
	 */

	routerHistoryMode?: string

	/**
	 * Array of Pinegrow plugins (npm package names)
	 * To use file-based Pinegrow Plugins, provide the absolute path of the plugin file, for eg, [path.resolve(__dirname, './pg-plugin/index.js')] as pluginPath, along with a unique key
	 */
	plugins?: PinegrowExternalPlugin[] | string | string[]

	/**
	 * Pinegrow TailwindCSS plugin options
	 * For options, refer to https://www.npmjs.com/package/@pinegrow/tailwindcss-plugin
	 */
	tailwindcss?: PinegrowTailwindCSSModuleOptions
	vuetify?: PinegrowVuetifyModuleOptions
}

interface PinegrowVitePlugin<VitePluginOption> {
	/**
	 * Pinegrow Live Designer options
	 */
	liveDesigner?: {
		[key in string]?: any
	} & LiveDesignerOptions
}

License

MIT License

Copyright (c) Pinegrow