diff --git a/jd/generate-types-taro.cjs b/jd/generate-types-taro.cjs
index cd7bc1b66d..bf93168c22 100644
--- a/jd/generate-types-taro.cjs
+++ b/jd/generate-types-taro.cjs
@@ -58,6 +58,17 @@ const getLocale = () => {
   })
 }
 
+const getResolver = () => {
+  const source = path.join(sourceDir, 'resolver');
+  const to = path.resolve(__dirname, './../dist/resolver');
+  fs.cp(source, to, { recursive: true }, (err) => {
+    if(err) {
+      console.error(err);
+      return;
+    }
+  })
+}
+
 fs.cp(sourceDir, toDir, { recursive: true }, (err) => {
   if(err) {
     console.error(err);
@@ -99,4 +110,6 @@ declare module 'vue' {
   //国际化处理
   getLocale();
 
+  // resolver 类型文件
+  getResolver();
 });
diff --git a/jd/generate-types.cjs b/jd/generate-types.cjs
index d59cadf415..1bfc83f609 100644
--- a/jd/generate-types.cjs
+++ b/jd/generate-types.cjs
@@ -58,6 +58,17 @@ const getLocale = () => {
   })
 }
 
+const getResolver = () => {
+  const source = path.join(sourceDir, 'resolver');
+  const to = path.resolve(__dirname, './../dist/resolver');
+  fs.cp(source, to, { recursive: true }, (err) => {
+    if(err) {
+      console.error(err);
+      return;
+    }
+  })
+}
+
 fs.cp(sourceDir, toDir, { recursive: true }, (err) => {
   if(err) {
     console.error(err);
@@ -99,4 +110,7 @@ declare module 'vue' {
 
   //国际化处理
   getLocale();
+
+  // resolver 类型文件
+  getResolver();
 });
diff --git a/jd/generate-unplugin-deps.cjs b/jd/generate-unplugin-deps.cjs
index 578c0a3b3e..ca094e27af 100644
--- a/jd/generate-unplugin-deps.cjs
+++ b/jd/generate-unplugin-deps.cjs
@@ -52,11 +52,11 @@ outputFileEntry += `\nexport { Locale } from "./packages/locale/lang";
 export function install(app) {
   const packages = [${components.join(',')}];
   packages.forEach((item) => {
-      if (item.install) {
-          app.use(item);
-      } else if (item.name) {
-          app.component(item.name, item);
-      }
+    if (item.install) {
+      app.use(item);
+    } else if (item.name) {
+      app.component(item.name, item);
+    }
   });
 }
 export const version = '${packageConfig.version}';
diff --git a/package.json b/package.json
index 91dd92a41d..bc936ba491 100644
--- a/package.json
+++ b/package.json
@@ -46,8 +46,8 @@
     "build:site": "npm run checked && vite build",
     "build:site-jdt": "npm run checked && vite build --config vite.config.jdt.ts ",
     "build:site:oss": "npm run checked && vite build --base=/nutui/4x/",
-    "build": "npm run checked && vite build --config vite.config.build.ts && vite build --config vite.config.build.disperse.ts && npm run generate:themes && vite build --config vite.config.build.css.ts && vite build --config vite.config.build.locale.ts && npm run dts && npm run attrs && node jd/generate-unplugin-deps.cjs nutui && node jd/copy-dist.cjs nutui",
-    "build:taro:vue": "npm run checked:taro:vue && vite build --config vite.config.build.taro.vue.ts && vite build --config vite.config.build.taro.vue.disperse.ts && npm run generate:themes && vite build --config vite.config.build.css.ts && vite build --config vite.config.build.locale.ts && npm run dts:taro && npm run attrs:taro && node jd/generate-unplugin-deps.cjs nutui-taro && node jd/copy-dist.cjs nutui-taro",
+    "build": "npm run checked && vite build --config vite.config.build.ts && vite build --config vite.config.build.disperse.ts && npm run generate:themes && vite build --config vite.config.build.css.ts && vite build --config vite.config.build.locale.ts && vite build --config vite.config.build.resolver.ts && npm run dts && npm run attrs && node jd/generate-unplugin-deps.cjs nutui && node jd/copy-dist.cjs nutui",
+    "build:taro:vue": "npm run checked:taro:vue && vite build --config vite.config.build.taro.vue.ts && vite build --config vite.config.build.taro.vue.disperse.ts && npm run generate:themes && vite build --config vite.config.build.css.ts && vite build --config vite.config.build.locale.ts && vite build --config vite.config.build.resolver.ts && npm run dts:taro && npm run attrs:taro && node jd/generate-unplugin-deps.cjs nutui-taro && node jd/copy-dist.cjs nutui-taro",
     "serve": "vite preview",
     "upload": "yarn build:site:oss && node ./jd/upload.js",
     "add": "node jd/createComponentMode.js",
@@ -132,6 +132,7 @@
     "transliteration": "^2.2.0",
     "ts-jest": "^26.5.5",
     "typescript": "^4.9.3",
+    "unplugin-vue-components": "^0.23.0",
     "vite": "^4.0.0",
     "vite-plugin-md": "^0.21.5",
     "vscode": "^1.1.37",
diff --git a/publish/nutui-taro/package.json b/publish/nutui-taro/package.json
index e8d595879b..00d912a8f0 100644
--- a/publish/nutui-taro/package.json
+++ b/publish/nutui-taro/package.json
@@ -44,10 +44,11 @@
     "publish:latest": "npm publish"
   },
   "peerDependencies": {
-    "@nutui/icons-vue-taro": "^0.0.9"
+    "unplugin-vue-components": "^0.23.0"
   },
   "dependencies": {
-    "sass": "^1.50.0"
+    "sass": "^1.50.0",
+    "@nutui/icons-vue-taro": "^0.0.9"
   },
   "devDependencies": {},
   "repository": {
diff --git a/publish/nutui/package.json b/publish/nutui/package.json
index db6455eda8..eea752457b 100644
--- a/publish/nutui/package.json
+++ b/publish/nutui/package.json
@@ -37,10 +37,11 @@
     "publish:latest": "npm publish"
   },
   "peerDependencies": {
-    "@nutui/icons-vue": "^0.0.25"
+    "unplugin-vue-components": "^0.23.0"
   },
   "dependencies": {
-    "sass": "^1.50.0"
+    "sass": "^1.50.0",
+    "@nutui/icons-vue": "^0.0.25"
   },
   "devDependencies": {},
   "repository": {
diff --git a/src/packages/resolver/index.ts b/src/packages/resolver/index.ts
new file mode 100644
index 0000000000..4f4b3cfafb
--- /dev/null
+++ b/src/packages/resolver/index.ts
@@ -0,0 +1,53 @@
+import type { ComponentResolveResult, ComponentResolver } from 'unplugin-vue-components/types';
+
+export interface NutUIResolverOptions {
+  /**
+   * NutUI or NutUI-Taro
+   *
+   * @default false
+   */
+  taro?: boolean;
+
+  /**
+   * compatible with unplugin-auto-import
+   *
+   * @default false
+   */
+  autoImport?: boolean;
+}
+
+const nutFunctions = ['showToast', 'showNotify', 'showDialog', 'showImagePreview'];
+
+function getNutResolved(name: string, options: NutUIResolverOptions): ComponentResolveResult {
+  const { taro = false, autoImport = false } = options;
+
+  const packageName = taro ? '@nutui/nutui-taro' : '@nutui/nutui';
+
+  const componentName = autoImport ? name.slice(4) : name;
+
+  const style = `${packageName}/dist/packages/${componentName.toLowerCase()}/style`;
+
+  return {
+    name,
+    from: packageName,
+    sideEffects: style
+  };
+}
+
+/**
+ * Resolver for NutUI 4.0+
+ *
+ * @link https://github.com/jdf2e/nutui
+ */
+export default function NutUIResolver(options: NutUIResolverOptions = {}): ComponentResolver {
+  return {
+    type: 'component',
+    resolve: (name) => {
+      const { autoImport = false } = options;
+
+      if (autoImport && nutFunctions.includes(name)) return getNutResolved(name, options);
+
+      if (name.startsWith('Nut')) return getNutResolved(name.slice(3), options);
+    }
+  };
+}
diff --git a/tsconfig.declaration.json b/tsconfig.declaration.json
index 28bd1f32a0..c2f0256bb9 100644
--- a/tsconfig.declaration.json
+++ b/tsconfig.declaration.json
@@ -12,6 +12,7 @@
     "src/packages/nutui.vue.build.ts",
     "src/packages/locale",
     "src/packages/utils",
+    "src/packages/resolver",
   ],
   "exclude": [
     "node_modules",
diff --git a/tsconfig.declaration.taro.json b/tsconfig.declaration.taro.json
index a294d45bb2..697b631474 100644
--- a/tsconfig.declaration.taro.json
+++ b/tsconfig.declaration.taro.json
@@ -12,6 +12,7 @@
     "src/packages/nutui.taro.vue.build.ts",
     "src/packages/locale",
     "src/packages/utils",
+    "src/packages/resolver",
   ],
   "exclude": [
     "node_modules",
diff --git a/vite.config.build.resolver.ts b/vite.config.build.resolver.ts
new file mode 100644
index 0000000000..c6eef9b56a
--- /dev/null
+++ b/vite.config.build.resolver.ts
@@ -0,0 +1,28 @@
+import { defineConfig } from 'vite';
+import path from 'path';
+import vue from '@vitejs/plugin-vue';
+
+export default defineConfig({
+  plugins: [vue()],
+  build: {
+    minify: true,
+    lib: {
+      entry: path.resolve(__dirname, './src/packages/resolver/index.ts'),
+      name: 'name',
+      fileName: (format) => {
+        if (format === 'es') {
+          return 'index.mjs';
+        } else {
+          return 'index.js';
+        }
+      },
+      formats: ['es', 'cjs']
+    },
+    rollupOptions: {
+      output: {
+        dir: path.resolve(__dirname, './dist/resolver')
+      }
+    },
+    emptyOutDir: false
+  }
+});