unplugin · userquin · Jan 28, 2026 · Jan 28, 2026 · Jan 28, 2026 · Jan 28, 2026
@@ -0,0 +1 @@
+* text=auto eol=lf
@@ -19,6 +19,7 @@ declare module 'vue' {
     ComponentAsync: typeof import('./src/components/ComponentAsync.vue')['default']
     ComponentB: typeof import('./src/components/ComponentB.vue')['default']
     ComponentC: typeof import('./src/components/component-c.vue')['default']
+    ComponentCollision: typeof import('./src/layer-components/sort-b/ComponentCollision.vue')['default']
     ComponentD: typeof import('./src/components/ComponentD.vue')['default']
     IFaSolidDiceFive: typeof import('~icons/fa-solid/dice-five')['default']
     IHeroiconsOutlineMenuAlt2: typeof import('~icons/heroicons-outline/menu-alt2')['default']
@@ -33,6 +34,7 @@ declare module 'vue' {
     Recursive: typeof import('./src/components/Recursive.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SortComponent: typeof import('./src/components/sort/Component.vue')['default']
     UiButton: typeof import('./src/components/ui/button.vue')['default']
     UiNestedCheckbox: typeof import('./src/components/ui/nested/checkbox.vue')['default']
     VanRadio: typeof import('vant/es')['Radio']

@@ -82,6 +82,10 @@ const radio = ref('1')
     <i-mdi:dice-d12 />
     <i-mdi-light-alarm />
   </div>
+
+  <div class="block">
+    <SortComponent />
+  </div>
 </template>
 
 <style scoped>

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <h3>Component Collision: <code>sort-a/ComponentCollision.vue</code></h3>
+    <slot />
+  </div>
+</template>
@@ -0,0 +1,7 @@
+<template>
+  <ComponentCollision>
+    <div>
+      <strong>Should display Component Collision: <code>sort-b/ComponentCollision.vue</code></strong>
+    </div>
+  </ComponentCollision>
+</template>
@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <h3>Component Collision: <code>sort-b/ComponentCollision.vue</code></h3>
+    <slot />
+  </div>
+</template>
@@ -22,10 +22,12 @@ const config: UserConfig = {
     Icons(),
     Inspect(),
     Components({
+      dirs: ['src/components', 'src/layer-components'],
       extensions: ['vue', 'md', 'svg'],
+      sort: 'pattern-desc',
       directoryAsNamespace: true,
       dts: true,
-      globalNamespaces: ['global'],
+      globalNamespaces: ['global', 'sort-a', 'sort-b'],
       include: [/\.vue($|\?)/, /\.md($|\?)/],
       resolvers: [
         (name) => {

@@ -10,7 +10,7 @@
   "homepage": "https://github.com/unplugin/unplugin-vue-components#readme",
   "repository": {
     "type": "git",
-    "url": "https://github.com/unplugin/unplugin-vue-components.git"
+    "url": "git+https://github.com/unplugin/unplugin-vue-components.git"
   },
   "bugs": "https://github.com/unplugin/unplugin-vue-components/issues",
   "exports": {
@@ -51,6 +51,7 @@
     "typecheck": "tsgo",
     "release": "bumpp",
     "test": "vitest",
+    "test:debug:sort": "DEBUG=unplugin-vue-components:glob vitest -t sort",
     "test:update": "vitest -u"
   },
   "peerDependencies": {
@@ -69,7 +70,7 @@
     "mlly": "^1.8.0",
     "obug": "^2.1.1",
     "picomatch": "^4.0.3",
-    "tinyglobby": "^0.2.15",
+    "tinyglobby": "https://pkg.pr.new/tinyglobby@46902a8",
     "unplugin": "^2.3.11",
     "unplugin-utils": "^0.3.1"
   },

@@ -13,11 +13,12 @@ export function searchComponents(ctx: Context) {
     cwd: root,
     absolute: true,
     expandDirectories: false,
+    sort: ctx.options.sort,
   })
 
-  if (!files.length && !ctx.options.resolvers?.length)
-
+  if (!files.length && !ctx.options.resolvers?.length) {
     console.warn('[unplugin-vue-components] no components found')
+  }
 
   debug(`${files.length} components found.`)
 

@@ -5,7 +5,7 @@ import { isPackageExists } from 'local-pkg'
 import { detectTypeImports } from './type-imports/detect'
 import { escapeSpecialChars } from './utils'
 
-export const defaultOptions: Omit<Required<Options>, 'include' | 'exclude' | 'excludeNames' | 'transformer' | 'globs' | 'globsExclude' | 'directives' | 'types' | 'version'> = {
+export const defaultOptions: Omit<Required<Options>, 'include' | 'exclude' | 'excludeNames' | 'transformer' | 'globs' | 'globsExclude' | 'directives' | 'types' | 'version' | 'sort'> = {
   dirs: 'src/components',
   extensions: 'vue',
   deep: true,
@@ -85,6 +85,18 @@ export function resolveOptions(options: Options, root: string): ResolvedOptions
     return false
   })
 
+  // tinyglobby doesn't support sorting patterns, we just sort them
+  // check the WARNING added to sort option at types.ts
+  const sort = options.sort
+  switch (true) {
+    case sort === 'pattern-asc':
+      resolved.globs.sort((a, b) => a.localeCompare(b))
+      break
+    case sort === 'pattern-desc':
+      resolved.globs.sort((a, b) => b.localeCompare(a))
+      break
+  }
+
   resolved.dts = !resolved.dts
     ? false
     : resolve(

@@ -1,4 +1,5 @@
 import type { Awaitable } from '@antfu/utils'
+import type { Sort } from 'tinyglobby'
 import type { TransformResult } from 'unplugin'
 import type { FilterPattern } from 'unplugin-utils'
 
@@ -219,11 +220,35 @@ export interface Options {
    * @default 'default'
    */
   syncMode?: 'default' | 'append' | 'overwrite'
+
+  /**
+   * Sort the results.
+   * - `asc`: Sorts the results in ascending order.
+   * - `desc`: Sorts the results in descending order.
+   * - `pattern`: Sorts the results by pattern precedence.
+   * - `pattern-asc`: Sorts the results by pattern precedence and then ascending.
+   * - `pattern-desc`: Sorts the results by pattern precedence and then descending.
+   * - `(a: string, b: string) => number`: A custom sort function.
+   *
+   * **WARNING**: If you have multiple directories (e.g. layers), and you
+   * are using `pattern`, `pattern-asc` or `pattern-desc`, you must configure the
+   * `dirs` array carefully:
+   * - `pattern`: The files will be sorted using the entries in the `dirs` array: files for the first dir, then files for the second dir, and so on (the order matters).
+   * - `pattern-asc`: The `dirs` will be sorted ascending before the file search, so files will be sorted based on the new sorted `dirs` order.
+   * - `pattern-desc`: The `dirs` will be sorted descending before the file search, so files will be sorted based on the new sorted `dirs` order.
+   *
+   * Check the [src/component/sort-a](https://github.com/unplugin/unplugin-vue-components/tree/main/examples/vite-vue3/src/components/sort-a),
+   * [src/layer-component/sort-b](https://github.com/unplugin/unplugin-vue-components/tree/main/examples/vite-vue3/src/components/sort-a) and the
+   * [vite.config.ts](https://github.com/unplugin/unplugin-vue-components/blob/main/examples/vite-vue3/vite.config.ts) files.
+   *
+   * @default undefined
+   */
+  sort?: Sort
 }
 
 export type ResolvedOptions = Omit<
   Required<Options>,
-'resolvers' | 'extensions' | 'dirs' | 'globalComponentsDeclaration'
+  'resolvers' | 'extensions' | 'dirs' | 'globalComponentsDeclaration' | 'sort'
 > & {
   resolvers: ComponentResolverObject[]
   extensions: string[]
@@ -234,6 +259,7 @@ export type ResolvedOptions = Omit<
   dts: string | false
   dtsTsx: boolean
   root: string
+  sort?: Sort
 }
 
 export type ComponentsImportMap = Record<string, string[] | undefined>

@@ -61,10 +61,12 @@ declare module 'vue' {
     CustomPrefixButton: typeof import('./examples/vite-vue3/src/components/ui/button.vue')['default']
     CustomPrefixCheckbox: typeof import('./examples/vite-vue3/src/components/ui/nested/checkbox.vue')['default']
     CustomPrefixCollapseFolderAndComponentFromRoot: typeof import('./examples/vite-vue3/src/components/collapse/collapseFolder/CollapseFolderAndComponentFromRoot.vue')['default']
+    CustomPrefixComponent: typeof import('./examples/vite-vue3/src/components/sort/Component.vue')['default']
     CustomPrefixComponentA: typeof import('./examples/vite-vue3/src/components/ComponentA.vue')['default']
     CustomPrefixComponentAsync: typeof import('./examples/vite-vue3/src/components/ComponentAsync.vue')['default']
     CustomPrefixComponentB: typeof import('./examples/vite-vue3/src/components/ComponentB.vue')['default']
     CustomPrefixComponentC: typeof import('./examples/vite-vue3/src/components/component-c.vue')['default']
+    CustomPrefixComponentCollision: typeof import('./examples/vite-vue3/src/components/sort-a/ComponentCollision.vue')['default']
     CustomPrefixComponentD: typeof import('./examples/vite-vue3/src/components/ComponentD.vue')['default']
     CustomPrefixFolderAndComponentPartially: typeof import('./examples/vite-vue3/src/components/collapse/collapseFolder/FolderAndComponentPartially.vue')['default']
     CustomPrefixKebabCaseCollapseFile: typeof import('./examples/vite-vue3/src/components/kebab-case/kebab-case-collapse/KebabCaseCollapseFile.vue')['default']

@@ -50,6 +50,14 @@ exports[`search > should with namespace & collapse 1`] = `
     "as": "Recursive",
     "from": "src/components/Recursive.vue",
   },
+  {
+    "as": "SortAComponentCollision",
+    "from": "src/components/sort-a/ComponentCollision.vue",
+  },
+  {
+    "as": "SortComponent",
+    "from": "src/components/sort/Component.vue",
+  },
   {
     "as": "UiButton",
     "from": "src/components/ui/button.vue",
@@ -111,6 +119,14 @@ exports[`search > should with namespace 1`] = `
     "as": "Recursive",
     "from": "src/components/Recursive.vue",
   },
+  {
+    "as": "SortAComponentCollision",
+    "from": "src/components/sort-a/ComponentCollision.vue",
+  },
+  {
+    "as": "SortComponent",
+    "from": "src/components/sort/Component.vue",
+  },
   {
     "as": "UiButton",
     "from": "src/components/ui/button.vue",
@@ -144,6 +160,10 @@ exports[`search > should work 1`] = `
     "as": "CollapseFolderAndComponentFromRoot",
     "from": "src/components/collapse/collapseFolder/CollapseFolderAndComponentFromRoot.vue",
   },
+  {
+    "as": "Component",
+    "from": "src/components/sort/Component.vue",
+  },
   {
     "as": "ComponentA",
     "from": "src/components/ComponentA.vue",
@@ -160,6 +180,10 @@ exports[`search > should work 1`] = `
     "as": "ComponentC",
     "from": "src/components/component-c.vue",
   },
+  {
+    "as": "ComponentCollision",
+    "from": "src/components/sort-a/ComponentCollision.vue",
+  },
   {
     "as": "ComponentD",
     "from": "src/components/ComponentD.vue",