diff --git a/README.md b/README.md
index c499d65..c466db9 100644
--- a/README.md
+++ b/README.md
@@ -2,33 +2,7 @@
[![NPM version](https://img.shields.io/npm/v/unplugin-vue-images?color=a1b858&label=)](https://www.npmjs.com/package/unplugin-vue-images)
-unplugin-vue-images for [unplugin](https://github.com/unjs/unplugin).
-
-## Template Usage
-
-> example use [@vtrbo/cli](https://github.com/vtrbo/cli)
->
-> example use [@vtrbo/ni](https://github.com/vtrbo/ni)
-
-Clone this template
-
-```bash
-vtr
-# select Unplugin
-
-# or
-# vtr vtrbo/starter-unplugin my-plugin
-```
-
-Globally replace `unplugin-vue-images` with your plugin name.
-
-Globally replace `VueImages` with your plugin name (big camel case).
-
-Then you can start developing your plugin.
-
-To test your plugin, run `nr dev`.
-
-To release your plugin, run `nr release`.
+Use the image resource as a component in the vue project.
## Install
@@ -126,6 +100,131 @@ build({
+## Usage
+
+You can learn more by looking at the examples.
+[`vite-vue2`](https://github.com/vtrbo/unplugin-vue-images/tree/main/examples/vite-vue2)
+[`vite-vue3`](https://github.com/vtrbo/unplugin-vue-images/tree/main/examples/vite-vue3)
+
+### Without
+
+```vue
+
+
+
+
+
+```
+
+### With
+
+```vue
+
+
+
+
+
+```
+
+> **Note**
+> By default this plugin will import images in the `src/assets/images` path. You can customize it using the `dirs` option.
+> Import rule is `~images[:alias]/filename[.extension][?attrs]`, So you have the flexibility to import your image resources.
+
+## Configuration
+
+```ts
+VueImages({
+ // search images dirs
+ // default 'src/assets/images'
+ dirs: [
+ // 'src/assets/images',
+ // { icons: 'src/assets/icons' }
+ ],
+
+ // search images extensions
+ // default ['jpg', 'jpeg', 'png', 'svg', 'webp', 'gif']
+ extensions: [],
+
+ // generate vue component version
+ // support 'vue2' | 'vue3'
+ // default 'vue3'
+ compiler: 'vue3'
+})
+```
+
+## Support [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components)
+
+### config
+
+```ts
+// `vite.config.ts`
+
+import type { UserConfig } from 'vite'
+import Vue from '@vitejs/plugin-vue'
+import Components from 'unplugin-vue-components/vite'
+import VueImages from 'unplugin-vue-images/vite'
+import { ImagesResolver } from 'unplugin-vue-images/resolver'
+
+const collectionDirs = [
+ 'src/assets/images',
+ { icons: 'src/assets/icons' },
+]
+
+const extensions = ['jpg', 'jpeg', 'png', 'svg', 'webp', 'gif']
+
+const config: UserConfig = {
+ plugins: [
+ Vue(),
+ VueImages({
+ dirs: collectionDirs,
+ extensions,
+ compiler: 'vue3',
+ }),
+ Components({
+ resolvers: [
+ ImagesResolver({
+ // Components Prefix
+ // Only those starting with prefix will be imported automatically
+ // Set to false or '' disabled
+ // default: 'img'
+ prefix: 'img',
+
+ // The dirs must be the same as those in plugins
+ // default: 'src/assets/images'
+ dirs: collectionDirs,
+
+ // The extensions must be the same as those in plugins
+ // default: ['jpg', 'jpeg', 'png', 'svg', 'webp', 'gif']
+ extensions,
+ }),
+ ],
+ }),
+ ],
+}
+
+export default config
+```
+
+### usage
+
+```vue
+
+
+
+```
+
+> **Note**
+> By default this plugin will import images in the `src/assets/images` path. You can customize it using the `dirs` option.
+> Usage rule is `[prefix-][alias-]name[-extension]`, So you have the flexibility to usage generate components.
+
## License
[MIT](./LICENSE) License © 2022 [Victor Bo](https://github.com/vtrbo)