feat: integrate unocss

nuxt.config.ts

@@ -8,6 +8,9 @@ export default defineNuxtConfig({
       greeting: '',
     },
   },
-  modules: ['@nuxt/ui'],
+  modules: [
+    '@nuxt/ui',
+    '@unocss/nuxt',
+  ],
   devtools: { enabled: true },
 })

package.json

@@ -26,7 +26,10 @@
     "@antfu/eslint-config": "1.0.0-beta.8",
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
+    "@iconify-json/tabler": "^1.1.92",
     "@nuxt/devtools": "latest",
+    "@unocss/nuxt": "^0.56.2",
+    "@unocss/preset-icons": "^0.56.2",
     "husky": "^8.0.3",
     "prisma": "^5.3.1",
     "tsx": "^3.13.0"

pages/play.vue

@@ -15,5 +15,21 @@
 
     <h2>NuxtUI</h2>
     <UButton>Button</UButton>
+
+    <h2>Unocss</h2>
+    <div>
+      <h3>## Icons</h3>
+      <p>
+        <i class="font-size-20px inline-block i-tabler-icons-ball-bowling mr-2" />
+        <i class="font-size-20px inline-block i-tabler-icons-alarm mr-2" />
+        <i class="font-size-20px inline-block i-tabler-icons-coin-bitcoin" />
+      </p>
+      <h3>## Button</h3>
+      <p>
+        <button class="btn mr-2">button</button>
+        <button class="btn-red mr-2">button</button>
+        <button class="btn-green">button</button>
+      </p>
+    </div>
   </div>
 </template>

uno.config.ts

@@ -0,0 +1,48 @@
+// unocss config: https://unocss.dev/config/
+// interactive: https://unocss.dev/interactive
+import {
+  defineConfig,
+  presetAttributify,
+  presetIcons,
+  presetTypography,
+  presetUno,
+  presetWebFonts,
+  transformerDirectives,
+  transformerVariantGroup
+} from 'unocss'
+
+export default defineConfig({
+  shortcuts: [
+    // shortcuts to multiple utilities
+    {
+      btn: 'py-2 px-4 font-semibold rounded-lg shadow-md cursor-pointer border-none',
+    },
+    // dynamic shortcuts
+    [/^btn-(.*)$/, ([, c]) => `btn bg-${c}-400 text-${c}-100`]
+  ],
+  theme: {
+    colors: {
+      // ...
+    }
+  },
+  presets: [
+    presetUno(),
+    presetAttributify(),
+    presetIcons({
+      collections: {
+        // https://tabler-icons.io/
+        'tabler-icons': () => import('@iconify-json/tabler/icons.json').then(i => i.default),
+      }
+    }),
+    presetTypography(),
+    presetWebFonts({
+      fonts: {
+        // ...
+      },
+    }),
+  ],
+  transformers: [
+    transformerDirectives(),
+    transformerVariantGroup(),
+  ],
+})