diff --git a/packages/vue3/src/_dev/App.vue b/packages/vue3/src/_dev/App.vue
index 13c4c600..b8985464 100644
--- a/packages/vue3/src/_dev/App.vue
+++ b/packages/vue3/src/_dev/App.vue
@@ -1,24 +1,44 @@
 <script setup lang="ts">
 import 'uno.css';
 import '../assets/main.css';
-import { ref } from 'vue';
-import { Input, TextArea } from '~/components';
+import { PrimaryButton, ToastContainer, toast } from '~/components';
+import type { ToastOptions } from '~/components/ToastContainer/types';
 
-const comment = ref('');
+const toasts: ToastOptions[] = [
+  {
+    title: 'Info',
+    description: 'Click here to learn more about the exciting enhancements we\'ve made.',
+    type: 'info',
+  },
+  {
+    title: 'Success',
+    description: 'Your profile information has been successfully updated.',
+    type: 'success',
+  },
+  {
+    title: 'Warning',
+    description: 'Please check your internet connection.',
+    type: 'warning',
+  },
+  {
+    title: 'Error',
+    description: 'Unable to save data, check again later.',
+    type: 'error',
+  },
+];
+
+const handleClick = () => {
+  const toastOptions: ToastOptions = toasts[Math.floor(Math.random() * toasts.length)];
+  toast.show(toastOptions);
+};
 </script>
 
 <template>
-  <div class="container">
-    <TextArea
-      v-model="comment"
-      placeholder="Leave your comment"
-    />
-    <Input
-      v-model="comment"
-      placeholder="Leave your comment"
-      type="password"
-      can-show
-    />
+  <ToastContainer :limit="3" />
+  <div className="container">
+    <PrimaryButton @click="handleClick">
+      Show Toast
+    </PrimaryButton>
   </div>
 </template>
 
diff --git a/packages/vue3/src/components/ToastContainer/index.ts b/packages/vue3/src/components/ToastContainer/index.ts
deleted file mode 100644
index f1a48ca3..00000000
--- a/packages/vue3/src/components/ToastContainer/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { ToastOptions } from './types';
-
-export const showToast = (toastOptions: ToastOptions) => {
-  const data = { id: 'show-toast', options: toastOptions };
-  window.postMessage(data);
-};
diff --git a/packages/vue3/src/components/ToastContainer/toast.ts b/packages/vue3/src/components/ToastContainer/toast.ts
new file mode 100644
index 00000000..6601b889
--- /dev/null
+++ b/packages/vue3/src/components/ToastContainer/toast.ts
@@ -0,0 +1,8 @@
+import type { ToastOptions } from './types';
+
+export const toast = {
+  show: (toastOptions: ToastOptions) => {
+    const data = { id: 'show-toast', options: toastOptions };
+    window.postMessage(data);
+  },
+};
diff --git a/packages/vue3/src/components/index.ts b/packages/vue3/src/components/index.ts
index c3656e92..256230ba 100644
--- a/packages/vue3/src/components/index.ts
+++ b/packages/vue3/src/components/index.ts
@@ -46,6 +46,7 @@ export { default as SearchInput } from './Search/SearchInput.vue';
 export { default as Alert } from './Alert/Alert.vue';
 export { default as Toast } from './Toast/Toast.vue';
 export { default as ToastContainer } from './ToastContainer/ToastContainer.vue';
+export { toast } from './ToastContainer/toast';
 export { default as DraggableItem } from './Draggable/DraggableItem.vue';
 export { default as Draggable } from './Draggable/Draggable.vue';
 export { default as Radio } from './Radio/Radio.vue';