diff --git a/README.md b/README.md
index 0d7cecd9..c324fcff 100644
--- a/README.md
+++ b/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,6 +198,28 @@ 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: {
@@ -214,17 +227,6 @@ AutoImport({
     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).
diff --git a/package.json b/package.json
index d51da337..2130c56d 100644
--- a/package.json
+++ b/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",
diff --git a/playground/App.vue b/playground/App.vue
index 7c978b3b..e0fa971e 100644
--- a/playground/App.vue
+++ b/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>
diff --git a/playground/composables/foo.ts b/playground/composables/foo.ts
new file mode 100644
index 00000000..c78bad2e
--- /dev/null
+++ b/playground/composables/foo.ts
@@ -0,0 +1,5 @@
+export function useFoo() {
+  return 'foo from ./composables/'
+}
+
+export const FOOBAR = 'auto import in Vue template'
diff --git a/playground/vite.config.ts b/playground/vite.config.ts
index cc05118b..cf148349 100644
--- a/playground/vite.config.ts
+++ b/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,
     }),
   ],
 })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 550bc057..8a5540df 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,10 +17,10 @@ importers:
       fast-glob: ^3.2.11
       local-pkg: ^0.4.1
       magic-string: ^0.26.1
-      resolve: ^1.22.0
       rollup: ^2.70.1
       tsup: ^5.12.5
       typescript: ^4.6.3
+      unimport: ^0.2.3
       unplugin: ^0.6.1
       vite: ^2.9.1
       vitest: ^0.9.3
@@ -30,7 +30,7 @@ importers:
       '@rollup/pluginutils': 4.2.0
       local-pkg: 0.4.1
       magic-string: 0.26.1
-      resolve: 1.22.0
+      unimport: 0.2.3_siuil2kwiful25g6ohrys5laqm
       unplugin: 0.6.1_siuil2kwiful25g6ohrys5laqm
     devDependencies:
       '@antfu/eslint-config': 0.20.2_jzhokl4shvj5szf5bgr66kln2a
@@ -2760,6 +2760,14 @@ packages:
       estree-walker: 2.0.2
       picomatch: 2.3.0
 
+  /@rollup/pluginutils/4.2.1:
+    resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
+    engines: {node: '>= 8.0.0'}
+    dependencies:
+      estree-walker: 2.0.2
+      picomatch: 2.3.0
+    dev: false
+
   /@sveltejs/vite-plugin-svelte/1.0.0-next.41_svelte@3.47.0+vite@2.9.1:
     resolution: {integrity: sha512-2kZ49mpi/YW1PIPvKaJNSSwIFgmw9QUf1+yaNa4U8yJD6AsfSHXAU3goscWbi1jfWnSg2PhvwAf+bvLCdp2F9g==}
     engines: {node: ^14.13.1 || >= 16}
@@ -6760,6 +6768,11 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /escape-string-regexp/5.0.0:
+    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
+    engines: {node: '>=12'}
+    dev: false
+
   /eslint-import-resolver-node/0.3.6:
     resolution: {integrity: sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==}
     dependencies:
@@ -7292,7 +7305,6 @@ packages:
       glob-parent: 5.1.2
       merge2: 1.4.1
       micromatch: 4.0.4
-    dev: true
 
   /fast-glob/3.2.7:
     resolution: {integrity: sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==}
@@ -8256,6 +8268,7 @@ packages:
     resolution: {integrity: sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==}
     dependencies:
       has: 1.0.3
+    dev: true
 
   /is-data-descriptor/0.1.4:
     resolution: {integrity: sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=}
@@ -8581,6 +8594,10 @@ packages:
       semver: 7.3.5
     dev: true
 
+  /jsonc-parser/3.0.0:
+    resolution: {integrity: sha512-fQzRfAbIBnR0IQvftw9FJveWiHp72Fg20giDrHz6TdfB12UH/uue0D3hm57UB5KgAVuniLMCaS8P1IMj9NR7cA==}
+    dev: false
+
   /jsonfile/4.0.0:
     resolution: {integrity: sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=}
     optionalDependencies:
@@ -8853,6 +8870,13 @@ packages:
     dependencies:
       sourcemap-codec: 1.4.8
 
+  /magic-string/0.26.2:
+    resolution: {integrity: sha512-NzzlXpclt5zAbmo6h6jNc8zl2gNRGHvmsZW4IvZhTC4W7k4OlLP+S5YLussa/r3ixNT66KOQfNORlXHSOy/X4A==}
+    engines: {node: '>=12'}
+    dependencies:
+      sourcemap-codec: 1.4.8
+    dev: false
+
   /make-dir/1.3.0:
     resolution: {integrity: sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==}
     engines: {node: '>=4'}
@@ -9161,6 +9185,17 @@ packages:
     hasBin: true
     dev: false
 
+  /mlly/0.3.19:
+    resolution: {integrity: sha512-zMq5n3cOf4fOzA4WoeulxagbAgMChdev3MgP6K51k7M0u2whTXxupfIY4VVzws4vxkiWhwH1rVQcsw7zDGfRhA==}
+    dev: false
+
+  /mlly/0.5.2:
+    resolution: {integrity: sha512-4GTELSSErv6ZZJYU98fZNuIBJcXSz+ktHdRrCYEqU1m6ZlebOCG0jwZ+IEd9vOrbpYsVBBMC5OTrEyLnKRcauQ==}
+    dependencies:
+      pathe: 0.2.0
+      pkg-types: 0.3.2
+    dev: false
+
   /move-concurrently/1.0.1:
     resolution: {integrity: sha1-viwAX9oy4LKa8fBdfEszIUxwH5I=}
     dependencies:
@@ -9861,6 +9896,14 @@ packages:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
 
+  /pathe/0.2.0:
+    resolution: {integrity: sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw==}
+    dev: false
+
+  /pathe/0.3.0:
+    resolution: {integrity: sha512-3vUjp552BJzCw9vqKsO5sttHkbYqqsZtH0x1PNtItgqx8BXEXzoY1SYRKcL6BTyVh4lGJGLj0tM42elUDMvcYA==}
+    dev: false
+
   /pathval/1.1.1:
     resolution: {integrity: sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==}
     dev: true
@@ -9924,6 +9967,14 @@ packages:
       find-up: 4.1.0
     dev: false
 
+  /pkg-types/0.3.2:
+    resolution: {integrity: sha512-eBYzX/7NYsQEOR2alWY4rnQB49G62oHzFpoi9Som56aUr8vB8UGcmcIia9v8fpBeuhH3Ltentuk2OGpp4IQV3Q==}
+    dependencies:
+      jsonc-parser: 3.0.0
+      mlly: 0.3.19
+      pathe: 0.2.0
+    dev: false
+
   /pluralize/8.0.0:
     resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
     engines: {node: '>=4'}
@@ -11085,6 +11136,7 @@ packages:
       is-core-module: 2.8.1
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
+    dev: true
 
   /resolve/2.0.0-next.3:
     resolution: {integrity: sha512-W8LucSynKUIDu9ylraa7ueVZ7hc0uAgJBxVsQSKOXOyle8a93qXhcz+XAXZ8bIq2d6i4Ehddn6Evt+0/UwKk6Q==}
@@ -11900,6 +11952,7 @@ packages:
   /supports-preserve-symlinks-flag/1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
+    dev: true
 
   /svelte-check/2.6.0_svelte@3.47.0:
     resolution: {integrity: sha512-POL3IqLUuGqb9DdvuXQaSTNXYnw/odK4hqW86+2LwGcZTdbUPKBBln7pq74wXmcnRE+12bXMY1CvbcUNa2d5nw==}
@@ -12446,6 +12499,25 @@ packages:
     engines: {node: '>=4'}
     dev: false
 
+  /unimport/0.2.3_siuil2kwiful25g6ohrys5laqm:
+    resolution: {integrity: sha512-bgIGIaPgn+xZrsFZTQazzE7aLOmBzvYtvswoJtQRBI0dRbX2W5Y/G6Dd/gYEkCFPbpmNhxwZqewuAjT9hd3tcA==}
+    dependencies:
+      '@rollup/pluginutils': 4.2.1
+      escape-string-regexp: 5.0.0
+      fast-glob: 3.2.11
+      local-pkg: 0.4.1
+      magic-string: 0.26.2
+      mlly: 0.5.2
+      pathe: 0.3.0
+      scule: 0.2.1
+      unplugin: 0.6.3_siuil2kwiful25g6ohrys5laqm
+    transitivePeerDependencies:
+      - esbuild
+      - rollup
+      - vite
+      - webpack
+    dev: false
+
   /union-value/1.0.1:
     resolution: {integrity: sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==}
     engines: {node: '>=0.10.0'}
@@ -12688,6 +12760,31 @@ packages:
       webpack-virtual-modules: 0.4.3
     dev: true
 
+  /unplugin/0.6.3_siuil2kwiful25g6ohrys5laqm:
+    resolution: {integrity: sha512-CoW88FQfCW/yabVc4bLrjikN9HC8dEvMU4O7B6K2jsYMPK0l6iAnd9dpJwqGcmXJKRCU9vwSsy653qg+RK0G6A==}
+    peerDependencies:
+      esbuild: '>=0.13'
+      rollup: ^2.50.0
+      vite: ^2.3.0
+      webpack: 4 || 5
+    peerDependenciesMeta:
+      esbuild:
+        optional: true
+      rollup:
+        optional: true
+      vite:
+        optional: true
+      webpack:
+        optional: true
+    dependencies:
+      chokidar: 3.5.3
+      rollup: 2.70.1
+      vite: 2.9.1
+      webpack: 5.72.0
+      webpack-sources: 3.2.3
+      webpack-virtual-modules: 0.4.3
+    dev: false
+
   /unquote/1.1.1:
     resolution: {integrity: sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=}
     dev: false
diff --git a/src/core/ctx.ts b/src/core/ctx.ts
new file mode 100644
index 00000000..f2020d3a
--- /dev/null
+++ b/src/core/ctx.ts
@@ -0,0 +1,149 @@
+import { resolve } from 'path'
+import { promises as fs } from 'fs'
+import { throttle, toArray } from '@antfu/utils'
+import { createFilter } from '@rollup/pluginutils'
+import { isPackageExists } from 'local-pkg'
+import type { Import } from 'unimport'
+import { vueTemplateAddon } from 'unimport/addons'
+import { createUnimport, scanDirExports } from 'unimport'
+import MagicString from 'magic-string'
+import { presets } from '../presets'
+import type { ESLintrc, ImportExtended, Options } from '../types'
+import { generateESLintConfigs } from './eslintrc'
+import { resolversAddon } from './resolvers'
+
+export function createContext(options: Options = {}, root = process.cwd()) {
+  const imports = flattenImports(options.imports, options.presetOverriding)
+
+  options.ignore?.forEach((name) => {
+    const i = imports.find(i => i.as === name)
+    if (i)
+      i.disabled = true
+  })
+
+  const {
+    dts: preferDTS = isPackageExists('typescript'),
+  } = options
+
+  const dirs = options.dirs?.map(dir => resolve(root, dir))
+
+  const eslintrc: ESLintrc = options.eslintrc || {}
+  eslintrc.enabled = eslintrc.enabled === undefined ? false : eslintrc.enabled
+  eslintrc.filepath = eslintrc.filepath || './.eslintrc-auto-import.json'
+  eslintrc.globalsPropValue = eslintrc.globalsPropValue === undefined ? true : eslintrc.globalsPropValue
+
+  const resolvers = options.resolvers ? [options.resolvers].flat(2) : []
+
+  const unimport = createUnimport({
+    imports: imports as Import[],
+    presets: [],
+    addons: [
+      ...(options.vueTemplate ? [vueTemplateAddon()] : []),
+      resolversAddon(resolvers),
+      {
+        decleration(dts) {
+          return `// Generated by 'unplugin-auto-import'\n${dts}`
+        },
+      },
+    ],
+  })
+
+  const filter = createFilter(
+    options.include || [/\.[jt]sx?$/, /\.vue$/, /\.vue\?vue/, /\.svelte$/],
+    options.exclude || [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/],
+  )
+  const dts = preferDTS === false
+    ? false
+    : preferDTS === true
+      ? resolve(root, 'auto-imports.d.ts')
+      : resolve(root, preferDTS)
+
+  const generateConfigFiles = throttle(500, false, () => {
+    if (dts)
+      fs.writeFile(dts, unimport.generateTypeDecarations(), 'utf-8')
+    if (eslintrc.enabled && eslintrc.filepath)
+      fs.writeFile(eslintrc.filepath, generateESLintConfigs(unimport.getImports(), eslintrc), 'utf-8')
+  })
+
+  async function scanDirs() {
+    if (dirs?.length) {
+      await unimport.modifyDynamicImports(async(imports) => {
+        const exports = await scanDirExports(dirs) as ImportExtended[]
+        exports.forEach(i => i.__source = 'dir')
+        return [
+          ...imports.filter((i: ImportExtended) => i.__source !== 'dir'),
+          ...exports,
+        ] as Import[]
+      })
+    }
+    generateConfigFiles()
+  }
+
+  async function transform(code: string, id: string) {
+    const s = new MagicString(code)
+
+    await unimport.injectImports(s, id)
+
+    if (!s.hasChanged())
+      return
+
+    generateConfigFiles()
+
+    return {
+      code: s.toString(),
+      map: s.generateMap(),
+    }
+  }
+
+  if (!imports.length && !resolvers.length)
+    console.warn('[auto-import] plugin installed but no imports has defined, see https://github.com/antfu/unplugin-auto-import#configurations for configurations')
+
+  return {
+    root,
+    dirs,
+    filter,
+    scanDirs,
+    generateConfigFiles,
+    transform,
+    // for testing
+    unimport: unimport as any,
+  }
+}
+
+export function flattenImports(map: Options['imports'], overriding = false): Import[] {
+  const flat: Record<string, Import> = {}
+  toArray(map).forEach((definition) => {
+    if (typeof definition === 'string') {
+      if (!presets[definition])
+        throw new Error(`[auto-import] preset ${definition} not found`)
+      const preset = presets[definition]
+      definition = typeof preset === 'function' ? preset() : preset
+    }
+
+    for (const mod of Object.keys(definition)) {
+      for (const id of definition[mod]) {
+        const meta = {
+          from: mod,
+        } as Import
+        let name: string
+        if (Array.isArray(id)) {
+          name = id[1]
+          meta.name = id[0]
+          meta.as = id[1]
+        }
+        else {
+          name = id
+          meta.name = id
+          meta.as = id
+        }
+
+        if (flat[name] && !overriding)
+          throw new Error(`[auto-import] identifier ${name} already defined with ${flat[name].from}`)
+
+        flat[name] = meta
+      }
+    }
+  })
+
+  return Object.values(flat)
+}
diff --git a/src/core/dts.ts b/src/core/dts.ts
deleted file mode 100644
index 593324df..00000000
--- a/src/core/dts.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { ImportsFlatMap } from '../types'
-
-export function generateDeclaration(imports: ImportsFlatMap, resolvedImports: ImportsFlatMap = {}) {
-  const body = [
-    ...Object.entries(imports),
-    ...Object.entries(resolvedImports),
-  ]
-    .sort((a, b) => a[0].localeCompare(b[0]))
-    .map(([name, info]) => `  const ${name}: typeof import('${info.from}')${info.name !== '*' ? `['${info.name || name}']` : ''}`)
-    .join('\n')
-  return `// Generated by 'unplugin-auto-import'\n// We suggest you to commit this file into source control\ndeclare global {\n${body}\n}\nexport {}\n`
-}
diff --git a/src/core/eslintrc.ts b/src/core/eslintrc.ts
index c0bdcc85..5b10edc4 100644
--- a/src/core/eslintrc.ts
+++ b/src/core/eslintrc.ts
@@ -1,24 +1,23 @@
-import type { ESLintGlobalsPropValue, ESLintrc, ImportsFlatMap } from '../types'
+import type { Import } from 'unimport'
+import type { ESLintGlobalsPropValue, ESLintrc } from '../types'
 
 interface ESLintConfigs {
   globals: Record<string, ESLintGlobalsPropValue>
 }
 
-// const __comment__ = 'Generated by `unplugin-auto-import`'
-
 export function generateESLintConfigs(
-  imports: ImportsFlatMap,
-  resolvedImports: ImportsFlatMap = {},
+  imports: Import[],
   eslintrc: ESLintrc,
 ) {
-  const eslintConfigs: ESLintConfigs = { globals: {} };
+  const eslintConfigs: ESLintConfigs = { globals: {} }
 
-  [
-    ...Object.entries(imports),
-    ...Object.entries(resolvedImports),
-  ]
-    .sort((a, b) => a[0].localeCompare(b[0]))
-    .forEach(([name]) => { eslintConfigs.globals[name] = eslintrc.globalsPropValue || true })
+  imports
+    .map(i => i.as ?? i.name)
+    .filter(Boolean)
+    .sort()
+    .forEach((name) => {
+      eslintConfigs.globals[name] = eslintrc.globalsPropValue || true
+    })
   const jsonBody = JSON.stringify(eslintConfigs, null, 2)
   return jsonBody
 }
diff --git a/src/core/options.ts b/src/core/options.ts
deleted file mode 100644
index 1e5f8297..00000000
--- a/src/core/options.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { resolve } from 'path'
-import { toArray } from '@antfu/utils'
-import { createFilter } from '@rollup/pluginutils'
-import { isPackageExists } from 'local-pkg'
-import { presets } from '../presets'
-import type { ESLintrc, ImportsFlatMap, Options, ResolvedOptions, ResolvedResult } from '../types'
-
-export function resolveOptions(options: Options = {}, root = process.cwd()): ResolvedOptions {
-  const imports = flattenImportsMap(options.imports, options.presetOverriding)
-
-  const {
-    dts = isPackageExists('typescript'),
-  } = options
-
-  const eslintrc: ESLintrc = options.eslintrc || {}
-  eslintrc.enabled = eslintrc.enabled === undefined ? false : eslintrc.enabled
-  eslintrc.filepath = eslintrc.filepath || './.eslintrc-auto-import.json'
-  eslintrc.globalsPropValue = eslintrc.globalsPropValue === undefined ? true : eslintrc.globalsPropValue
-
-  const resolved: ResolvedOptions = {
-    sourceMap: false,
-    resolvedImports: {},
-    presetOverriding: false,
-    ignore: [],
-    ...options,
-    dts: dts === false
-      ? false
-      : dts === true
-        ? resolve(root, 'auto-imports.d.ts')
-        : resolve(root, dts),
-    imports,
-    resolvers: options.resolvers ? [options.resolvers].flat(2) : [],
-    idFilter: createFilter(
-      options.include || [/\.[jt]sx?$/, /\.vue$/, /\.vue\?vue/, /\.svelte$/],
-      options.exclude || [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/],
-    ),
-    eslintrc,
-  }
-
-  return resolved
-}
-
-export function flattenImportsMap(map: Options['imports'], overriding = false): ImportsFlatMap {
-  const flat: ImportsFlatMap = {}
-  toArray(map).forEach((definition) => {
-    if (typeof definition === 'string') {
-      if (!presets[definition])
-        throw new Error(`[auto-import] preset ${definition} not found`)
-      const preset = presets[definition]
-      definition = typeof preset === 'function' ? preset() : preset
-    }
-
-    for (const mod of Object.keys(definition)) {
-      for (const id of definition[mod]) {
-        const meta: ResolvedResult = {
-          from: mod,
-        }
-        let name: string
-        if (Array.isArray(id)) {
-          name = id[1]
-          meta.name = id[0]
-        }
-        else {
-          name = id
-          meta.name = id
-        }
-
-        if (flat[name] && !overriding)
-          throw new Error(`[auto-import] identifier ${name} already defined with ${flat[name].from}`)
-
-        flat[name] = meta
-      }
-    }
-  })
-
-  return flat
-}
diff --git a/src/core/resolvers.ts b/src/core/resolvers.ts
new file mode 100644
index 00000000..0376de7e
--- /dev/null
+++ b/src/core/resolvers.ts
@@ -0,0 +1,70 @@
+import { toArray } from '@antfu/utils'
+import type { Addon, Import } from 'unimport'
+import type { ImportExtended, ImportLegacy, Resolver, ResolverResult } from '../types'
+
+export function normalizeImport(info: Import | ResolverResult | ImportExtended | ImportLegacy | string, name: string): ImportExtended {
+  if (typeof info === 'string') {
+    return {
+      name: 'default',
+      as: name,
+      from: info,
+    }
+  }
+  if ('path' in info) {
+    return {
+      from: info.path,
+      as: info.name,
+      name: info.importName!,
+      sideEffects: info.sideEffects,
+    }
+  }
+  return {
+    name,
+    as: name,
+    ...info,
+  }
+}
+
+export async function firstMatchedResolver(resolvers: Resolver[], fullname: string) {
+  let name = fullname
+  for (const resolver of resolvers) {
+    if (typeof resolver === 'object' && resolver.type === 'directive') {
+      if (name.startsWith('v'))
+        name = name.slice(1)
+      else
+        continue
+    }
+    const resolved = await (typeof resolver === 'function' ? resolver(name) : resolver.resolve(name))
+    if (resolved)
+      return normalizeImport(resolved, fullname)
+  }
+}
+
+export function resolversAddon(resolvers: Resolver[]): Addon {
+  return {
+    async matchImports(names, matched) {
+      if (!resolvers.length)
+        return
+      const dynamic: ImportExtended[] = []
+      const sideEffects: ImportExtended[] = []
+      await Promise.all([...names].map(async(name) => {
+        if (matched.find(i => i.as === name))
+          return
+        const resolved = await firstMatchedResolver(resolvers, name)
+        if (resolved)
+          dynamic.push(resolved)
+
+        if (resolved?.sideEffects)
+          sideEffects.push(...toArray(resolved?.sideEffects).map(i => normalizeImport(i, '')))
+      }))
+
+      if (dynamic.length) {
+        this.dynamicImports.push(...dynamic)
+        this.invalidate()
+      }
+
+      if (dynamic.length || sideEffects.length)
+        return [...matched, ...dynamic, ...sideEffects]
+    },
+  }
+}
diff --git a/src/core/transform.ts b/src/core/transform.ts
deleted file mode 100644
index 980089e0..00000000
--- a/src/core/transform.ts
+++ /dev/null
@@ -1,196 +0,0 @@
-import MagicString from 'magic-string'
-import type { ImportInfo, ImportInfoLegacy, ResolvedResult, Resolver, TransformOptions } from '../types'
-
-const excludeRE = [
-  // imported from other module
-  /\bimport\s*([\s\S]+?)\s*from\b/g,
-  // defined as function
-  /\bfunction\s*([\w_$]+?)\s*\(/g,
-  // defined as local variable
-  /\b(?:const|let|var)\s+?(\[[\s\S]*?\]|\{[\s\S]*?\}|[\s\S]+?)\s*?[=;\n]/g,
-]
-
-const matchRE = /(?<![\w_$/)]\.)([\w_$]+?)[^\w_${]/g
-const regexRE = /\/.*?(?<!\\)\/[gimsuy]*/g
-const importAsRE = /^.*\sas\s+/
-const seperatorRE = /[,[\]{}\n]/g
-const multilineCommentsRE = /\/\*\s(.|[\r\n])*?\*\//gm
-const singlelineCommentsRE = /\/\/\s.*/g
-const templateLiteralRE = /\$\{(.*?)\}/g
-const quotesRE = [
-  /(["'])((?:\\\1|(?!\1)|.|\r)*?)\1/gm,
-  /([`])((?:\\\1|(?!\1)|.|\n|\r)*?)\1/gm,
-]
-
-function stripeCommentsAndStrings(code: string) {
-  return code
-    .replace(multilineCommentsRE, '')
-    .replace(singlelineCommentsRE, '')
-    .replace(templateLiteralRE, '` + $1 + `')
-    .replace(quotesRE[0], '""')
-    .replace(quotesRE[1], '``')
-    .replace(regexRE, 'new RegExp("")')
-}
-
-export async function transform(
-  code: string,
-  id: string,
-  {
-    imports,
-    sourceMap,
-    resolvers,
-    resolvedImports = {},
-    ignore = [],
-  }: TransformOptions,
-) {
-  const striped = stripeCommentsAndStrings(code)
-  const identifiers = new Set(Array.from(striped.matchAll(matchRE)).map(i => i[1]))
-
-  ignore.forEach((i) => {
-    if (typeof i === 'string') {
-      identifiers.delete(i)
-    }
-    // regex
-    else {
-      identifiers.forEach((id) => {
-        if (id.match(i))
-          identifiers.delete(id)
-      })
-    }
-  })
-
-  // nothing matched, skip
-  if (!identifiers.size)
-    return null
-
-  // remove those already defined
-  for (const regex of excludeRE) {
-    Array.from(striped.matchAll(regex))
-      .flatMap(i => [
-        ...(i[1]?.split(seperatorRE) || []),
-        ...(i[2]?.split(seperatorRE) || []),
-      ])
-      .map(i => i.replace(importAsRE, '').trim())
-      .forEach(i => identifiers.delete(i))
-  }
-
-  // nothing matched, skip
-  if (!identifiers.size)
-    return null
-
-  const modules: Record<string, ImportInfo[]> = {}
-  const addToModules = (info: ImportInfo) => {
-    if (!modules[info.from])
-      modules[info.from] = [info]
-    else modules[info.from].push(info)
-  }
-
-  // group by module name
-  for (const name of Array.from(identifiers)) {
-    let info = getOwn(resolvedImports, name) || getOwn(imports, name)
-
-    if (!info && resolvers?.length) {
-      const resolved = await firstMatchedResolver(resolvers, name)
-      if (resolved) {
-        if (typeof resolved === 'string') {
-          info = {
-            from: resolved,
-            name: 'default',
-          }
-        }
-        else {
-          info = resolved
-        }
-        resolvedImports[name] = info
-      }
-    }
-
-    if (!info || !info.from)
-      continue
-
-    addToModules({
-      from: info.from,
-      name: info.name,
-      as: name,
-    })
-
-    if (info.sideEffects) {
-      const infos = [info.sideEffects].flat(1).map((info): ImportInfo => {
-        if (typeof info === 'string')
-          return { from: info }
-        return info
-      })
-      infos.forEach(info => addToModules(info))
-    }
-  }
-
-  if (!Object.keys(modules).length)
-    return
-
-  // stringify import
-  const importStatements = Object.entries(modules)
-    .map(([moduleName, infos]) => {
-      const imports: string[] = []
-      const namedImports: string[] = []
-
-      infos
-        .forEach(({ as, name }) => {
-          if (as) {
-            if (name === '*')
-              imports.push(`* as ${as}`)
-            else
-              namedImports.push((name && as !== name) ? `${name} as ${as}` : as)
-          }
-        })
-
-      if (namedImports.length)
-        imports.push(`{ ${namedImports.join(', ')} }`)
-
-      return `import ${imports.length > 0 ? `${imports.join(', ')} from ` : ''}'${moduleName}';`
-    })
-    .join('')
-
-  const s = new MagicString(code)
-  s.prependLeft(0, importStatements)
-
-  return {
-    code: s.toString(),
-    map: sourceMap
-      ? s.generateMap({ source: id, includeContent: true })
-      : null,
-  }
-}
-
-async function firstMatchedResolver(resolvers: Resolver[], name: string) {
-  for (const resolver of resolvers) {
-    if (typeof resolver === 'object' && resolver.type === 'directive') {
-      if (name.startsWith('v'))
-        name = name.replace('v', '')
-      else
-        continue
-    }
-    const resolved = await (typeof resolver === 'function' ? resolver(name) : resolver.resolve(name))
-    if (resolved)
-      return normalizeImportInfo(resolved)
-  }
-}
-
-const hasOwnProperty = Object.prototype.hasOwnProperty
-
-function getOwn<T, K extends keyof T>(object: T, key: K) {
-  return hasOwnProperty.call(object, key) ? object[key] : undefined
-}
-
-function normalizeImportInfo(info: ImportInfo | ResolvedResult | ImportInfoLegacy | string): ResolvedResult | string {
-  if (typeof info === 'string')
-    return info
-  if ('path' in info) {
-    return {
-      from: info.path,
-      as: info.name,
-      name: info.importName,
-      sideEffects: info.sideEffects,
-    }
-  }
-  return info
-}
diff --git a/src/core/unplugin.ts b/src/core/unplugin.ts
new file mode 100644
index 00000000..9f27f6bc
--- /dev/null
+++ b/src/core/unplugin.ts
@@ -0,0 +1,32 @@
+import { createUnplugin } from 'unplugin'
+import type { Options } from '../types'
+import { createContext } from './ctx'
+
+export default createUnplugin<Options>((options) => {
+  let ctx = createContext(options)
+  return {
+    name: 'unplugin-auto-import',
+    enforce: 'post',
+    transformInclude(id) {
+      return ctx.filter(id)
+    },
+    async transform(code, id) {
+      return ctx.transform(code, id)
+    },
+    async buildStart() {
+      await ctx.scanDirs()
+    },
+    vite: {
+      async handleHotUpdate({ file }) {
+        if (ctx.dirs?.some(dir => file.startsWith(dir)))
+          await ctx.scanDirs()
+      },
+      async configResolved(config) {
+        if (ctx.root !== config.root) {
+          ctx = createContext(options, config.root)
+          await ctx.scanDirs()
+        }
+      },
+    },
+  }
+})
diff --git a/src/index.ts b/src/index.ts
index e2fca156..d93c680c 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,45 +1 @@
-import { promises as fs } from 'fs'
-import { createUnplugin } from 'unplugin'
-import { throttle } from '@antfu/utils'
-import type { Options } from './types'
-import { resolveOptions } from './core/options'
-import { transform } from './core/transform'
-import { generateDeclaration } from './core/dts'
-import { generateESLintConfigs } from './core/eslintrc'
-
-export default createUnplugin<Options>((options) => {
-  let resolved = resolveOptions(options)
-
-  if (!Object.keys(resolved.imports).length && !resolved.resolvers.length)
-    console.warn('[auto-import] plugin installed but no imports has defined, see https://github.com/antfu/unplugin-auto-import#configurations for configurations')
-
-  const generateConfigFiles = throttle(500, false, () => {
-    if (resolved.dts)
-      fs.writeFile(resolved.dts, generateDeclaration(resolved.imports, resolved.resolvedImports), 'utf-8')
-
-    const { eslintrc } = resolved
-    if (eslintrc.enabled && eslintrc.filepath)
-      fs.writeFile(eslintrc.filepath, generateESLintConfigs(resolved.imports, resolved.resolvedImports, eslintrc), 'utf-8')
-  })
-
-  return {
-    name: 'unplugin-auto-import',
-    enforce: 'post',
-    transformInclude(id) {
-      return resolved.idFilter(id)
-    },
-    async transform(code, id) {
-      const res = await transform(code, id, resolved)
-      if (res)
-        generateConfigFiles()
-
-      return res
-    },
-    vite: {
-      configResolved(config: any) {
-        resolved = resolveOptions(options, config.root)
-        generateConfigFiles()
-      },
-    },
-  }
-})
+export { default } from './core/unplugin'
diff --git a/src/types.ts b/src/types.ts
index e4da82f1..50ec6a51 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,8 +1,9 @@
 import type { Arrayable, Awaitable } from '@antfu/utils'
 import type { FilterPattern } from '@rollup/pluginutils'
+import type { Import } from 'unimport'
 import { PresetName } from './presets'
 
-export interface ImportInfoLegacy {
+export interface ImportLegacy {
   /**
    * @deprecated renamed to `as`
    */
@@ -19,19 +20,21 @@ export interface ImportInfoLegacy {
   sideEffects?: SideEffectsInfo
 }
 
-export interface ImportInfo {
-  as?: string
-  name?: string
-  from: string
+export interface ImportExtended extends Import {
+  sideEffects?: SideEffectsInfo
+  __source?: 'dir' | 'resolver'
 }
 
 export type ImportNameAlias = [string, string]
-export type SideEffectsInfo = Arrayable<ImportInfo | string> | undefined
-export interface ResolvedResult extends ImportInfo {
-  sideEffects?: SideEffectsInfo
+export type SideEffectsInfo = Arrayable<ResolverResult | string> | undefined
+
+export interface ResolverResult {
+  as?: string
+  name?: string
+  from: string
 }
 
-export type ResolverFunction = (name: string) => Awaitable<string | ResolvedResult | null | undefined | void>
+export type ResolverFunction = (name: string) => Awaitable<string | ResolverResult | ImportExtended | null | undefined | void>
 
 export interface ResolverResultObject {
   type: 'component' | 'directive'
@@ -39,7 +42,7 @@ export interface ResolverResultObject {
 }
 
 /**
- * Given a identifier name, returns the import path or an importInfo object
+ * Given a identifier name, returns the import path or an import object
  */
 export type Resolver = ResolverFunction | ResolverResultObject
 
@@ -47,10 +50,6 @@ export type Resolver = ResolverFunction | ResolverResultObject
  * module, name, alias
  */
 export type ImportsMap = Record<string, (string | ImportNameAlias)[]>
-/**
- * name, meta
- */
-export type ImportsFlatMap = Record<string, ResolvedResult>
 
 export type ESLintGlobalsPropValue = boolean | 'readonly' | 'readable' | 'writable' | 'writeable'
 
@@ -84,6 +83,11 @@ export interface Options {
    */
   ignore?: (string | RegExp)[]
 
+  /**
+   * Path for directories to be auto imported
+   */
+  dirs?: string[]
+
   /**
    * Pass a custom function to resolve the component importing path from the component name.
    *
@@ -100,6 +104,14 @@ export interface Options {
    */
   dts?: string | boolean
 
+  /**
+   * Auto import inside Vue templates
+   *
+   * @see https://github.com/unjs/unimport/pull/15
+   * @default false
+   */
+  vueTemplate?: boolean
+
   /**
    * Allow overriding imports sources from multiple presets.
    *
@@ -134,36 +146,4 @@ export interface Options {
   eslintrc?: ESLintrc
 }
 
-export interface TransformOptions {
-  imports: ImportsFlatMap
-
-  /**
-   * Identifiers to be ignored
-   */
-  ignore?: (string | RegExp)[]
-
-  /**
-   * Custom resolvers
-   */
-  resolvers?: Resolver[]
-
-  /**
-   * Generate source map.
-   *
-   * @default false
-   */
-  sourceMap?: boolean
-
-  /**
-   * Hold the value for dynamic resolved imports, will be mutated during transforming
-   */
-  resolvedImports?: ImportsFlatMap
-}
-
-export interface ResolvedOptions extends Omit<Required<Options>, 'imports' | 'resolvers' | 'dts' | 'include' | 'exclude' | 'eslintrc'>, Required<TransformOptions> {
-  idFilter: (id: string) => boolean
-  dts: string | false
-  eslintrc: ESLintrc
-}
-
 export { PresetName }
diff --git a/test/__snapshots__/dts.test.ts.snap b/test/__snapshots__/dts.test.ts.snap
index 7c16a2ff..b6698a9b 100644
--- a/test/__snapshots__/dts.test.ts.snap
+++ b/test/__snapshots__/dts.test.ts.snap
@@ -2,15 +2,16 @@
 
 exports[`dts 1`] = `
 "// Generated by 'unplugin-auto-import'
-// We suggest you to commit this file into source control
+export {}
 declare global {
-  const $: typeof import('vue/macros')['$']
   const $$: typeof import('vue/macros')['$$']
+  const $: typeof import('vue/macros')['$']
   const $computed: typeof import('vue/macros')['$computed']
   const $customRef: typeof import('vue/macros')['$customRef']
   const $ref: typeof import('vue/macros')['$ref']
   const $shallowRef: typeof import('vue/macros')['$shallowRef']
   const $toRef: typeof import('vue/macros')['$toRef']
+  const EffectScope: typeof import('vue-demi')['EffectScope']
   const afterUpdate: typeof import('svelte')['afterUpdate']
   const backIn: typeof import('svelte/easing')['backIn']
   const backInOut: typeof import('svelte/easing')['backInOut']
@@ -40,7 +41,6 @@ declare global {
   const derived: typeof import('svelte/store')['derived']
   const draw: typeof import('svelte/transition')['draw']
   const effectScope: typeof import('vue-demi')['effectScope']
-  const EffectScope: typeof import('vue-demi')['EffectScope']
   const elasticIn: typeof import('svelte/easing')['elasticIn']
   const elasticInOut: typeof import('svelte/easing')['elasticInOut']
   const elasticOut: typeof import('svelte/easing')['elasticOut']
@@ -132,7 +132,5 @@ declare global {
   const watch: typeof import('vue-demi')['watch']
   const watchEffect: typeof import('vue-demi')['watchEffect']
   const writable: typeof import('svelte/store')['writable']
-}
-export {}
-"
+}"
 `;
diff --git a/test/__snapshots__/transform.test.ts.snap b/test/__snapshots__/transform.test.ts.snap
index 03f9dd85..5a22c050 100644
--- a/test/__snapshots__/transform.test.ts.snap
+++ b/test/__snapshots__/transform.test.ts.snap
@@ -1,7 +1,8 @@
 // Vitest Snapshot v1
 
 exports[`transform > comments.ts 1`] = `
-"import { ref, computed } from 'vue';/* import { ref } from 'vue' */
+"import { ref, computed } from 'vue';
+/* import { ref } from 'vue' */
 // import { computed } from 'vue'
 
 const a = {
@@ -19,18 +20,23 @@ const b = { class: \\"text-sm opacity-75\\" };
 `;
 
 exports[`transform > custom.js 1`] = `
-"import { default as customDefault, customNamed, default as customDefaultAlias } from 'custom';const a = customDefault(customNamed())
+"import customDefault from 'custom';
+import customDefaultAlias from 'custom';
+import { customNamed } from 'custom';
+const a = customDefault(customNamed())
 const a = customDefaultAlias()
 "
 `;
 
 exports[`transform > dollar.js 1`] = `
-"import { $ } from 'vue-dollar';$('hi')
+"import { $ } from 'vue-dollar';
+$('hi')
 "
 `;
 
 exports[`transform > existing.jsx 1`] = `
-"import { watch } from 'vue';import ref from 'ref'
+"import { watch } from 'vue';
+import ref from 'ref'
 import { computed } from 'computed'
 
 const a = ref(0)
@@ -69,7 +75,8 @@ const b = computed(0)
 `;
 
 exports[`transform > existing5.jsx 1`] = `
-"import { watch } from 'vue';import {
+"import { watch } from 'vue';
+import {
   ref,
   computed,
   watch as watch3,
@@ -83,18 +90,21 @@ const d = watch3(0)
 `;
 
 exports[`transform > existing6.jsx 1`] = `
-"import { computed } from 'vue';const a = computed(() => /^(https?:\\\\/\\\\/|\\\\/\\\\/)/.test(props.to))
+"import { computed } from 'vue';
+const a = computed(() => /^(https?:\\\\/\\\\/|\\\\/\\\\/)/.test(props.to))
 "
 `;
 
 exports[`transform > glob.ts 1`] = `
-"import { ref } from 'vue';const modules = import.meta.glob(\\"/src/nested/*.vue\\");
+"import { ref } from 'vue';
+const modules = import.meta.glob(\\"/src/nested/*.vue\\");
 const msg = ref(\\"Global Imports\\");
 "
 `;
 
 exports[`transform > import-all.ts 1`] = `
-"import * as THREE from 'three.js';const scene = new THREE.Scene();
+"import * as THREE from 'three.js';
+const scene = new THREE.Scene();
 "
 `;
 
@@ -104,7 +114,8 @@ exports[`transform > non-target.js 1`] = `
 `;
 
 exports[`transform > props.ts 1`] = `
-"import { toRefs } from 'vue';const a = z.ref(0)
+"import { toRefs } from 'vue';
+const a = z.ref(0)
 console.log({
   ...toRefs(a)
 })
@@ -119,7 +130,8 @@ const c = a.toString()
 `;
 
 exports[`transform > react.jsx 1`] = `
-"import { useState } from 'react';export function Component() {
+"import { useState } from 'react';
+export function Component() {
   const [count, setCount] = useState()
 
   return <div>{ count }</div>
@@ -146,12 +158,34 @@ exports[`transform > recursive.ts 1`] = `
 `;
 
 exports[`transform > resolver.ts 1`] = `
-"import { default as customResolved1 } from 'custom/resolved/1';import { default as customResolved2, _customNamedResolved2 as customNamedResolved2 } from 'custom/resolved/2';const a = customResolved1(1)
+"import customResolved1 from 'custom/resolved/1';
+import customResolved2 from 'custom/resolved/2';
+import { _customNamedResolved2 as customNamedResolved2 } from 'custom/resolved/2';
+const a = customResolved1(1)
 const b = customResolved2(1)
 const c = customNamedResolved2(1)
 "
 `;
 
+exports[`transform > resolver-element.ts 1`] = `
+"import { defineComponent } from 'vue';
+import { ElButton, ElMessage, ElLoadingDirective as vLoading } from 'element-plus/es';
+import 'element-plus/es/components/button/style/css';
+import 'element-plus/es/components/message/style/css';
+import 'element-plus/es/components/loading/style/css';
+export default defineComponent({
+  components: {
+    ElButton,
+  },
+  directives: {
+    loading: vLoading,
+  },
+})
+
+ElMessage.warning('Test')
+"
+`;
+
 exports[`transform > strings.ts 1`] = `
 "console.log(\\"ref(0)\\")
 console.log(\`ref(\${a})\`)
@@ -163,7 +197,11 @@ ref('z')
 `;
 
 exports[`transform > svelte.svelte 1`] = `
-"import { writable } from 'svelte/store';import { tweened } from 'svelte/motion';import { cubicOut, quintOut } from 'svelte/easing';import { onMount } from 'svelte';import { flip } from 'svelte/animate';import { fade } from 'svelte/transition';const list = writable([1, 2, 3])
+"import { writable } from 'svelte/store';
+import { tweened } from 'svelte/motion';
+import { cubicOut } from 'svelte/easing';
+import { onMount } from 'svelte';
+const list = writable([1, 2, 3])
 const size = tweened(1, {
   duration: 300,
   easing: cubicOut
@@ -185,12 +223,14 @@ onMount(() => {})
 `;
 
 exports[`transform > template-literal.ts 1`] = `
-"import { ref } from 'vue';const z = \`bar-\${ref()}\`
+"import { ref } from 'vue';
+const z = \`bar-\${ref()}\`
 "
 `;
 
 exports[`transform > template-ref.vue 1`] = `
-"import { ref } from 'vue';<template>
+"import { ref } from 'vue';
+<template>
   <div ref=\\"divRef\\"></div>
 </template>
 
@@ -201,7 +241,10 @@ const divRef = ref(null)
 `;
 
 exports[`transform > vue.js 1`] = `
-"import { useQuasar, useMeta } from 'quasar';import { ref } from 'vue';import { defineStore, mapState } from 'pinia';const q = useQuasar()
+"import { useQuasar, useMeta } from 'quasar';
+import { ref } from 'vue';
+import { defineStore, mapState } from 'pinia';
+const q = useQuasar()
 const meta = useMeta()
 const a = ref(0)
 const piniaStore = defineStore()
@@ -210,7 +253,8 @@ const piniaMapSate = mapState()
 `;
 
 exports[`transform-vue-macro > existing.ts 1`] = `
-"import { $ } from 'vue/macros';const not1 = /($)/.test('a'); const exist1 = $(obj); const not1 = /($)/.test('a')
+"import { $ } from 'vue/macros';
+const not1 = /($)/.test('a'); const exist1 = $(obj); const not1 = /($)/.test('a')
 "
 `;
 
diff --git a/test/dts.test.ts b/test/dts.test.ts
index 581ddec8..3dbffb2d 100644
--- a/test/dts.test.ts
+++ b/test/dts.test.ts
@@ -1,8 +1,7 @@
-import { generateDeclaration } from '../src/core/dts'
-import { resolveOptions } from '../src/core/options'
+import { createContext } from '../src/core/ctx'
 
 it('dts', () => {
-  const options = resolveOptions({
+  const ctx = createContext({
     imports: [
       'vue-demi',
       'react',
@@ -25,5 +24,5 @@ it('dts', () => {
     ],
   })
 
-  expect(generateDeclaration(options.imports, {})).toMatchSnapshot()
+  expect(ctx.unimport.generateTypeDecarations()).toMatchSnapshot()
 })
diff --git a/test/fixtures/resolver-element.ts b/test/fixtures/resolver-element.ts
new file mode 100644
index 00000000..b0d0ee72
--- /dev/null
+++ b/test/fixtures/resolver-element.ts
@@ -0,0 +1,10 @@
+export default defineComponent({
+  components: {
+    ElButton,
+  },
+  directives: {
+    loading: vLoading,
+  },
+})
+
+ElMessage.warning('Test')
diff --git a/test/transform.test.ts b/test/transform.test.ts
index 78c736d9..dde6bac3 100644
--- a/test/transform.test.ts
+++ b/test/transform.test.ts
@@ -1,11 +1,11 @@
 import { resolve } from 'path'
 import { promises as fs } from 'fs'
 import fg from 'fast-glob'
-import { resolveOptions } from '../src/core/options'
-import { transform } from '../src/core/transform'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import { createContext } from '../src/core/ctx'
 
 describe('transform', async() => {
-  const options = resolveOptions({
+  const ctx = createContext({
     imports: [
       'vue',
       'pinia',
@@ -52,6 +52,9 @@ describe('transform', async() => {
           }
           : null
       },
+      ElementPlusResolver({
+        importStyle: 'css',
+      }),
     ],
   })
 
@@ -64,16 +67,16 @@ describe('transform', async() => {
   for (const file of files) {
     it(file, async() => {
       const fixture = await fs.readFile(resolve(root, file), 'utf-8')
-      const pass1 = (await transform(fixture, file, options))?.code ?? fixture
+      const pass1 = (await ctx.transform(fixture, file))?.code ?? fixture
       expect(pass1).toMatchSnapshot()
-      const pass2 = (await transform(pass1, file, options))?.code ?? pass1
+      const pass2 = (await ctx.transform(pass1, file))?.code ?? pass1
       expect(pass2).toBe(pass1)
     })
   }
 })
 
 describe('transform-vue-macro', async() => {
-  const options = resolveOptions({
+  const ctx = createContext({
     imports: [
       'vue/macros',
     ],
@@ -88,9 +91,9 @@ describe('transform-vue-macro', async() => {
   for (const file of files) {
     it(file, async() => {
       const fixture = await fs.readFile(resolve(root, file), 'utf-8')
-      const pass1 = (await transform(fixture, file, options))?.code ?? fixture
+      const pass1 = (await ctx.transform(fixture, file))?.code ?? fixture
       expect(pass1).toMatchSnapshot()
-      const pass2 = (await transform(pass1, file, options))?.code ?? pass1
+      const pass2 = (await ctx.transform(pass1, file))?.code ?? pass1
       expect(pass2).toBe(pass1)
     })
   }