diff --git a/README.md b/README.md
index 1d83ef0..7f8686b 100644
--- a/README.md
+++ b/README.md
@@ -42,6 +42,8 @@ To use `v-viewer`, simply import it and the `css` file, and call `app.use()` to
 
 The component, directive and api will be installed together in the global.
 
+Two different API styles are both supported: **Options API** and **Composition API**.
+
 ```ts
 import { createApp } from 'vue'
 import App from './App.vue'
@@ -67,6 +69,7 @@ app.mount('#app')
     <button type="button" @click="show">Click to show</button>
   </div>
 </template>
+<!-- Options API -->
 <script lang="ts">
   import { defineComponent } from 'vue'
   export default defineComponent({
@@ -77,17 +80,31 @@ app.mount('#app')
           "https://picsum.photos/300/200",
           "https://picsum.photos/250/200"
         ]
-      };
+      }
     },
     methods: {
       show() {
         this.$viewerApi({
-          images: this.images,
+          images: this.images
         })
-      },
-    },
+      }
+    }
   })
 </script>
+<!-- Composition API -->
+<!-- <script lang="ts" setup>
+  import { api as viewerApi } from 'v-viewer'
+  const images = [
+    "https://picsum.photos/200/200",
+    "https://picsum.photos/300/200",
+    "https://picsum.photos/250/200"
+  ]
+  const show = () => {
+    viewerApi({
+      images
+    })
+  }
+</script> -->
 ```
 
 ### Support UMD
@@ -133,6 +150,7 @@ Get the element by selector and then use `el.$viewer` to get the `viewer` instan
     <button type="button" @click="show">Show</button>
   </div>
 </template>
+<!-- Options API -->
 <script lang="ts">
   import { defineComponent } from 'vue'
   import 'viewerjs/dist/viewer.css'
@@ -140,8 +158,8 @@ Get the element by selector and then use `el.$viewer` to get the `viewer` instan
   export default defineComponent({
     directives: {
       viewer: viewer({
-        debug: true,
-      }),
+        debug: true
+      })
     },
     data() {
       return {
@@ -150,7 +168,7 @@ Get the element by selector and then use `el.$viewer` to get the `viewer` instan
           "https://picsum.photos/300/200",
           "https://picsum.photos/250/200"
         ]
-      };
+      }
     },
     methods: {
       show () {
@@ -160,6 +178,23 @@ Get the element by selector and then use `el.$viewer` to get the `viewer` instan
     }
   })
 </script>
+<!-- Composition API -->
+<!-- <script lang="ts" setup>
+  import 'viewerjs/dist/viewer.css'
+  import { directive as viewer } from "v-viewer"
+  const vViewer = viewer({
+    debug: true
+  })
+  const images = [
+    "https://picsum.photos/200/200",
+    "https://picsum.photos/300/200",
+    "https://picsum.photos/250/200"
+  ]
+  const show = () => {
+    const viewer = document.querySelector('.images').$viewer
+    viewer.show()
+  }
+</script> -->
 ```
 
 #### Directive modifiers
@@ -195,9 +230,10 @@ You can simply import the component and register it locally too.
 ```vue
 <template>
   <div>
-    <viewer :options="options" :images="images"
+    <viewer :images="images"
             @inited="inited"
-            class="viewer" ref="viewer"
+            class="viewer"
+            ref="viewer"
             >
       <template #default="scope">
         <img v-for="src in scope.images" :src="src" :key="src">
@@ -207,6 +243,7 @@ You can simply import the component and register it locally too.
     <button type="button" @click="show">Show</button>
   </div>
 </template>
+<!-- Options API -->
 <script lang="ts">
   import { defineComponent } from 'vue'
   import 'viewerjs/dist/viewer.css'
@@ -222,7 +259,7 @@ You can simply import the component and register it locally too.
           "https://picsum.photos/300/200",
           "https://picsum.photos/250/200"
         ]
-      };
+      }
     },
     methods: {
       inited (viewer) {
@@ -234,6 +271,23 @@ You can simply import the component and register it locally too.
     }
   })
 </script>
+<!-- Composition API -->
+<!-- <script lang="ts" setup>
+  import 'viewerjs/dist/viewer.css'
+  import { component as Viewer } from "v-viewer"
+  const images = [
+    "https://picsum.photos/200/200",
+    "https://picsum.photos/300/200",
+    "https://picsum.photos/250/200"
+  ]
+  let $viewer:any = null
+  const inited = (viewer) => {
+    $viewer = viewer
+  }
+  const show = () => {
+    $viewer.show()
+  }
+</script> -->
 ```
 
 #### Component props
@@ -303,26 +357,29 @@ The function returns the current viewer instance.
     <button type="button" class="button" @click="previewImgObject">Img-Object Array</button>
   </div>
 </template>
+<!-- Options API -->
 <script lang="ts">
   import { defineComponent } from 'vue'
   import 'viewerjs/dist/viewer.css'
   import { api as viewerApi } from "v-viewer"
   export default defineComponent({
     data() {
-      sourceImageURLs: [
-        'https://picsum.photos/200/200?random=1',
-        'https://picsum.photos/200/200?random=2',
-      ],
-      sourceImageObjects: [
-        {
-          'src':'https://picsum.photos/200/200?random=3',
-          'data-source':'https://picsum.photos/800/800?random=3'
-        },
-        {
-          'src':'https://picsum.photos/200/200?random=4',
-          'data-source':'https://picsum.photos/800/800?random=4'
-        }
-      ]
+      return {
+        sourceImageURLs: [
+          'https://picsum.photos/200/200?random=1',
+          'https://picsum.photos/200/200?random=2'
+        ],
+        sourceImageObjects: [
+          {
+            'src': 'https://picsum.photos/200/200?random=3',
+            'data-source': 'https://picsum.photos/800/800?random=3'
+          },
+          {
+            'src': 'https://picsum.photos/200/200?random=4',
+            'data-source': 'https://picsum.photos/800/800?random=4'
+          }
+        ]
+      }
     },
     methods: {
       previewURL () {
@@ -345,6 +402,42 @@ The function returns the current viewer instance.
     }
   })
 </script>
+<!-- Composition API -->
+<!-- <script lang="ts" setup>
+import 'viewerjs/dist/viewer.css'
+import { api as viewerApi } from 'v-viewer'
+const sourceImageURLs = [
+  'https://picsum.photos/200/200?random=1',
+  'https://picsum.photos/200/200?random=2'
+]
+const sourceImageObjects = [
+  {
+    src: 'https://picsum.photos/200/200?random=3',
+    'data-source': 'https://picsum.photos/800/800?random=3'
+  },
+  {
+    src: 'https://picsum.photos/200/200?random=4',
+    'data-source': 'https://picsum.photos/800/800?random=4'
+  }
+]
+const previewURL = () => {
+  // If you use the `app.use` full installation, you can use `this.$viewerApi` directly like this
+  const $viewer = this.$viewerApi({
+    images: sourceImageURLs
+  })
+}
+const previewImgObject = () => {
+  // Or you can just import the api method and call it.
+  const $viewer = viewerApi({
+    options: {
+      toolbar: true,
+      url: 'data-source',
+      initialViewIndex: 1
+    },
+    images: sourceImageObjects
+  })
+}
+</script> -->
 ```
 
 ## Options & Methods of Viewer
@@ -388,6 +481,7 @@ app.mount('#app')
   </vuer>
   </div>
 </template>
+<!-- Options API -->
 <script lang="ts">
   import { defineComponent } from 'vue'
   export default defineComponent({
@@ -413,6 +507,24 @@ app.mount('#app')
     }
   })
 </script>
+<!-- Composition API -->
+<script lang="ts" setup>
+  import { api as vuerApi } from 'v-viewer'
+  const images = [
+    "https://picsum.photos/200/200",
+    "https://picsum.photos/300/200",
+    "https://picsum.photos/250/200"
+  ]
+  const show = () => {
+    // viewerjs instance name
+    const vuer = document.querySelector('.images').$vuer
+    vuer.show()
+    // api name
+    vuerApi({
+      images
+    })
+  }
+</script>
 ```
 
 ### defaultOptions
diff --git a/example/views/example/ApiExample.vue b/example/views/example/ApiExample.vue
index ae3ba5c..03eb0b6 100644
--- a/example/views/example/ApiExample.vue
+++ b/example/views/example/ApiExample.vue
@@ -1,3 +1,4 @@
+<!-- Options API -->
 <script lang="ts">
 import {
   defineComponent,
@@ -49,6 +50,45 @@ export default defineComponent({
   },
 })
 </script>
+<!-- Composition API -->
+<!-- <script lant="ts" setup>
+import VueViewer, { api as viewerApi } from '../../../src'
+
+VueViewer.setDefaults({
+  zIndex: 2021,
+})
+
+const sourceImageURLs = []
+const sourceImageObjects = []
+const base = Math.floor(Math.random() * 60) + 10
+for (let i = 0; i < 5; i++) {
+  sourceImageURLs.push(`https://picsum.photos/id/${base + i}/1440/900`)
+  sourceImageObjects.push({
+    'data-source': `https://picsum.photos/id/${base + i}/1440/900`,
+    'src': `https://picsum.photos/id/${base + i}/346/216`,
+    'alt': `Image: ${base + i}`,
+  })
+}
+
+const previewURL = () => {
+  const $viewer = viewerApi({
+    images: sourceImageURLs,
+  })
+  console.log($viewer)
+}
+
+const previewImgObject = () => {
+  const $viewer = viewerApi({
+    options: {
+      toolbar: true,
+      url: 'data-source',
+      initialViewIndex: 2,
+    },
+    images: sourceImageObjects,
+  })
+  console.log($viewer)
+}
+</script> -->
 
 <template>
   <div>
diff --git a/example/views/example/ComponentExample.vue b/example/views/example/ComponentExample.vue
index 78f5f63..f8690f7 100755
--- a/example/views/example/ComponentExample.vue
+++ b/example/views/example/ComponentExample.vue
@@ -1,3 +1,4 @@
+<!-- Options API -->
 <script lang="ts">
 import {
   defineComponent,
@@ -33,7 +34,7 @@ for (let i = 0; i < 10; i++) {
 export default defineComponent({
   name: 'ComponentExample',
   components: {
-    Viewer: component,
+    VViewer: component,
   },
   setup() {
     let $viewer: Viewer
@@ -200,6 +201,173 @@ export default defineComponent({
   },
 })
 </script>
+<!-- Composition API -->
+<!-- <script lang="ts" setup>
+import {
+  ref,
+} from 'vue'
+import type { Viewer } from '../../../src'
+import VueViewer, { component as vViewer } from '../../../src'
+
+VueViewer.setDefaults({
+  zIndexInline: 2021,
+})
+
+class ImageData {
+  thumbnail: string
+  source: string
+  title: string
+
+  constructor(source: string, thumbnail: string, title: string) {
+    this.source = source
+    this.thumbnail = thumbnail
+    this.title = title
+  }
+}
+
+const sourceImages: ImageData[] = []
+const base = Math.floor(Math.random() * 60) + 10
+for (let i = 0; i < 10; i++) {
+  const data = new ImageData(`https://picsum.photos/id/${base + i}/1440/900`, `https://picsum.photos/id/${base + i}/346/216`, `Image: ${base + i}`)
+  sourceImages.push(data)
+}
+
+let $viewer: Viewer
+
+const form = ref({
+  view: 2,
+    zoom: -0.1,
+    zoomTo: 0.8,
+    rotate: 90,
+    rotateTo: 180,
+    scaleX: 1,
+    scaleY: 1,
+})
+const toggleOptions =ref([
+  'button',
+  'navbar',
+  'title',
+  'toolbar',
+  'tooltip',
+  'movable',
+  'zoomable',
+  'rotatable',
+  'scalable',
+  'transition',
+  'fullscreen',
+  'keyboard',
+])
+const options =ref({
+  inline: true,
+  button: true,
+  navbar: true,
+  title: true,
+  toolbar: true,
+  tooltip: true,
+  movable: true,
+  zoomable: true,
+  rotatable: true,
+  scalable: true,
+  transition: true,
+  fullscreen: true,
+  keyboard: true,
+  url: 'data-source',
+})
+const images =ref([...sourceImages].splice(0, 5))
+
+const inited = (viewer: Viewer) => {
+  $viewer = viewer
+}
+
+const add = () => {
+  images.push(sourceImages[images.length])
+}
+
+const remove = () => {
+  images.pop()
+}
+
+const view = () => {
+  if (form.view >= 0 && form.view < images.length)
+    $viewer.view(form.view)
+}
+
+const zoom = (value: number) => {
+  $viewer.zoom(value || form.zoom)
+}
+
+const zoomTo = () => {
+  $viewer.zoomTo(form.zoomTo)
+}
+
+const rotate = (value: number) => {
+  $viewer.rotate(value || form.rotate)
+}
+
+const rotateTo = () => {
+  $viewer.rotateTo(form.rotateTo)
+}
+
+const scaleX = (value: number) => {
+  if (value) {
+    $viewer.scaleX(value)
+  }
+  else {
+    form.scaleX = -form.scaleX
+    $viewer.scaleX(form.scaleX)
+  }
+}
+
+const scaleY = (value: number) => {
+  if (value) {
+    $viewer.scaleY(value)
+  }
+  else {
+    form.scaleY = -form.scaleY
+    $viewer.scaleY(form.scaleY)
+  }
+}
+
+const move = (x: number, y: number) => {
+  $viewer.move(x, y)
+}
+
+const prev = () => {
+  $viewer.prev()
+}
+
+const next = () => {
+  $viewer.next()
+}
+
+const play = () => {
+  $viewer.play()
+}
+
+const stop = () => {
+  $viewer.stop()
+}
+
+const show = () => {
+  $viewer.show()
+}
+
+const full = () => {
+  $viewer.full()
+}
+
+const tooltip = () => {
+  $viewer.tooltip()
+}
+
+const reset = () => {
+  $viewer.reset()
+}
+
+const toggleInline = (inline: boolean) => {
+  options.inline = inline
+}
+</script> -->
 
 <template>
   <div>
@@ -524,7 +692,7 @@ export default defineComponent({
       </div>
       <div class="tile is-10 is-vertical is-parent">
         <div class="viewer-wrapper">
-          <Viewer
+          <VViewer
             ref="viewer"
             :options="options"
             :images="images"
@@ -549,7 +717,7 @@ export default defineComponent({
               </figure>
               <p><strong>Options: </strong>{{ scope.options }}</p>
             </template>
-          </Viewer>
+          </VViewer>
         </div>
       </div>
     </div>
diff --git a/example/views/example/DirectiveExample.vue b/example/views/example/DirectiveExample.vue
index 8ace8c6..69b525b 100755
--- a/example/views/example/DirectiveExample.vue
+++ b/example/views/example/DirectiveExample.vue
@@ -1,3 +1,4 @@
+<!-- Options API -->
 <script lang="ts">
 import {
   defineComponent,
@@ -75,6 +76,62 @@ export default defineComponent({
   },
 })
 </script>
+<!-- Composition API -->
+<!-- <script lang="ts" setup>
+import {
+  ref,
+} from 'vue'
+import VueViewer, { directive as viewer } from '../../../src'
+
+VueViewer.setDefaults({
+  zIndex: 2021,
+})
+
+class ImageData {
+  thumbnail: string
+  source: string
+  title: string
+
+  constructor(source: string, thumbnail: string, title: string) {
+    this.source = source
+    this.thumbnail = thumbnail
+    this.title = title
+  }
+}
+
+const sourceImages: ImageData[] = []
+const base = Math.floor(Math.random() * 60) + 10
+for (let i = 0; i < 10; i++) {
+  const data = new ImageData(`https://picsum.photos/id/${base + i}/1440/900`, `https://picsum.photos/id/${base + i}/346/216`, `Image: ${base + i}`)
+  sourceImages.push(data)
+}
+const vViewer = viewer({
+  debug: true
+})
+
+const el = ref<HTMLElement | null>(null)
+const options = ref({
+  toolbar: true,
+  url: 'data-source',
+})
+const images = ref([...sourceImages].splice(0, 5))
+
+const toggleToolbar = (toolbar: boolean) => {
+  options.toolbar = toolbar
+}
+
+const add = () => {
+  images.push(sourceImages[images.length])
+}
+
+const remove = () => {
+  images.pop()
+}
+
+const show = () => {
+  el.value && el.value.$viewer.show()
+}
+</script> -->
 
 <template>
   <div>
diff --git a/example/views/example/index.vue b/example/views/example/index.vue
index cd60d35..508d004 100755
--- a/example/views/example/index.vue
+++ b/example/views/example/index.vue
@@ -1,3 +1,4 @@
+<!-- Options API -->
 <script lang="ts">
 import { defineComponent } from 'vue'
 import DirectiveExample from './DirectiveExample.vue'
@@ -12,6 +13,12 @@ export default defineComponent({
   },
 })
 </script>
+<!-- Composition API -->
+<!-- <script lang="ts" setup>
+import DirectiveExample from './DirectiveExample.vue'
+import ComponentExample from './ComponentExample.vue'
+import ApiExample from './ApiExample.vue'
+</script> -->
 
 <template>
   <div>