npm package: @pinegrow/vite-plugin
Description: Pinegrow Vite Plugin
Author: Pinegrow
Latest version: 3.0.70

<!-- [![@pinegrow/vite-plugin](https://tailwindcss.nuxtjs.org/social-card.png)](https://tailwindcss.nuxtjs.org) -->

# Pinegrow Vite Plugin

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]

[Vite](https://vitejs.dev) plugin for [Pinegrow](https://pinegrow.com) ⚡️

Pinegrow Vite Plugin enables connection and interaction between your Vite Dev-Server and Pinegrow apps (currently only Pinegrow Web Editor & Vue Designer).

-   [&nbsp;Learn more about Vue Designer](https://vuedesigner.com)

## Features

-   🎨&nbsp; Visually live-design your Vite-powered apps (Vue, Nuxt, Quasar, Iles, Astro, etc)
-   ⚙️&nbsp; Smartly integrates into your Vite workflow in dev-mode only
-   ✨&nbsp; 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

```bash
# 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}`

```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

```ts
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](./LICENSE)

Copyright (c) Pinegrow

<!-- Badges -->

[npm-version-src]: https://img.shields.io/npm/v/@pinegrow/vite-plugin/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/@pinegrow/vite-plugin
[npm-downloads-src]: https://img.shields.io/npm/dm/@pinegrow/vite-plugin.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/@pinegrow/vite-plugin
[license-src]: https://img.shields.io/npm/l/@pinegrow/vite-plugin.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://npmjs.com/package/@pinegrow/vite-plugin