Pinegrow Nuxt UI Plugin
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
Nuxt UI plugin for
Pinegrow ⚡️
Pinegrow Nuxt UI Plugin provides customized visual controls customized for your Nuxt UI experience.
Note:
- Nuxt UI is based on tailwindcss, so refer to
Pinegrow TailwindCSS Plugin for more details on using Tailwind CSS with Pinegrow apps (currently only Vue Designer).
- This plugin is generally used in conjunction with the
Pinegrow Vite Plugin or with the meta-framework specific Pinegrow modules for Nuxt, Quasar, Iles and Astro.
-
Learn more about Vue Designer
Features
- 🎨 Visually live-design your Vite-powered Nuxt UI apps (Vue, Nuxt, Quasar, 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/nuxtui-plugin to your project
``
bash
Using npm
npm install -D @pinegrow/nuxtui-plugin
Using pnpm
pnpm add -D @pinegrow/nuxtui-plugin
`
2. Configure:
- 👉 Nuxt UI uses heroicons by default and is configured only to use them. In order to use all iconsets in Vue Designer's icon-picker, the ui
key of the Nuxt config has been updated (icons: 'all'
).
- Also, note that there are some scenarios when colors might have to be added to the safelistColors
array under the ui
key. For more details, refer to the official documentation.
`
ts
// nuxt.config.ts
export default defineNuxtConfig({
modules: [
'@pinegrow/nuxt-module',
"@nuxt/ui",
//...
],
pinegrow: {
liveDesigner: {
iconPreferredCase: 'unocss', // default value (can be removed), Nuxt UI uses the unocss format for icon names
//...
},
},
ui: {
icons: 'all',
// safelistColors: [
// 'primary',
// 'secondary',
// 'tertiary',
// 'success',
// 'warning',
// 'error',
// 'info',
// ],
},
)}
``
3. Now, open your project in your Pinegrow app (currently only Vue Designer). ✨
License
MIT License
Copyright (c) Pinegrow
[npm-version-src]: https://img.shields.io/npm/v/@pinegrow/nuxtui-plugin/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/@pinegrow/nuxtui-plugin
[npm-downloads-src]: https://img.shields.io/npm/dm/@pinegrow/nuxtui-plugin.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/@pinegrow/nuxtui-plugin
[license-src]: https://img.shields.io/npm/l/@pinegrow/nuxtui-plugin.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://npmjs.com/package/@pinegrow/nuxtui-plugin