@nuxt/ui 4.2.0 → 4.3.0

package/dist/unplugin.mjs

@@ -3,7 +3,7 @@ import { join, normalize } from 'pathe';
 import { createUnplugin } from 'unplugin';
 import { defu } from 'defu';
 import tailwind from '@tailwindcss/vite';
-import { g as getTemplates, d as defaultOptions, r as resolveColors, a as getDefaultConfig } from './shared/ui.B77q-Dvh.mjs';
+import { g as getTemplates, d as defaultOptions, r as resolveColors, a as getDefaultConfig } from './shared/ui.DegC4tw1.mjs';
 import fs from 'node:fs';
 import path from 'node:path';
 import MagicString from 'magic-string';
@@ -146,56 +146,80 @@ function AppConfigPlugin(_options, appConfig) {
   };
 }
 
-function ComponentImportPlugin(options, meta) {
-  const components = globSync("**/*.vue", {
-    cwd: join(runtimeDir, "components"),
-    ignore: [
-      !options.colorMode && "color-mode/**/*.vue",
-      "content/*.vue",
-      "prose/**/*.vue"
-    ].filter(Boolean)
-  });
-  const componentNames = new Set(components.map((c) => `${options.prefix}${c.split("/").pop()?.replace(/\.vue$/, "")}`));
-  const componentPaths = new Map(components.map((c) => {
-    const name = c.replace(/\.vue$/, "");
-    const componentName = `${options.prefix}${name.split("/").pop()}`;
-    return [componentName, c];
-  }));
-  const overrides = globSync("**/*.vue", {
-    cwd: join(runtimeDir, "vue/components"),
-    ignore: [
-      !options.colorMode && "color-mode/**/*.vue"
-    ].filter(Boolean)
-  });
-  const overrideNames = new Set(overrides.map((c) => `${options.prefix}${c.split("/").pop()?.replace(/\.vue$/, "")}`));
-  const overridePaths = new Map(overrides.map((c) => {
-    const name = c.replace(/\.vue$/, "");
-    const componentName = `${options.prefix}${name.split("/").pop()}`;
+function resolveRouterMode(options) {
+  if (options.router === false) {
+    return "none";
+  }
+  if (options.router === "inertia") {
+    return "inertia";
+  }
+  if (options.router === void 0 && options.inertia === true) {
+    return "inertia";
+  }
+  return "vue-router";
+}
+
+function createComponentSource(cwd, prefix, ignore = []) {
+  const files = globSync("**/*.vue", { cwd, ignore: ignore.filter(Boolean) });
+  const names = new Set(files.map((c) => `${prefix}${c.split("/").pop()?.replace(/\.vue$/, "")}`));
+  const paths = new Map(files.map((c) => {
+    const componentName = `${prefix}${c.split("/").pop()?.replace(/\.vue$/, "")}`;
     return [componentName, c];
   }));
-  const inertiaOverrides = globSync("**/*.vue", {
-    cwd: join(runtimeDir, "inertia/components")
-  });
-  const inertiaOverrideNames = new Set(inertiaOverrides.map((c) => `${options.prefix}${c.replace(/\.vue$/, "")}`));
+  return {
+    has: (name) => names.has(name),
+    resolve: (componentName) => {
+      const relativePath = paths.get(componentName);
+      if (!relativePath) return;
+      return { name: "default", from: join(cwd, relativePath) };
+    },
+    resolveFile: (filename) => {
+      const componentName = `${prefix}${filename}`;
+      const relativePath = paths.get(componentName);
+      if (!relativePath) return;
+      return join(cwd, relativePath);
+    }
+  };
+}
+function ComponentImportPlugin(options, meta) {
+  const colorModeIgnore = !options.colorMode ? ["color-mode/**/*.vue"] : [];
+  const routerMode = resolveRouterMode(options);
+  const routerOverrides = {
+    "vue-router": createComponentSource(join(runtimeDir, "vue/overrides/vue-router"), options.prefix),
+    "inertia": createComponentSource(join(runtimeDir, "vue/overrides/inertia"), options.prefix),
+    "none": createComponentSource(join(runtimeDir, "vue/overrides/none"), options.prefix)
+  };
+  const unpluginComponents = createComponentSource(
+    join(runtimeDir, "vue/components"),
+    options.prefix,
+    colorModeIgnore
+  );
+  const defaultComponents = createComponentSource(
+    join(runtimeDir, "components"),
+    options.prefix,
+    [...colorModeIgnore, "content/*.vue", "prose/**/*.vue"]
+  );
+  const sources = [routerOverrides[routerMode], unpluginComponents, defaultComponents].filter((s) => !!s);
+  const packagesToScan = [
+    "@nuxt/ui",
+    "@compodium/examples",
+    ...Array.isArray(options.scanPackages) ? options.scanPackages : []
+  ];
+  const escapeRegex = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const packagesRegex = packagesToScan.map(escapeRegex).join("|");
+  const excludeRegex = new RegExp(`[\\\\/]node_modules[\\\\/](?!\\.pnpm|${packagesRegex})`);
   const pluginOptions = defu(options.components, {
     dts: options.dts ?? true,
     exclude: [
-      /[\\/]node_modules[\\/](?!\.pnpm|@nuxt\/ui|@compodium\/examples)/,
+      excludeRegex,
       /[\\/]\.git[\\/]/,
       /[\\/]\.nuxt[\\/]/
     ],
     resolvers: [
       (componentName) => {
-        if (options.inertia && inertiaOverrideNames.has(componentName)) {
-          return { name: "default", from: join(runtimeDir, "inertia/components", `${componentName.slice(options.prefix.length)}.vue`) };
-        }
-        if (overrideNames.has(componentName)) {
-          const relativePath = overridePaths.get(componentName);
-          return { name: "default", from: join(runtimeDir, "vue/components", relativePath) };
-        }
-        if (componentNames.has(componentName)) {
-          const relativePath = componentPaths.get(componentName);
-          return { name: "default", from: join(runtimeDir, "components", relativePath) };
+        for (const source of sources) {
+          const resolved = source.resolve(componentName);
+          if (resolved) return resolved;
         }
       }
     ]
@@ -216,12 +240,11 @@ function ComponentImportPlugin(options, meta) {
           return;
         }
         const filename = id.match(/([^/]+)\.vue$/)?.[1];
-        if (filename && options.inertia && inertiaOverrideNames.has(`${options.prefix}${filename}`)) {
-          return join(runtimeDir, "inertia/components", `${filename}.vue`);
-        }
-        if (filename && overrideNames.has(`${options.prefix}${filename}`)) {
-          const relativePath = overridePaths.get(`${options.prefix}${filename}`);
-          return join(runtimeDir, "vue/components", relativePath);
+        if (filename) {
+          for (const source of sources) {
+            const resolved = source.resolveFile(filename);
+            if (resolved) return resolved;
+          }
         }
       }
     },
@@ -231,7 +254,9 @@ function ComponentImportPlugin(options, meta) {
 const RELATIVE_IMPORT_RE = /^\.{1,2}\//;
 
 function NuxtEnvironmentPlugin(options) {
-  const stubPath = resolvePathSync(options.inertia ? "../runtime/inertia/stubs" : "../runtime/vue/stubs", { extensions: [".ts", ".mjs", ".js"], url: import.meta.url });
+  const routerMode = resolveRouterMode(options);
+  const stubsPath = `../runtime/vue/stubs/${routerMode}`;
+  const stubPath = resolvePathSync(stubsPath, { extensions: [".ts", ".mjs", ".js"], url: import.meta.url });
   return {
     name: "nuxt:ui",
     enforce: "pre",

package/dist/vite.mjs

@@ -4,7 +4,7 @@ import 'pathe';
 import 'unplugin';
 import 'defu';
 import '@tailwindcss/vite';
-import './shared/ui.B77q-Dvh.mjs';
+import './shared/ui.DegC4tw1.mjs';
 import '../dist/runtime/utils/index.js';
 import 'scule';
 import 'knitwork';

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.2.0",
-  "packageManager": "pnpm@10.22.0",
+  "version": "4.3.0",
+  "packageManager": "pnpm@10.26.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/ui.git"
@@ -87,12 +87,16 @@
       ]
     }
   },
+  "imports": {
+    "#build/ui.css": "./.nuxt/ui.css"
+  },
   "bin": {
     "nuxt-ui": "./cli/index.mjs"
   },
   "style": "./dist/runtime/index.css",
   "main": "./dist/module.mjs",
   "files": [
+    ".nuxt/ui.css",
     "dist",
     "cli",
     "vue-plugin.d.ts"
@@ -111,26 +115,40 @@
     "lint:fix": "eslint . --fix",
     "typecheck": "vue-tsc --noEmit && nuxt typecheck playgrounds/nuxt && nuxt typecheck docs && cd playgrounds/vue && vue-tsc --noEmit",
     "test": "vitest",
-    "test:vue": "vitest -c vitest.vue.config.ts",
+    "test:vue": "vitest --project vue",
+    "test:nuxt": "vitest --project nuxt",
     "release": "release-it"
   },
   "dependencies": {
     "@iconify/vue": "^5.0.0",
-    "@internationalized/date": "^3.10.0",
+    "@internationalized/date": "^3.10.1",
     "@internationalized/number": "^3.6.5",
     "@nuxt/fonts": "^0.12.1",
-    "@nuxt/icon": "^2.1.0",
-    "@nuxt/kit": "^4.2.1",
-    "@nuxt/schema": "^4.2.1",
+    "@nuxt/icon": "^2.1.1",
+    "@nuxt/kit": "^4.2.2",
+    "@nuxt/schema": "^4.2.2",
     "@nuxtjs/color-mode": "^3.5.2",
-    "@standard-schema/spec": "^1.0.0",
-    "@tailwindcss/postcss": "^4.1.17",
-    "@tailwindcss/vite": "^4.1.17",
+    "@standard-schema/spec": "^1.1.0",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@tailwindcss/vite": "^4.1.18",
     "@tanstack/vue-table": "^8.21.3",
-    "@tanstack/vue-virtual": "^3.13.12",
+    "@tanstack/vue-virtual": "^3.13.13",
+    "@tiptap/core": "3.13.0",
+    "@tiptap/extension-bubble-menu": "3.13.0",
+    "@tiptap/extension-drag-handle-vue-3": "3.13.0",
+    "@tiptap/extension-floating-menu": "3.13.0",
+    "@tiptap/extension-horizontal-rule": "3.13.0",
+    "@tiptap/extension-image": "3.13.0",
+    "@tiptap/extension-mention": "3.13.0",
+    "@tiptap/extension-placeholder": "3.13.0",
+    "@tiptap/markdown": "3.13.0",
+    "@tiptap/pm": "3.13.0",
+    "@tiptap/starter-kit": "3.13.0",
+    "@tiptap/suggestion": "3.13.0",
+    "@tiptap/vue-3": "3.13.0",
     "@unhead/vue": "^2.0.19",
-    "@vueuse/core": "^13.9.0",
-    "@vueuse/integrations": "^13.9.0",
+    "@vueuse/core": "^14.1.0",
+    "@vueuse/integrations": "^14.1.0",
     "colortranslator": "^5.0.0",
     "consola": "^3.4.2",
     "defu": "^6.1.4",
@@ -149,34 +167,34 @@
     "motion-v": "^1.7.3",
     "ohash": "^2.0.11",
     "pathe": "^2.0.3",
-    "reka-ui": "2.6.0",
+    "reka-ui": "2.6.1",
     "scule": "^1.3.0",
     "tailwind-merge": "^3.4.0",
-    "tailwind-variants": "^3.1.1",
-    "tailwindcss": "^4.1.17",
+    "tailwind-variants": "^3.2.2",
+    "tailwindcss": "^4.1.18",
     "tinyglobby": "^0.2.15",
-    "unplugin": "^2.3.10",
-    "unplugin-auto-import": "^20.2.0",
+    "unplugin": "^2.3.11",
+    "unplugin-auto-import": "^20.3.0",
     "unplugin-vue-components": "^30.0.0",
     "vaul-vue": "0.4.1",
-    "vue-component-type-helpers": "^3.1.4"
+    "vue-component-type-helpers": "^3.1.5"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "^1.10.0",
+    "@nuxt/eslint-config": "^1.12.1",
     "@nuxt/module-builder": "^1.0.2",
-    "@nuxt/test-utils": "^3.20.1",
-    "@release-it/conventional-changelog": "^10.0.2",
+    "@nuxt/test-utils": "^3.21.0",
+    "@release-it/conventional-changelog": "^10.0.4",
     "@vue/test-utils": "^2.4.6",
-    "ai": "^5.0.93",
+    "ai": "^5.0.114",
     "embla-carousel": "^8.6.0",
-    "eslint": "^9.39.1",
-    "happy-dom": "^20.0.10",
-    "nuxt": "^4.2.1",
-    "release-it": "^19.0.6",
+    "eslint": "^9.39.2",
+    "happy-dom": "^20.0.11",
+    "nuxt": "^4.2.2",
+    "release-it": "^19.1.0",
     "vitest": "^3.2.4",
     "vitest-axe": "^0.1.0",
     "vitest-environment-nuxt": "^1.0.1",
-    "vue-tsc": "^3.1.4"
+    "vue-tsc": "^3.1.5"
   },
   "peerDependencies": {
     "@inertiajs/vue3": "^2.0.7",
@@ -216,11 +234,11 @@
     }
   },
   "resolutions": {
-    "@nuxt/kit": "^4.2.1",
+    "@nuxt/kit": "^4.2.2",
     "@nuxt/ui": "workspace:*",
-    "debug": "4.3.7",
     "typescript": "5.8.3",
-    "unplugin": "^2.3.10"
+    "unplugin": "^2.3.11",
+    "c12": "^3.3.2"
   },
   "keywords": [
     "nuxt-ui",

package/dist/runtime/inertia/stubs.d.ts

@@ -1,44 +0,0 @@
-import type { Ref } from 'vue';
-import type { NuxtApp } from '#app';
-export { useHead } from '@unhead/vue';
-export { useAppConfig } from '../vue/composables/useAppConfig';
-export { defineShortcuts } from '../composables/defineShortcuts';
-export { defineLocale } from '../composables/defineLocale';
-export { useLocale } from '../composables/useLocale';
-export declare const useRoute: () => {
-    fullPath: string;
-};
-export declare const useRouter: () => void;
-export declare const clearError: () => void;
-export declare const useColorMode: () => {
-    forced: boolean;
-    preference?: undefined;
-    readonly value?: undefined;
-} | {
-    preference: "dark" | "light" | "system";
-    readonly value: import("@vueuse/core").BasicColorMode;
-    forced: boolean;
-};
-export declare const useCookie: <T = string>(_name: string, _options?: Record<string, any>) => {
-    value: T;
-    get: () => T;
-    set: () => void;
-    update: () => void;
-    refresh: () => Promise<Awaited<T>>;
-    remove: () => void;
-};
-export declare const useState: <T>(key: string, init: () => T) => Ref<T>;
-export declare function useNuxtApp(): {
-    isHydrating: boolean;
-    payload: {
-        serverRendered: boolean;
-    };
-    hooks: import("hookable").Hookable<Record<string, any>, string>;
-    hook: <NameT extends string>(name: NameT, function_: any, options?: {
-        allowDeprecated?: boolean;
-    }) => () => void;
-};
-export declare function useRuntimeHook(name: string, fn: (...args: any[]) => void): void;
-export declare function defineNuxtPlugin(plugin: (nuxtApp: NuxtApp) => void): {
-    install(app: import("vue").App<any>): void;
-};

package/dist/runtime/inertia/stubs.js

@@ -1,84 +0,0 @@
-import { ref, onScopeDispose } from "vue";
-import { createHooks } from "hookable";
-import { usePage } from "@inertiajs/vue3";
-import { useColorMode as useColorModeVueUse } from "@vueuse/core";
-import appConfig from "#build/app.config";
-export { useHead } from "@unhead/vue";
-export { useAppConfig } from "../vue/composables/useAppConfig.js";
-export { defineShortcuts } from "../composables/defineShortcuts.js";
-export { defineLocale } from "../composables/defineLocale.js";
-export { useLocale } from "../composables/useLocale.js";
-export const useRoute = () => {
-  const page = usePage();
-  return {
-    fullPath: page.url
-  };
-};
-export const useRouter = () => {
-};
-export const clearError = () => {
-};
-export const useColorMode = () => {
-  if (!appConfig.colorMode) {
-    return {
-      forced: true
-    };
-  }
-  const { store, system } = useColorModeVueUse();
-  return {
-    get preference() {
-      return store.value === "auto" ? "system" : store.value;
-    },
-    set preference(value) {
-      store.value = value === "system" ? "auto" : value;
-    },
-    get value() {
-      return store.value === "auto" ? system.value : store.value;
-    },
-    forced: false
-  };
-};
-export const useCookie = (_name, _options = {}) => {
-  const value = ref(_options?.default?.() ?? null);
-  return {
-    value: value.value,
-    get: () => value.value,
-    set: () => {
-    },
-    update: () => {
-    },
-    refresh: () => Promise.resolve(value.value),
-    remove: () => {
-    }
-  };
-};
-const state = {};
-export const useState = (key, init) => {
-  if (state[key]) {
-    return state[key];
-  }
-  const value = ref(init());
-  state[key] = value;
-  return value;
-};
-const hooks = createHooks();
-export function useNuxtApp() {
-  return {
-    isHydrating: true,
-    payload: { serverRendered: typeof window === "undefined" },
-    hooks,
-    hook: hooks.hook
-  };
-}
-export function useRuntimeHook(name, fn) {
-  const nuxtApp = useNuxtApp();
-  const unregister = nuxtApp.hook(name, fn);
-  onScopeDispose(unregister);
-}
-export function defineNuxtPlugin(plugin) {
-  return {
-    install(app) {
-      app.runWithContext(() => plugin({ vueApp: app }));
-    }
-  };
-}