diff --git a/docs/content/2.guide/2.directory-structure/1.components.md b/docs/content/2.guide/2.directory-structure/1.components.md
index 69f348f44bd..9e959c11ce7 100644
--- a/docs/content/2.guide/2.directory-structure/1.components.md
+++ b/docs/content/2.guide/2.directory-structure/1.components.md
@@ -225,7 +225,9 @@ This feature only works with Nuxt auto-imports and `#components` imports. Explic
 
 ## `<DevOnly>` Component
 
-Nuxt also provides a `<DevOnly>` component to render a component only during development. The content will not be included in production builds.
+Nuxt provides the `<DevOnly>` component to render a component only during development.
+
+The content will not be included in production builds and tree-shaken.
 
 ```html{}[pages/example.vue]
 <template>
diff --git a/packages/nuxt/src/app/components/dev-only.mjs b/packages/nuxt/src/app/components/dev-only.mjs
index c9f59c40494..ba7cd22deaf 100644
--- a/packages/nuxt/src/app/components/dev-only.mjs
+++ b/packages/nuxt/src/app/components/dev-only.mjs
@@ -2,9 +2,9 @@ import { defineComponent } from 'vue'
 
 export default defineComponent({
   name: 'DevOnly',
-  setup (_, { slots }) {
+  setup (_, props) {
     if (process.dev) {
-      return () => slots.default?.()
+      return () => props.slots.default?.()
     }
     return () => null
   }
diff --git a/playground/app.vue b/playground/app.vue
index ccdc6b8bb2f..17d631007a1 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -5,8 +5,6 @@
   <!-- Edit this file to play around with Nuxt but never commit changes! -->
   <div>
     Nuxt 3 Playground
-
-    <DevOnly>Development mode</DevOnly>
   </div>
 </template>