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

1. Install: Add @pinegrow/nuxtui-plugin to your project

# 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.

  // 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