feat: add strict option for resolver (#327)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

README.md

@@ -185,6 +185,29 @@ export default defineNuxtConfig({
 })
 ```
 
+Or work with [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components) resolvers
+
+```ts
+import ViteComponents from 'unplugin-vue-components/vite'
+import IconsResolver from 'unplugin-icons/resolver'
+
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: [
+    'unplugin-icons/nuxt',
+  ],
+  vite: {
+    plugins: [
+      ViteComponents({
+        resolvers: [
+          IconsResolver({/* options */}),
+        ],
+      }),
+    ],
+  },
+})
+```
+
 See [the Nuxt example](examples/nuxt3) for a working example project.
 
 <br></details>

examples/nuxt3/app.vue

@@ -14,5 +14,8 @@ import MdiAlarmOff from '~icons/mdi/alarm-off'
       <MdiAlarmOff />
       from <code>unplugin-icons</code>
     </p>
+    <h1>Auto import Components</h1>
+    <Circle />
+    <LayoutFooter />
   </div>
 </template>

examples/nuxt3/components.d.ts

@@ -0,0 +1,13 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}

examples/nuxt3/components/Circle.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1>Hello Ts Setup Circle</h1>
+</template>

examples/nuxt3/components/LayoutHeader.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1>Hello Ts Header</h1>
+</template>

examples/nuxt3/nuxt.config.ts

@@ -1,6 +1,22 @@
+import ViteComponents from 'unplugin-vue-components/vite'
+import IconsResolver from 'unplugin-icons/resolver'
+
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
   modules: [
     'unplugin-icons/nuxt',
   ],
+  vite: {
+    plugins: [
+      ViteComponents({
+        resolvers: [
+          IconsResolver({
+            prefix: '',
+            strict: true,
+          }),
+        ],
+        dts: true,
+      }),
+    ],
+  },
 })

examples/nuxt3/package.json

@@ -13,7 +13,8 @@
     "@iconify-json/logos": "^1.1.42",
     "@iconify-json/mdi": "^1.1.66",
     "nuxt": "^3.11.2",
-    "unplugin-icons": "link:../.."
+    "unplugin-icons": "link:../..",
+    "unplugin-vue-components": "^0.25.2"
   },
   "stackblitz": {
     "installDependencies": false,

src/core/options.ts

@@ -54,7 +54,7 @@ function guessJSX(): ResolvedOptions['jsx'] {
 async function getVueVersion() {
   try {
     const result = await getPackageInfo('vue')
-    if (!result)
+    if (!result || !result.version)
       return null
     return result.version?.startsWith('2.') ? 'vue2' : 'vue3'
   }

src/resolver.ts

@@ -45,6 +45,13 @@ export interface ComponentResolverOption {
    * @deprecated renamed to `prefix`
    */
   componentPrefix?: string
+
+  /**
+   * For collections strict matching.
+   * Default is `false`, not side effect.
+   * Set `true` to enable strict matching with `-` suffix for all collections.
+   */
+  strict?: boolean
 }
 
 /**
@@ -59,6 +66,7 @@ export default function ComponentsResolver(options: ComponentResolverOption = {}
     alias = {},
     customCollections = [],
     extension,
+    strict = false,
   } = options
 
   const prefix = rawPrefix ? `${camelToKebab(rawPrefix)}-` : ''
@@ -101,7 +109,7 @@ export default function ComponentsResolver(options: ComponentResolverOption = {}
         return
 
       const slice = kebab.slice(prefix.length)
-      const resolvedCollection = collections.find(i => slice.startsWith(`${i}-`)) || collections.find(i => slice.startsWith(i))
+      const resolvedCollection = collections.find(i => slice.startsWith(`${i}-`)) || (!strict && collections.find(i => slice.startsWith(i)))
       if (!resolvedCollection)
         return