@pinegrow/nuxtui-plugin NPM

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 Iles, Nuxt and Astro.
Learn more about Vue Designer

Features

🎨 Visually live-design your Vite-powered Nuxt UI 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/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 the ui 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',
    // ],
  },
)}