diff --git a/package.json b/package.json
index 95180a2..19faf4b 100644
--- a/package.json
+++ b/package.json
@@ -40,11 +40,11 @@
 		"dist"
 	],
 	"scripts": {
-		"build": "tsc && vite build",
+		"build": "tsc && vite build --config vite.config.lib.js",
 		"deploy": "sh deploy.sh",
-		"dev": "vite --mode page",
-		"page": "vite build --mode page",
-		"serve": "vite preview --mode page --port=5005"
+		"dev": "vite",
+		"page": "vite build",
+		"serve": "vite preview --port=5005"
 	},
 	"dependencies": {
 		"@vueuse/core": "9.10.0",
@@ -62,4 +62,4 @@
 		"vitepress": "1.0.0-alpha.36",
 		"windicss": "^3.5.6"
 	}
-}
+}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index cbdc04b..4bcb5e4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,22 +1,22 @@
 {
-  // Change this to match your project
-  "include": ["src/**/*"],
+	// Change this to match your project
+	"include": ["src/main.js"],
 	"exclude": ["node_modules"],
-  "compilerOptions": {
-    // Tells TypeScript to read JS files, as
-    // normally they are ignored as source files
-    "allowJs": true,
-    // Generate d.ts files
-    "declaration": true,
-    // This compiler run should
-    // only output d.ts files
-    "emitDeclarationOnly": true,
-    // Types should go into this directory.
-    // Removing this would place the .d.ts files
-    // next to the .js files
-    "outDir": "public/types",
-    // go to js file when using IDE functions like
-    // "Go to Definition" in VSCode
-    "declarationMap": true
-  }
-}
\ No newline at end of file
+	"compilerOptions": {
+		// Tells TypeScript to read JS files, as
+		// normally they are ignored as source files
+		"allowJs": true,
+		// Generate d.ts files
+		"declaration": true,
+		// This compiler run should
+		// only output d.ts files
+		"emitDeclarationOnly": true,
+		// Types should go into this directory.
+		// Removing this would place the .d.ts files
+		// next to the .js files
+		"outDir": "public/types",
+		// go to js file when using IDE functions like
+		// "Go to Definition" in VSCode
+		"declarationMap": true
+	}
+}
diff --git a/vite.config.js b/vite.config.js
index 991069d..4c31c83 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -4,88 +4,61 @@ import Components from "unplugin-vue-components/vite";
 import Icons from "unplugin-icons/vite";
 import IconsResolver from "unplugin-icons/resolver";
 import WindiCSS from "vite-plugin-windicss";
+import Vue from "@vitejs/plugin-vue";
 
-export default defineConfig(({ command, mode }) => {
-  const config = {
-    base: "./",
-    plugins: [
-      WindiCSS({
-        scan: {
-          dirs: ["src"],
-          exclude: ["/node_modules/"],
-          fileExtensions: ["vue", "ts"],
-        },
-      }),
-      Icons({
-        /* options */
-      }),
-      Components({
-        dirs: ["src"],
-        extensions: ["html", "vue"],
-        directoryAsNamespace: true,
-        globalNamespaces: ["global"],
-        include: [/\.vue$/, /\.vue\?vue/, /\.html$/],
-        exclude: [/node_modules/, /\.git/],
-        resolvers: [
-          IconsResolver({
-            componentPrefix: "",
-          }),
-        ],
-      }),
-    ],
-  };
-
-  if (mode == "production") {
-    return {
-      ...config,
-      build: {
-        outDir: "./dist",
-        lib: {
-          entry: path.resolve(__dirname, "./src/main.js"),
-          name: "gun-avatar",
-        },
-        optimizeDeps: {
-          include: [
-            "gun",
-            "gun/gun",
-            "gun/sea",
-            "gun/sea.js",
-            "gun/lib/then",
-            "gun/lib/webrtc",
-            "gun/lib/radix",
-            "gun/lib/radisk",
-            "gun/lib/store",
-            "gun/lib/rindexed",
-          ],
-        },
-      },
-    };
-  }
-
-  if (mode == "page") {
-    return {
-      ...config,
-      build: {
-        outDir: "./demo",
-        optimizeDeps: {
-          include: [
-            "gun",
-            "gun/gun",
-            "gun/sea",
-            "gun/sea.js",
-            "gun/lib/then",
-            "gun/lib/webrtc",
-            "gun/lib/radix",
-            "gun/lib/radisk",
-            "gun/lib/store",
-            "gun/lib/rindexed",
-          ],
-        },
+export default defineConfig({
+  base: "./",
+  build: {
+    outDir: "./demo",
+    optimizeDeps: {
+      include: [
+        "gun",
+        "gun/gun",
+        "gun/sea",
+        "gun/sea.js",
+        "gun/lib/then",
+        "gun/lib/webrtc",
+        "gun/lib/radix",
+        "gun/lib/radisk",
+        "gun/lib/store",
+        "gun/lib/rindexed",
+      ],
+    },
+  },
+  plugins: [
+    Vue({
+      template: {
+        compilerOptions: {
+          isCustomElement: tag => tag == 'gun-avatar'
+        }
+      }
+    }),
+    WindiCSS({
+      scan: {
+        dirs: ["src/demo/"],
+        exclude: ["/node_modules/"],
+        fileExtensions: ["vue", "ts"],
       },
-    };
-  }
-  return config;
-});
+      config: { separator: "_", }
+    }),
+    Icons({
+      /* options */
+    }),
+    Components({
+      dirs: ["src/demo/components/"],
+      extensions: ["html", "vue"],
+      directoryAsNamespace: true,
+      globalNamespaces: ["global"],
+      include: [/\.vue$/, /\.vue\?vue/, /\.html$/],
+      exclude: [/node_modules/, /\.git/],
+      resolvers: [
+        IconsResolver({
+          componentPrefix: "",
+        }),
+      ],
+    }),
+  ],
+})
 
 
 
diff --git a/vite.config.lib.js b/vite.config.lib.js
new file mode 100644
index 0000000..37e9a5b
--- /dev/null
+++ b/vite.config.lib.js
@@ -0,0 +1,12 @@
+import path from "path";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  build: {
+    outDir: "./dist",
+    lib: {
+      entry: path.resolve(__dirname, "./src/main.js"),
+      name: "gun-avatar",
+    },
+  },
+})
\ No newline at end of file