feat: integrate @nuxt/ui

Close #3

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "bradlc.vscode-tailwindcss"
+  ]
+}

.vscode/settings.json

@@ -8,8 +8,8 @@
 
   // Auto fix
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "always",
-    "source.organizeImports": "never"
+    "source.fixAll.eslint": true,
+    "source.organizeImports": true
   },
 
   // Silent the stylistic rules in you IDE, but still auto fix them
@@ -41,5 +41,23 @@
     "json",
     "jsonc",
     "yaml"
+  ],
+
+  // refs: https://ui.nuxt.com/getting-started/installation#intellisense
+  "files.associations": {
+    "*.css": "tailwindcss"
+  },
+  "editor.quickSuggestions": {
+    "strings": true
+  },
+  "tailwindCSS.experimental.configFile": "tailwind.config.ts",
+  "tailwindCSS.experimental.classRegex": [
+    ["ui:\\s*{([^)]*)\\s*}", "[\"'`]([^\"'`]*).*?[\"'`]"],
+    ["/\\*ui\\*/\\s*{([^;]*)}", ":\\s*[\"'`]([^\"'`]*).*?[\"'`]"]
+  ],
+  "tailwindCSS.classAttributes": [
+    "class",
+    "className",
+    "ui"
   ]
 }

README.md

@@ -10,7 +10,7 @@
 
 - [nuxt3](https://nuxt.com/)
 - [prisma](https://prisma.io/)
-- [unocss](https://unocss.dev/)
+- [NuxtUI](https://ui.nuxt.com/)
 - [trpc](https://trpc.io/)
 
 ## Development Setup

app.config.ts

@@ -0,0 +1,6 @@
+export default defineAppConfig({
+  ui: {
+    primary: 'green',
+    gray: 'cool',
+  },
+})

nuxt.config.ts

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

package.json

@@ -18,6 +18,7 @@
     "prisma:studio": "prisma studio"
   },
   "dependencies": {
+    "@nuxt/ui": "^2.8.1",
     "@prisma/client": "^5.3.1",
     "nuxt": "^3.7.3"
   },

pages/index.vue

@@ -2,15 +2,7 @@
 </script>
 
 <template>
-  <div>
+  <div class="container mx-auto">
     <h1>pages/index.vue</h1>
-
-    <h2>Envs</h2>
-    <div>
-      <h3>## Server</h3>
-      <p>DATABASE_URL: {{ $config.databaseUrl }} <span>(Note: Will be empty)</span></p>
-      <h3>## Client</h3>
-      <p>NUXT_PUBLIC_GREETING: {{ $config.public.greeting }}</p>
-    </div>
   </div>
 </template>

pages/play.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+</script>
+
+<template>
+  <div class="container mx-auto">
+    <h1>pages/index.vue</h1>
+
+    <h2>Envs</h2>
+    <div>
+      <h3>## Server</h3>
+      <p>DATABASE_URL: {{ $config.databaseUrl }} <span>(Note: Will be empty)</span></p>
+      <h3>## Client</h3>
+      <p>NUXT_PUBLIC_GREETING: {{ $config.public.greeting }}</p>
+    </div>
+
+    <h2>NuxtUI</h2>
+    <UButton>Button</UButton>
+  </div>
+</template>