npm package: @pinegrow/nuxtui-plugin
Description: Pinegrow Nuxt UI Plugin
Author: Pinegrow
Latest version: 3.0.40

<!-- [![@pinegrow/nuxtui-plugin](https://nuxtui.nuxtjs.org/social-card.png)](https://nuxtui.nuxtjs.org) -->

# 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](https://ui.nuxt.com/) plugin for [Pinegrow](https://pinegrow.com) ⚡️

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](https://www.npmjs.com/package/@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](https://www.npmjs.com/package/@pinegrow/vite-plugin) or with the meta-framework specific Pinegrow modules for Nuxt, Quasar, Iles and Astro.
-   [&nbsp;Learn more about Vue Designer](https://vuedesigner.com)

## Features

-   🎨&nbsp; Visually live-design your Vite-powered Nuxt UI apps (Vue, Nuxt, Quasar, Iles, Astro, etc)
-   ⚙️&nbsp; Smartly integrates into your Vite workflow in dev-mode only
-   ✨&nbsp; 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](https://ui.nuxt.com/getting-started/theming#colors).

    ```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](./LICENSE)

Copyright (c) Pinegrow

<!-- Badges -->

[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