feat: add support for using nuxt/ui in pure vue using unplugin

[danielroe]

🔗 Linked issue

resolves #2129

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This adds support for using Nuxt UI using Vue. It's been built in an abstract way with unplugin so that conceivably this could run for non-vite-based projects.

Note: added fast-deep-equal as an explicit dependency as it was previously an implicit dependency of Nuxt.

📖 Usage

You can test the PR with https://github.com/danielroe/nuxt-ui-vue (using the power of pkg.pr.now), or follow these steps:

1. Install the Nuxt UI v3 alpha package:

pnpm add https://pkg.pr.new/@nuxt/ui@2416

2. Add the Nuxt UI Vite plugin in your vite.config.ts{lang="ts-type"}:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { NuxtUIPlugin } from '@nuxt/ui/unplugin'

export default defineConfig({
  plugins: [
    vue(),
    NuxtUIPlugin.vite()
  ],
})

3. Nuxt UI registers unplugin-auto-import and unplugin-vue-components, which will generate auto-imports.d.ts and components.d.ts type declaration files. You will likely want to gitignore these, and add them to your tsconfig.

{
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "auto-imports.d.ts", "components.d.ts"]
}

# Auto-generated type declarations
auto-imports.d.ts
components.d.ts

4. Register the Nuxt UI Vue plugin in your app:

import { createApp } from 'vue'
import nuxtUI from '@nuxt/ui/vue-plugin'
import App from './App.vue'

const app = createApp(App)
// ...
app.use(nuxtUI)
app.mount('#app')

4. Import Tailwind CSS and Nuxt UI in your App.vue or CSS:

<style>
@import "tailwindcss";
@import "@nuxt/ui";
</style>

Warning

If you're using pnpm, ensure that you either set shamefully-hoist=true in your .npmrc file or install tailwindcss@next, vue-router and @unhead/vue directly in your project's root directory.

🚧 TODO

• remove support for reading app.config.ts in rootDir and support passing config directly via options in unplugin
• document need to install tailwindcss@alpha, vue-router and @unhead/vue
• add documentation for how to use in Vue - currently requires 1) adding a plugin to vite config, 2) registering a Vue plugin and 3) updating your .gitignore and tsconfig.app.json
• remove hard dependency on Nuxt for NuxtLinkProps
• better type safety for component props
• investigate if we need to support size prop for @iconify/vue
• tests to ensure changes to Nuxt UI do not produce regressions for Vue

[cloudflare-workers-and-pages]

Deploying ui3 with    Cloudflare Pages

Latest commit:	d5949e3
Status:	✅  Deploy successful!
Preview URL:	https://a2e77560.ui-6q2.pages.dev
Branch Preview URL:	https://vue.ui-6q2.pages.dev

View logs

[pkg-pr-new]

pnpm add https://pkg.pr.new/@nuxt/ui@2416

commit: d5949e3

[AaronDewes]

Wouldn't this also work for pnpm (I'm not using pnpm much and haven't tried)?

public-hoist-pattern[]=tailwindcss
public-hoist-pattern[]=vue-router
public-hoist-pattern[]=@unhead/vue

I think this is a better option, because it does not affect all packages, but also doesn't need users to manually update Tailwind/vue-router/@unhead/vue.