diff --git a/build.config.ts b/build.config.ts
index 655decc8..bd31e71f 100644
--- a/build.config.ts
+++ b/build.config.ts
@@ -2,7 +2,6 @@ export default {
   entries: [
     './src/index',
     { input: './src/components/', outDir: 'dist/components', ext: 'js' },
-    { input: './src/plugins/', outDir: 'dist/plugins', ext: 'js' },
     { input: './src/utils/', outDir: 'dist/utils', ext: 'js' }
   ],
   declaration: true,
diff --git a/docs/pages/dark.vue b/docs/pages/dark.vue
index 6feaadaa..5e7c3a23 100644
--- a/docs/pages/dark.vue
+++ b/docs/pages/dark.vue
@@ -16,9 +16,13 @@
       Usage
     </h2>
 
-    <p>VueUse <a href="https://vueuse.org/core/useDark" target="_blank" class="underline">useDark</a> composable is instancied through a plugin injected by the module.</p>
+    <pre class="u-bg-gray-900 rounded-md u-text-white px-4">
+      <code class="text-sm">
+        {{ code5 }}
+      </code>
+    </pre>
 
-    <p>This composable makes use of the `dark` class on the html tag so you can easily take advantage of the UnoCSS `dark` variant.</p>
+    <p>The VueUse <a href="https://vueuse.org/core/useDark" target="_blank" class="underline">useDark</a> composable makes use of the `dark` class on the html tag so you can easily take advantage of the UnoCSS `dark` variant.</p>
 
     <pre class="u-bg-gray-900 rounded-md u-text-white px-4">
       <code class="text-sm">
@@ -30,12 +34,12 @@
 
     <pre class="u-bg-gray-900 rounded-md u-text-white px-4">
       <code class="text-sm">
-        {{ code1 }}
+        {{ code2 }}
       </code>
     </pre>
     <pre class="u-bg-gray-900 rounded-md u-text-white px-4">
       <code class="text-sm">
-        {{ code2 }}
+        {{ code1 }}
       </code>
     </pre>
 
@@ -71,4 +75,7 @@ const code3 = `
 const code4 = `
 <div class="bg-white dark:bg-black"></div>
 `
+const code5 = `
+yarn add @vueuse/components @vueuse/core
+`
 </script>
diff --git a/package.json b/package.json
index 78235c13..e1e0ef68 100644
--- a/package.json
+++ b/package.json
@@ -28,12 +28,12 @@
     "@iconify-json/heroicons-solid": "^1.0.2",
     "@popperjs/core": "^2.10.2",
     "@unocss/nuxt": "^0.12.4",
-    "@vueuse/components": "^7.0.3",
-    "@vueuse/core": "^7.0.3",
     "gradient-avatar": "^1.0.2",
     "pathe": "^0.2.0"
   },
   "devDependencies": {
+    "@vueuse/core": "^7.0.3",
+    "@vueuse/components": "^7.0.3",
     "@nuxtjs/eslint-config-typescript": "7.0.2",
     "eslint": "8.3.0",
     "nuxt3": "3.0.0-27294839.7e5e50b",
diff --git a/src/index.ts b/src/index.ts
index 8786368c..7a066cd5 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,5 @@
 import { resolve } from 'pathe'
-import { defineNuxtModule, installModule, addPlugin, addComponentsDir } from '@nuxt/kit'
+import { defineNuxtModule, installModule, addComponentsDir } from '@nuxt/kit'
 import { colors } from '@unocss/preset-uno'
 import type { UnocssNuxtOptions } from '@unocss/nuxt'
 
@@ -22,7 +22,9 @@ export interface UiOptions {
    * @default 'u'
    */
   prefix?: string
+
   colors?: UiColorsOptions
+
   unocss?: UnocssNuxtOptions
 }
 
@@ -135,11 +137,8 @@ export default defineNuxtModule<UiOptions>({
       variants
     }
 
-    await installModule(nuxt, { src: '@vueuse/core/nuxt' })
     await installModule(nuxt, { src: '@unocss/nuxt', options })
 
-    addPlugin(resolve(__dirname, './plugins/plugin'))
-
     addComponentsDir({
       path: resolve(__dirname, './components/elements'),
       prefix,
@@ -171,7 +170,7 @@ export default defineNuxtModule<UiOptions>({
       watch: false
     })
 
-    nuxt.options.build.transpile.push('@popperjs/core', '@headlessui/vue', '@vueuse/core', '@nuxthq/ui')
+    nuxt.options.build.transpile.push('@popperjs/core')
   }
 })
 
diff --git a/src/plugins/plugin.ts b/src/plugins/plugin.ts
deleted file mode 100644
index 8ca02249..00000000
--- a/src/plugins/plugin.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { useDark } from '@vueuse/core'
-import { defineNuxtPlugin } from '#app'
-
-export default defineNuxtPlugin(() => {
-  useDark()
-})