feat: add NuxtUI (including TailwindCSS) (#161)

Author: toddeTV

.gitignore

@@ -22,6 +22,10 @@ coverage
 
 *.tsbuildinfo
 
+# Auto-generated type declarations from NuxtUI
+auto-imports.d.ts
+components.d.ts
+
 # Generated glTF model files (from dependency `@todde.tv/gltf-type-toolkit`)
 *.gltf.d.ts
 *.gltf.js

.vscode/settings.json

@@ -9,6 +9,9 @@
   "editor.defaultFormatter": "dbaeumer.vscode-eslint",
   "editor.formatOnSave": false,
   "editor.linkedEditing": true,
+  "editor.quickSuggestions": {
+    "strings": "on"
+  },
   "editor.rulers": [120],
   "eslint.rules.customizations": [
     { "rule": "style/*", "severity": "off" },
@@ -62,6 +65,16 @@
     "pnpm-lock.yaml": true
   },
   "search.useIgnoreFiles": false,
+  "tailwindCSS.classAttributes": [
+    "class",
+    "ui"
+  ],
+  "tailwindCSS.experimental.classRegex": [
+    [
+      "ui:\\s*{([^)]*)\\s*}",
+      "(?:'|\"|`)([^']*)(?:'|\"|`)"
+    ]
+  ],
   "typescript.enablePromptUseWorkspaceTsdk": true,
   "typescript.preferences.importModuleSpecifier": "non-relative",
   "typescript.preferences.importModuleSpecifierEnding": "js",

package.json

@@ -52,7 +52,7 @@
     "build": "vite build",
     "preview": "vite preview",
     "test": "run-p \"lint\" \"test:types\" --",
-    "test:types": "vue-tsc --build --force",
+    "test:types": "vue-tsc --project ./tsconfig.app.json",
     "postinstall": "run-s \"generate:gltf-models\"",
     "generate:gltf-models": "gltf-codegen",
     "lint": "eslint .",
@@ -66,10 +66,11 @@
     "@antfu/eslint-config": "~3.5.1",
     "@iconify-json/ph": "~1.2.1",
     "@iconify/tailwind4": "~1.0.6",
+    "@nuxt/ui": "~3.0.2",
     "@rushstack/eslint-patch": "~1.10.4",
     "@tailwindcss/vite": "~4.1.3",
     "@todde.tv/gltf-type-toolkit": "~1.1.0",
-    "@tresjs/cientos": "~4.0.2",
+    "@tresjs/cientos": "~4.3.0",
     "@tresjs/core": "~4.2.10",
     "@tresjs/post-processing": "~2.1.0",
     "@tsconfig/node20": "~20.1.4",
@@ -88,7 +89,6 @@
     "npm-run-all2": "~6.2.2",
     "pinia": "~2.2.2",
     "postprocessing": "~6.36.7",
-    "tailwindcss": "~4.1.3",
     "three": "~0.168.0",
     "tsx": "~4.19.1",
     "typescript": "~5.5.4",

pnpm-lock.yaml

@@ -3,7 +3,9 @@ import { RouterView } from 'vue-router'
 </script>
 
 <template>
-  <RouterView />
+  <UApp>
+    <RouterView />
+  </UApp>
 </template>
 
 <style scoped>

src/App.vue

@@ -1,6 +1,5 @@
 @import 'tailwindcss';
-
-@config '../../tailwind.config.js';
+@import '@nuxt/ui';
 
 @plugin "@iconify/tailwind4" {
   prefix: 'icon';

src/assets/main.css

@@ -1,4 +1,6 @@
 import router from '@/router/index.js'
+// eslint-disable-next-line import/extensions
+import ui from '@nuxt/ui/vue-plugin'
 import { createPinia } from 'pinia'
 import { createApp } from 'vue'
 import App from './App.vue'
@@ -8,5 +10,6 @@ const app = createApp(App)
 
 app.use(createPinia())
 app.use(router)
+app.use(ui)
 
 app.mount('#app')

src/main.ts

@@ -1,5 +1,6 @@
 import { fileURLToPath, URL } from 'node:url'
-import tailwindcss from '@tailwindcss/vite'
+// eslint-disable-next-line import/extensions
+import ui from '@nuxt/ui/vite'
 // eslint-disable-next-line import/extensions
 import gltf from '@todde.tv/gltf-type-toolkit/vite'
 import { templateCompilerOptions } from '@tresjs/core'
@@ -10,15 +11,25 @@ import vueDevTools from 'vite-plugin-vue-devtools'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    vue({
+    vue({ // from `vue`
       ...templateCompilerOptions,
     }),
-    vueDevTools(),
-    tailwindcss(),
-    gltf({
+    vueDevTools(), // from `vite-plugin-vue-devtools`
+    gltf({ // from `@todde.tv/gltf-type-toolkit`
       customGltfLoaderModule: '@/utils/gltfLoader.ts',
       verbose: true,
     }),
+    ui({ // from `@nuxt/ui` (including `unplugin-vue-components` & `tailwindcss`)
+      colorMode: false,
+      components: { // from `unplugin-vue-components`
+      },
+      ui: {
+        colors: {
+          // neutral: 'slate',
+          // primary: 'green',
+        },
+      },
+    }),
   ],
   resolve: {
     alias: {