@pinegrow/nuxtui-plugin
v3.0.40
Published
Pinegrow Nuxt UI Plugin
Downloads
377
Readme
Pinegrow Nuxt UI Plugin
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
- Install: Add
@pinegrow/nuxtui-plugin
to your project
# Using npm
npm install -D @pinegrow/nuxtui-plugin
# Using pnpm
pnpm add -D @pinegrow/nuxtui-plugin
- 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 theui
key. For more details, refer to the official documentation.// 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', // ], }, )}
- Now, open your project in your Pinegrow app (currently only Vue Designer). ✨
License
Copyright (c) Pinegrow