fix(nuxt2): support nuxt2 (#1833)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
Co-authored-by: Pooya Parsa <pi0@users.noreply.github.com>

.tazerc.json

@@ -10,6 +10,7 @@
     "unbuild"
   ],
   "packageMode": {
-    "vue": "minor"
+    "vue": "minor",
+    "nuxt": "minor"
   }
 }

examples/nuxt2-webpack/.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

examples/nuxt2-webpack/nuxt.config.ts

@@ -0,0 +1,13 @@
+export default {
+  buildModules: [
+    '@unocss/nuxt',
+  ],
+  unocss: {
+    attributify: true,
+    icons: true,
+    components: false,
+    shortcuts: [
+      ['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
+    ],
+  },
+}

examples/nuxt2-webpack/package.json

@@ -0,0 +1,16 @@
+{
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "start": "nuxt start"
+  },
+  "devDependencies": {
+    "@iconify-json/carbon": "^1.1.9",
+    "@unocss/core": "link:../../packages/core",
+    "@unocss/nuxt": "link:../../packages/nuxt",
+    "@unocss/reset": "link:../../packages/reset",
+    "nuxt": "^2.15.8",
+    "unocss": "link:../../packages/unocss"
+  }
+}

examples/nuxt2-webpack/pages/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <main class="px-12 py-20 text-center">
+    <span text="blue 5xl hover:red" cursor="default">Hello Nuxt 2</span>
+    <br>
+    <div i-carbon-car text-4xl inline-block />
+    <br>
+    <button btn>
+      Button
+    </button>
+  </main>
+</template>
+
+<style>
+@import '@unocss/reset/tailwind.css';
+</style>

packages/nuxt/src/index.ts

@@ -3,6 +3,7 @@ import { fileURLToPath } from 'url'
 import { addComponentsDir, defineNuxtModule, extendWebpackConfig } from '@nuxt/kit'
 import WebpackPlugin from '@unocss/webpack'
 import VitePlugin from '@unocss/vite'
+import type { NuxtPlugin } from '@nuxt/schema'
 import { resolveOptions } from './options'
 import type { UnocssNuxtOptions } from './types'
 
@@ -51,6 +52,14 @@ export default defineNuxtModule<UnocssNuxtOptions>({
       config.plugins.unshift(...VitePlugin({}, options))
     })
 
+    nuxt.hook('config', (config) => {
+      const plugin: NuxtPlugin = { src: 'unocss.mjs', mode: 'client' }
+      if (config.plugins)
+        config.plugins.push(plugin)
+      else
+        config.plugins = [plugin]
+    })
+
     extendWebpackConfig((config) => {
       config.plugins = config.plugins || []
       config.plugins.unshift(WebpackPlugin({}, options))