@nuxt/ui 4.9.0 → 4.11.0

package/dist/unplugin.d.mts

@@ -2,7 +2,7 @@ import * as unplugin from 'unplugin';
 import { Options } from 'unplugin-auto-import/types';
 import { Options as Options$1 } from 'unplugin-vue-components/types';
 import colors from 'tailwindcss/colors';
-import { RuntimeOptions } from '@nuxt/icon';
+import { RuntimeOptions, ModuleOptions as ModuleOptions$1 } from '@nuxt/icon';
 import * as ui from '#build/ui';
 import { ModuleOptions } from './module.mjs';
 import { TVConfig } from '../dist/runtime/types/tv.js';
@@ -47,6 +47,7 @@ declare const _default: {
     reload: string;
     search: string;
     stop: string;
+    star: string;
     success: string;
     system: string;
     tip: string;
@@ -63,14 +64,20 @@ type AppConfigUI = {
     icons?: Partial<typeof _default>;
     prefix?: string;
 } & TVConfig<typeof ui>;
-interface NuxtUIOptions extends Omit<ModuleOptions, 'fonts' | 'colorMode' | 'content' | 'experimental'> {
+interface NuxtUIOptions extends Omit<ModuleOptions, 'fonts' | 'colorMode' | 'content'> {
     /** Whether to generate declaration files for auto-imported components. */
     dts?: boolean;
     ui?: AppConfigUI;
     /**
-     * Default props for the `Icon` component
+     * Default props for the `Icon` component, plus build-time icon bundling through
+     * `clientBundle`, which mirrors [`@nuxt/icon`'s option](https://github.com/nuxt/icon#client-bundle)
+     * (`icons`, `scan`, `sizeLimitKb`). Bundling is enabled by default for Nuxt UI's own icons
+     * (when their collection is installed); set `clientBundle: false` to opt out.
+     * @see https://ui.nuxt.com/docs/getting-started/integrations/icons/vue#collections
      */
-    icon?: Pick<RuntimeOptions, 'customize' | 'size' | 'mode'>;
+    icon?: Partial<Pick<RuntimeOptions, 'customize' | 'size' | 'mode'>> & {
+        clientBundle?: false | Omit<NonNullable<ModuleOptions$1['clientBundle']>, 'includeCustomCollections'>;
+    };
     /**
      * Enable or disable `@vueuse/core` color-mode integration
      * @defaultValue `true`

package/dist/unplugin.mjs

@@ -1,38 +1,57 @@
 import { fileURLToPath } from 'node:url';
-import { join, normalize } from 'pathe';
+import { join, normalize, relative } from 'pathe';
 import { createUnplugin } from 'unplugin';
 import { defu } from 'defu';
 import tailwind from '@tailwindcss/vite';
-import { b as getTemplates, p as publicComposables, d as defaultOptions, r as resolveColors, g as getDefaultConfig } from './shared/ui.BfHSFiIO.mjs';
+import { e as getTemplates, h as resolveExtraScanDirs, b as detectUsedComponents, f as publicComposables, g as getClientBundleIcons, p as parseIconName, d as defaultOptions, r as resolveColors, c as getDefaultConfig } from './shared/ui.DNq7CNkE.mjs';
 import fs from 'node:fs';
 import path from 'node:path';
+import { consola } from 'consola';
 import MagicString from 'magic-string';
 import { genSafeVariableName } from 'knitwork';
 import { resolvePathSync } from 'mlly';
 import { globSync } from 'tinyglobby';
 import AutoImportComponents from 'unplugin-vue-components';
 import AutoImport from 'unplugin-auto-import';
+import { IconUsageScanner, resolveBundleIcons, generateClientBundleCode, collectionNames } from '@nuxt/icon/utils';
 import '../dist/runtime/utils/index.js';
 import 'scule';
 import 'tailwindcss/colors';
 import '@nuxt/kit';
 import 'node:fs/promises';
 
-function TemplatePlugin(options, appConfig) {
-  const templates = getTemplates(options, appConfig.ui);
+function TemplatePlugin(options, appConfig, componentDir) {
+  const vue = {};
+  const templates = getTemplates(options, appConfig.ui, void 0, void 0, vue);
   const templateKeys = new Set(templates.map((t) => `#build/${t.filename}`));
   async function writeTemplates(root) {
     const map = {};
     const dir = path.join(root, "node_modules", ".nuxt-ui");
+    const createdDirs = /* @__PURE__ */ new Set();
     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 });
+      const fileDir = path.dirname(filePath);
+      if (!createdDirs.has(fileDir)) {
+        if (!fs.existsSync(fileDir)) {
+          fs.mkdirSync(fileDir, { recursive: true });
+        }
+        createdDirs.add(fileDir);
+      }
+      const contents = await template.getContents({});
+      let existing = null;
+      try {
+        existing = fs.readFileSync(filePath, "utf8");
+      } catch (error) {
+        if (error.code !== "ENOENT") {
+          throw error;
+        }
+      }
+      if (existing !== contents) {
+        fs.writeFileSync(filePath, contents);
       }
-      fs.writeFileSync(filePath, await template.getContents({}));
       map[`#build/${template.filename}`] = filePath;
     }
     return map;
@@ -42,7 +61,22 @@ function TemplatePlugin(options, appConfig) {
     enforce: "pre",
     vite: {
       async config(config) {
-        const alias = await writeTemplates(path.resolve(options.root || config.root || "."));
+        const root = path.resolve(options.root || config.root || ".");
+        if (options.experimental?.componentDetection && componentDir) {
+          const dirs = resolveExtraScanDirs(root, options.scanPackages, options.components ? options.components.dirs : void 0);
+          vue.detectedComponents = await detectUsedComponents(
+            [root, ...dirs],
+            options.prefix,
+            componentDir,
+            Array.isArray(options.experimental.componentDetection) ? options.experimental.componentDetection : void 0
+          );
+          if (vue.detectedComponents?.size) {
+            consola.success(`Nuxt UI detected ${vue.detectedComponents.size} components in use (including dependencies)`);
+          } else {
+            consola.info("Nuxt UI detected no components in use, including all components");
+          }
+        }
+        const alias = await writeTemplates(root);
         return {
           resolve: {
             alias
@@ -67,6 +101,7 @@ function PluginsPlugin(options) {
   const plugins = globSync(["**/*", "!*.d.ts"], { cwd: join(runtimeDir, "plugins"), absolute: true });
   plugins.unshift(resolvePathSync("../runtime/vue/plugins/router", { extensions: [".ts", ".mjs", ".js"], url: import.meta.url }));
   plugins.unshift(resolvePathSync("../runtime/vue/plugins/head", { extensions: [".ts", ".mjs", ".js"], url: import.meta.url }));
+  plugins.unshift(resolvePathSync("../runtime/vue/plugins/icons", { extensions: [".ts", ".mjs", ".js"], url: import.meta.url }));
   if (options.colorMode) {
     plugins.push(resolvePathSync("../runtime/vue/plugins/color-mode", { extensions: [".ts", ".mjs", ".js"], url: import.meta.url }));
   }
@@ -316,19 +351,112 @@ function AutoImportPlugin(options, meta) {
   return AutoImport.raw(pluginOptions, meta);
 }
 
+const VIRTUAL_ID = "virtual:nuxt-ui-icons";
+function parseUserIcon(icon) {
+  const parsed = parseIconName(icon, collectionNames, true);
+  return parsed ? `${parsed[0]}:${parsed[1]}` : void 0;
+}
+function IconsPlugin(options, appConfig) {
+  let root = options.root || process.cwd();
+  let isBuild = false;
+  let source;
+  let scanner;
+  let scanned = false;
+  const scannedIcons = /* @__PURE__ */ new Set();
+  async function generate() {
+    const clientBundle = options.icon?.clientBundle;
+    if (clientBundle === false) {
+      return "export function init() {}";
+    }
+    const userIcons = /* @__PURE__ */ new Map();
+    for (const icon of clientBundle?.icons ?? []) {
+      userIcons.set(parseUserIcon(icon) ?? icon.replace(/^i[-:]/, ""), icon);
+    }
+    if (clientBundle?.scan) {
+      scanner ||= new IconUsageScanner(clientBundle.scan);
+      if (!scanned) {
+        await scanner.scanFiles(root, scannedIcons);
+        scanned = true;
+      }
+    }
+    const { collections, failed } = await resolveBundleIcons({
+      icons: userIcons.keys(),
+      scannedIcons,
+      extraIcons: getClientBundleIcons(appConfig.ui?.icons),
+      resolvePaths: [root]
+    });
+    if (failed.length) {
+      const names = failed.map((name) => userIcons.get(name) ?? name);
+      const message = `[Nuxt UI] Could not resolve the icons requested in \`icon.clientBundle.icons\`: ${names.join(", ")}. Install their \`@iconify-json/*\` collection, or remove them.`;
+      if (isBuild) {
+        throw new Error(message);
+      }
+      consola.warn(message);
+    }
+    return generateClientBundleCode(collections, { sizeLimitKb: clientBundle?.sizeLimitKb }).code;
+  }
+  return {
+    name: "nuxt:ui:icons",
+    enforce: "pre",
+    resolveId(id) {
+      if (id === VIRTUAL_ID) {
+        return VIRTUAL_ID;
+      }
+    },
+    loadInclude: (id) => id === VIRTUAL_ID,
+    load() {
+      source ||= generate().catch((error) => {
+        source = void 0;
+        throw error;
+      });
+      return source;
+    },
+    vite: {
+      configResolved(config) {
+        root = options.root || config.root || root;
+        isBuild = config.command === "build";
+      },
+      // Like `@nuxt/icon`'s vite plugin: when an edit introduces icons the scan hasn't seen,
+      // regenerate the virtual module so `scan: true` doesn't go stale until a restart.
+      async handleHotUpdate({ file, read, server }) {
+        if (!scanner) {
+          return;
+        }
+        const path = relative(root, file);
+        if (path.startsWith("..") || !scanner.isFileMatch(path)) {
+          return;
+        }
+        const sizeBefore = scannedIcons.size;
+        scanner.extractFromCode(await read(), scannedIcons);
+        if (scannedIcons.size === sizeBefore) {
+          return;
+        }
+        source = void 0;
+        const mod = server.moduleGraph.getModuleById(VIRTUAL_ID);
+        if (mod) {
+          server.moduleGraph.invalidateModule(mod);
+          await server.reloadModule(mod);
+        }
+      }
+    }
+  };
+}
+
 const runtimeDir = normalize(fileURLToPath(new URL("./runtime", import.meta.url)));
 const NuxtUIPlugin = createUnplugin((_options = {}, meta) => {
   const options = defu(_options, { fonts: false }, defaultOptions);
   options.theme = options.theme || {};
   options.theme.colors = resolveColors(options.theme.colors);
-  const appConfig = defu({ ui: options.ui, colorMode: options.colorMode, icon: options.icon }, { ui: getDefaultConfig(options.theme) });
+  const { clientBundle, ...icon } = options.icon || {};
+  const appConfig = defu({ ui: options.ui, colorMode: options.colorMode, icon }, { ui: getDefaultConfig(options.theme) });
   return [
     NuxtEnvironmentPlugin(options),
     ComponentImportPlugin(options, meta),
     AutoImportPlugin(options, meta),
     tailwind(),
+    IconsPlugin(options, appConfig),
     PluginsPlugin(options),
-    TemplatePlugin(options, appConfig),
+    TemplatePlugin(options, appConfig, join(runtimeDir, "components")),
     AppConfigPlugin(options, appConfig),
     {
       name: "nuxt:ui:plugins-duplication-detection",

package/dist/vite.mjs

@@ -4,20 +4,22 @@ import 'pathe';
 import 'unplugin';
 import 'defu';
 import '@tailwindcss/vite';
-import './shared/ui.BfHSFiIO.mjs';
+import './shared/ui.DNq7CNkE.mjs';
 import '../dist/runtime/utils/index.js';
 import 'scule';
 import 'knitwork';
 import 'tailwindcss/colors';
 import '@nuxt/kit';
+import 'node:fs';
 import 'node:fs/promises';
+import 'consola';
 import 'tinyglobby';
-import 'node:fs';
+import 'mlly';
 import 'node:path';
 import 'magic-string';
-import 'mlly';
 import 'unplugin-vue-components';
 import 'unplugin-auto-import';
+import '@nuxt/icon/utils';
 
 const vite = NuxtUIPlugin.vite;
 

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@nuxt/ui",
   "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
-  "version": "4.9.0",
-  "packageManager": "pnpm@11.6.0",
+  "version": "4.11.0",
+  "packageManager": "pnpm@11.22.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/ui.git"
@@ -98,6 +98,9 @@
   },
   "style": "./dist/runtime/index.css",
   "main": "./dist/module.mjs",
+  "sideEffects": [
+    "**/*.css"
+  ],
   "files": [
     ".nuxt/ui.static.css",
     "dist",
@@ -124,44 +127,45 @@
     "test": "vitest",
     "test:vue": "vitest --project vue",
     "test:nuxt": "vitest --project nuxt",
+    "bench": "vitest bench --project vue",
     "release": "release-it"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.7.6",
+    "@floating-ui/dom": "^1.8.0",
     "@iconify/vue": "^5.0.1",
-    "@internationalized/date": "^3.12.2",
+    "@internationalized/date": "^3.12.3",
     "@internationalized/number": "^3.6.7",
     "@nuxt/fonts": "^0.14.0",
-    "@nuxt/icon": "^2.2.3",
-    "@nuxt/kit": "^4.4.8",
-    "@nuxt/schema": "^4.4.8",
+    "@nuxt/icon": "^2.5.0",
+    "@nuxt/kit": "^4.5.2",
+    "@nuxt/schema": "^4.5.2",
     "@nuxtjs/color-mode": "^4.0.1",
     "@standard-schema/spec": "^1.1.0",
-    "@tailwindcss/postcss": "^4.3.1",
-    "@tailwindcss/vite": "^4.3.1",
+    "@tailwindcss/postcss": "^4.3.3",
+    "@tailwindcss/vite": "^4.3.3",
     "@tanstack/vue-table": "^8.21.3",
-    "@tanstack/vue-virtual": "^3.13.28",
-    "@tiptap/core": "^3.26.1",
-    "@tiptap/extension-bubble-menu": "^3.26.1",
-    "@tiptap/extension-code": "^3.26.1",
-    "@tiptap/extension-collaboration": "^3.26.1",
-    "@tiptap/extension-drag-handle": "^3.26.1",
-    "@tiptap/extension-drag-handle-vue-3": "^3.26.1",
-    "@tiptap/extension-floating-menu": "^3.26.1",
-    "@tiptap/extension-horizontal-rule": "^3.26.1",
-    "@tiptap/extension-image": "^3.26.1",
-    "@tiptap/extension-mention": "^3.26.1",
-    "@tiptap/extension-node-range": "^3.26.1",
-    "@tiptap/extension-placeholder": "^3.26.1",
-    "@tiptap/markdown": "^3.26.1",
-    "@tiptap/pm": "^3.26.1",
-    "@tiptap/starter-kit": "^3.26.1",
-    "@tiptap/suggestion": "^3.26.1",
-    "@tiptap/vue-3": "^3.26.1",
-    "@unhead/vue": "^2.1.15",
-    "@vueuse/core": "^14.3.0",
-    "@vueuse/integrations": "^14.3.0",
-    "@vueuse/shared": "^14.3.0",
+    "@tanstack/vue-virtual": "^3.13.35",
+    "@tiptap/core": "^3.29.2",
+    "@tiptap/extension-bubble-menu": "^3.29.2",
+    "@tiptap/extension-code": "^3.29.2",
+    "@tiptap/extension-collaboration": "^3.29.2",
+    "@tiptap/extension-drag-handle": "^3.29.2",
+    "@tiptap/extension-drag-handle-vue-3": "^3.29.2",
+    "@tiptap/extension-floating-menu": "^3.29.2",
+    "@tiptap/extension-horizontal-rule": "^3.29.2",
+    "@tiptap/extension-image": "^3.29.2",
+    "@tiptap/extension-mention": "^3.29.2",
+    "@tiptap/extension-node-range": "^3.29.2",
+    "@tiptap/extension-placeholder": "^3.29.2",
+    "@tiptap/markdown": "^3.29.2",
+    "@tiptap/pm": "^3.29.2",
+    "@tiptap/starter-kit": "^3.29.2",
+    "@tiptap/suggestion": "^3.29.2",
+    "@tiptap/vue-3": "^3.29.2",
+    "@unhead/vue": "^3.3.2",
+    "@vueuse/core": "^14.4.0",
+    "@vueuse/integrations": "^14.4.0",
+    "@vueuse/shared": "^14.4.0",
     "colortranslator": "^5.0.0",
     "consola": "^3.4.2",
     "defu": "^6.1.7",
@@ -172,47 +176,48 @@
     "embla-carousel-fade": "^8.6.0",
     "embla-carousel-vue": "^8.6.0",
     "embla-carousel-wheel-gestures": "^8.1.0",
-    "fuse.js": "^7.4.2",
+    "fuse.js": "^7.5.0",
     "hookable": "^6.1.1",
     "knitwork": "^1.3.0",
-    "magic-string": "^0.30.21",
+    "magic-string": "^1.2.0",
     "mlly": "^1.8.2",
-    "motion-v": "^2.3.0",
-    "ohash": "^2.0.11",
+    "motion-v": "^2.4.0",
+    "ohash": "^2.0.12",
     "pathe": "^2.0.3",
-    "reka-ui": "2.9.10",
+    "reka-ui": "2.10.3",
     "scule": "^1.3.0",
     "tailwind-merge": "^3.6.0",
     "tailwind-variants": "^3.2.2",
-    "tailwindcss": "^4.3.1",
+    "tailwindcss": "^4.3.3",
     "tinyglobby": "^0.2.17",
     "ufo": "^1.6.4",
-    "unplugin": "^3.0.0",
-    "unplugin-auto-import": "^21.0.0",
+    "unplugin": "^3.3.0",
+    "unplugin-auto-import": "^21.1.0",
     "unplugin-vue-components": "^32.1.0",
     "vaul-vue": "0.4.1",
-    "vue-component-type-helpers": "^3.3.5"
+    "vue-component-type-helpers": "^3.3.10"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "^1.16.0",
-    "@nuxt/module-builder": "^1.0.2",
-    "@nuxt/test-utils": "^4.0.2",
-    "@release-it/conventional-changelog": "^10.0.6",
+    "@codspeed/vitest-plugin": "^5.7.1",
+    "@nuxt/eslint-config": "^1.17.0",
+    "@nuxt/module-builder": "^1.0.3",
+    "@nuxt/test-utils": "^4.1.0",
+    "@release-it/conventional-changelog": "^12.0.0",
     "@tanstack/table-core": "^8.21.3",
-    "@vitejs/plugin-vue": "^6.0.7",
+    "@vitejs/plugin-vue": "^6.0.8",
     "@vue/test-utils": "^2.4.11",
-    "ai": "^6.0.205",
+    "ai": "^7.0.66",
     "embla-carousel": "^8.6.0",
-    "eslint": "^10.5.0",
-    "happy-dom": "^20.10.3",
-    "nuxt": "^4.4.8",
-    "release-it": "^19.2.4",
+    "eslint": "^10.8.1",
+    "happy-dom": "^20.11.2",
+    "nuxt": "^4.5.2",
+    "release-it": "^21.0.2",
     "unbuild": "^3.6.1",
-    "vitest": "^4.1.8",
+    "vitest": "^4.1.10",
     "vitest-axe": "^0.1.0",
     "vitest-environment-nuxt": "^2.0.0",
-    "vue": "^3.5.38",
-    "vue-tsc": "^3.3.5"
+    "vue": "^3.5.41",
+    "vue-tsc": "^3.3.10"
   },
   "peerDependencies": {
     "@inertiajs/vue3": "^2.0.7 || ^3.0.0",
@@ -236,10 +241,11 @@
     "@tiptap/starter-kit": "^3",
     "@tiptap/suggestion": "^3",
     "@tiptap/vue-3": "^3",
+    "ai": "^6 || ^7",
     "joi": "^18.0.0",
     "superstruct": "^2.0.0",
     "tailwindcss": "^4.0.0",
-    "typescript": "^5.6.3 || ^6.0.0",
+    "typescript": "^5.6.3 || ^6.0.0 || ^7.0.0",
     "valibot": "^1.0.0",
     "vue-router": "^4.5.0 || ^5.0.0",
     "yup": "^1.7.0",
@@ -258,6 +264,9 @@
     "@nuxt/content": {
       "optional": true
     },
+    "ai": {
+      "optional": true
+    },
     "joi": {
       "optional": true
     },