feat: use unimport as the engine (#180)

README.md

@@ -102,16 +102,7 @@ module.exports = {
 <details>
 <summary>Nuxt</summary><br>
 
-```ts
-// nuxt.config.js
-export default {
-  buildModules: [
-    ['unplugin-auto-import/nuxt', { /* options */ }],
-  ],
-}
-```
-
-> This module works for both Nuxt 2 and [Nuxt Vite](https://github.com/nuxt/vite)
+> You **don't need** this plugin for Nuxt, it's already builtin.
 
 <br></details>
 
@@ -207,24 +198,35 @@ AutoImport({
     },
   ],
 
+  // Auto import for all module exports under directories
+  dirs: [
+    // './hooks',
+    // './composables'
+    // ...
+  ],
+
+  // Filepath to generate corresponding .d.ts file.
+  // Defaults to './auto-imports.d.ts' when `typescript` is installed locally.
+  // Set `false` to disable.
+  dts: './auto-imports.d.ts',
+
+  // Auto import inside Vue template
+  // see https://github.com/unjs/unimport/pull/15
+  vueTemplate: false,
+
+  // Custom resolvers, compatible with `unplugin-vue-components`
+  // see https://github.com/antfu/unplugin-auto-import/pull/23/
+  resolvers: [
+    /* ... */
+  ],
+
   // Generate corresponding .eslintrc-auto-import.json file.
   // eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals
   eslintrc: {
     enabled: false, // Default `false`
     filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
     globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
   },
-
-  // custom resolvers
-  // see https://github.com/antfu/unplugin-auto-import/pull/23/
-  resolvers: [
-    /* ... */
-  ],
-
-  // Filepath to generate corresponding .d.ts file.
-  // Defaults to './auto-imports.d.ts' when `typescript` is installed locally.
-  // Set `false` to disable.
-  dts: './auto-imports.d.ts',
 })
 ```
 
@@ -265,6 +267,10 @@ In order to properly hint types for auto-imported APIs, make sure:
 
 ## FAQ
 
+### Compare to [`unimport`](https://github.com/unjs/unimport)
+
+From v0.8.0, `unplugin-auto-import` **uses** `unimport` underneath. `unimport` is designed to be a lower level tool (it also powered Nuxt's auto import). You can think `unplugin-auto-import` is a wrapper of it that provides more user-friendly config APIs and capability like resolvers. Development of new features will mostly happend in `unimport` from now.
+
 ### Compare to [`vue-global-api`](https://github.com/antfu/vue-global-api)
 
 You can think of this plugin as a successor to `vue-global-api`, but offering much more flexibility and bindings with libraries other than Vue (e.g. React).

package.json

@@ -93,8 +93,8 @@
     "@rollup/pluginutils": "^4.2.0",
     "local-pkg": "^0.4.1",
     "magic-string": "^0.26.1",
-    "resolve": "^1.22.0",
-    "unplugin": "^0.6.1"
+    "unplugin": "^0.6.1",
+    "unimport": "^0.2.3"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.20.2",

playground/App.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import HelloWorld from './HelloWorld.vue'
 ElMessage.warning('Test')
+const foo = useFoo()
 </script>
 
 <script lang="ts">
@@ -16,8 +17,9 @@ export default defineComponent({
 
 <template>
   <HelloWorld msg="hi" />
+  <pre>{{ foo }}</pre>
+  <pre>{{ FOOBAR }}</pre>
   <div v-loading="false">
-    123
     <ElButton>Hello</ElButton>
   </div>
 </template>

playground/composables/foo.ts

@@ -0,0 +1,5 @@
+export function useFoo() {
+  return 'foo from ./composables/'
+}
+
+export const FOOBAR = 'auto import in Vue template'

playground/vite.config.ts

@@ -10,7 +10,13 @@ export default defineConfig({
     Inspect(),
     AutoImport({
       imports: ['vue', '@vueuse/core'],
-      resolvers: [ElementPlusResolver()],
+      resolvers: [
+        ElementPlusResolver(),
+      ],
+      dirs: [
+        './composables',
+      ],
+      vueTemplate: true,
     }),
   ],
 })