diff --git a/examples/web/index.ts b/examples/web/index.ts
index 366f76b8795ba67708b8697f48bba1753a381aff..9acc538ca7158e9bebf92ce692170b0e84a14031 100644
--- a/examples/web/index.ts
+++ b/examples/web/index.ts
@@ -1,8 +1,10 @@
 import { createApp } from "vue";
-import App from "./vue/app.vue";
+import Boytacean from "./vue/app.vue";
 import { default as _wasm, GameBoy, PadKey, PpuMode } from "./lib/boytacean.js";
 import info from "./package.json";
 
+console.info(Boytacean);
+
 const PIXEL_UNSET_COLOR = 0x1b1a17ff;
 
 const LOGIC_HZ = 600;
@@ -1101,8 +1103,7 @@ const wasm = async () => {
 (async () => {
     (globalThis as any).__VUE_OPTIONS_API__ = true;
     (globalThis as any).__VUE_PROD_DEVTOOLS__ = false;
-
-    createApp(App).mount("#app");
+    createApp(Boytacean).mount("#app");
 
     const emulator = new Emulator();
     await emulator.main();
diff --git a/examples/web/vue/app.vue b/examples/web/vue/app.vue
index ee279da326f393316fb3d8b8bd9aa4fd1da78b85..5154c7dede40ee32ef85b0cf799889c8cacbef4c 100644
--- a/examples/web/vue/app.vue
+++ b/examples/web/vue/app.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-bind:class="'hello'" v-on:click="() => count++">Hello This {{ name }} {{ count}}!</div>
+    <div v-bind:class="'hello'" v-on:click="() => count++">Hello {{ name }} {{ count}}!</div>
 </template>
 
 <style scoped>
@@ -10,7 +10,7 @@
 </style>
 
 <script>
-export const App = {
+export const Boytacean = {
     data() {
         return {
             name: "Vue",
@@ -19,5 +19,5 @@ export const App = {
     }
 };
 
-export default App;
+export default Boytacean;
 </script>
diff --git a/examples/web/vue/components/button.vue b/examples/web/vue/components/button/button.vue
similarity index 100%
rename from examples/web/vue/components/button.vue
rename to examples/web/vue/components/button/button.vue
diff --git a/examples/web/vue/components/index.ts b/examples/web/vue/components/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a6aa31e15a1f3fc6b14e8b8d8ffd8738313ac3ff
--- /dev/null
+++ b/examples/web/vue/components/index.ts
@@ -0,0 +1,13 @@
+import { App } from "vue";
+
+import { Button } from "./button/button.vue";
+
+const install = (Vue: App) => {
+    Vue.component("vue", Button);
+};
+
+export {
+    Button
+};
+
+export default install;
diff --git a/examples/web/vue/index.ts b/examples/web/vue/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ab32c2016a7199672c68622b5832cb6b4d740506
--- /dev/null
+++ b/examples/web/vue/index.ts
@@ -0,0 +1,12 @@
+import { App } from "vue";
+
+import Components from "./components";
+
+const install = (Vue: App) => {
+    Vue.use(Components);
+};
+
+export * from "./components";
+export { Boytacean } from "./app.vue";
+
+export default install;