fix(vite): write theme templates (#5355)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

Author: antfu

docs/content/docs/1.getting-started/2.installation/2.vue.md

@@ -138,7 +138,7 @@ Internally, Nuxt UI relies on custom alias to resolve the theme types. If you're
   "compilerOptions": {
     "paths": {
       "#build/ui": [
-        "./node_modules/@nuxt/ui/.nuxt/ui"
+        "./node_modules/.nuxt-ui/ui"
       ]
     }
   }

package.json

@@ -77,18 +77,12 @@
       ]
     }
   },
-  "imports": {
-    "#build/ui/*": "./.nuxt/ui/*.ts",
-    "#build/ui.css": "./.nuxt/ui.css"
-  },
   "bin": {
     "nuxt-ui": "./cli/index.mjs"
   },
   "style": "./dist/runtime/index.css",
   "main": "./dist/module.mjs",
   "files": [
-    ".nuxt/ui",
-    ".nuxt/ui.css",
     "dist",
     "cli",
     "vue-plugin.d.ts"

playgrounds/vue/tsconfig.node.json

@@ -16,7 +16,14 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+
+    /* Aliases */
+    "paths": {
+      "#build/ui": [
+        "./node_modules/.nuxt-ui/ui"
+      ]
+    }
   },
   "include": ["vite.config.ts"]
 }

src/plugins/templates.ts

@@ -1,3 +1,5 @@
+import fs from 'node:fs'
+import path from 'node:path'
 import type { UnpluginOptions } from 'unplugin'
 import type { NuxtUIOptions } from '../unplugin'
 import { getTemplates } from '../templates'
@@ -10,9 +12,38 @@ export default function TemplatePlugin(options: NuxtUIOptions, appConfig: Record
   const templates = getTemplates(options, appConfig.ui)
   const templateKeys = new Set(templates.map(t => `#build/${t.filename}`))
 
+  async function writeTemplates(root: string) {
+    const map: Record<string, string> = {}
+    const dir = path.join(root, 'node_modules', '.nuxt-ui')
+    for (const template of templates) {
+      if (!template.write || !template.filename) {
+        continue
+      }
+      const filePath = path.join(dir, template.filename)
+      if (!fs.existsSync(path.dirname(filePath))) {
+        fs.mkdirSync(path.dirname(filePath), { recursive: true })
+      }
+      fs.writeFileSync(filePath, await template.getContents!({} as any))
+
+      map[`#build/${template.filename}`] = filePath
+    }
+    return map
+  }
+
   return {
     name: 'nuxt:ui:templates',
     enforce: 'pre',
+    vite: {
+      async config(config) {
+        const alias = await writeTemplates(config.root || process.cwd())
+
+        return {
+          resolve: {
+            alias
+          }
+        }
+      }
+    },
     resolveId(id) {
       if (templateKeys.has(id + '.ts')) {
         return id.replace('#build/', 'virtual:nuxt-ui-templates/') + '.ts'