@pinegrow/vite-plugin
v3.0.60
Published
Pinegrow Vite Plugin
Downloads
605
Readme
Pinegrow Vite Plugin
Pinegrow Vite Plugin enables connection and interaction between your Vite Dev-Server and Pinegrow apps (currently only Pinegrow Web Editor & 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
- Install: Add
@pinegrow/vite-plugin
to your project
# Using npm
npm install -D @pinegrow/vite-plugin
# Using pnpm
pnpm add -D @pinegrow/vite-plugin
- Configure: Add
liveDesigner()
to your Vite Plugins arrayvite.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('./relative-path/web-types.json', import.meta.url)) // web-types of component library
* fileURLToPath(new URL('./my-awesome-lib/web-types.json', import.meta.url)) // pinegrow commonjs plugin
*/
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
Copyright (c) Pinegrow