feat(module)!: remove devtools in favor of compodium (#3380)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

docs/app/composables/useLinks.ts

@@ -78,12 +78,35 @@ export function useLinks() {
     }]
   }, {
     label: 'Figma',
-    icon: 'i-lucide-figma',
+    icon: 'i-simple-icons-figma',
     to: '/figma'
   }, {
-    label: 'Roadmap',
-    icon: 'i-lucide-map',
-    to: '/roadmap'
+    label: 'Community',
+    icon: 'i-lucide-users',
+    children: [{
+      label: 'Roadmap',
+      description: 'Track our development progress in real-time.',
+      icon: 'i-lucide-map',
+      to: '/roadmap'
+    }, {
+      label: 'Devtools Integration',
+      description: 'Integrate Nuxt UI with Nuxt Devtools with Compodium.',
+      icon: 'i-lucide-code',
+      to: 'https://github.com/romhml/compodium',
+      target: '_blank'
+    }, {
+      label: 'Raycast Extension',
+      description: 'Access Nuxt UI components without leaving your editor.',
+      icon: 'i-simple-icons-raycast',
+      to: 'https://github.com/HugoRCD/nuxt-ui-raycast-extension',
+      target: '_blank'
+    }, {
+      label: 'Figma to Code',
+      description: 'Convert Figma designs to Nuxt UI code.',
+      icon: 'i-simple-icons-figma',
+      to: 'https://github.com/Justineo/tempad-dev-plugin-nuxt-ui',
+      target: '_blank'
+    }]
   }, {
     label: 'Releases',
     icon: 'i-lucide-rocket',

docs/content/1.getting-started/1.index.md

@@ -79,16 +79,24 @@ Learn how to install and configure Nuxt UI in a Vue project in the **Vue install
 
 ### Nuxt DevTools Integration
 
-Nuxt UI is deeply integrated with Nuxt Devtools, providing a powerful development experience:
+You can play with Nuxt UI components as well as your app components directly from Nuxt Devtools with the [compodium](https://github.com/romhml/compodium) module, providing a powerful development experience:
 
 - **Component Inspector**: Inspect and analyze Nuxt UI components in real-time
 - **Live Preview**: Modify component props and see changes instantly
 - **Code Generation**: Get the corresponding code for your component configurations
 
-::video{poster="https://res.cloudinary.com/nuxt/video/upload/so_0/v1736788078/nuxt-ui/nuxt-ui3-devtools_wbmgmc.jpg" controls class="w-full h-auto rounded"}
-  :source{src="https://res.cloudinary.com/nuxt/video/upload/v1736788078/nuxt-ui/nuxt-ui3-devtools_wbmgmc.webm" type="video/webm"}
-  :source{src="https://res.cloudinary.com/nuxt/video/upload/v1736788078/nuxt-ui/nuxt-ui3-devtools_wbmgmc.mp4" type="video/mp4"}
-  :source{src="https://res.cloudinary.com/nuxt/video/upload/v1736788078/nuxt-ui/nuxt-ui3-devtools_wbmgmc.ogg" type="video/ogg"}
+::note
+Install the module to your Nuxt application with one command:
+
+```bash [Terminal]
+npx nuxi module add compodium
+```
+::
+
+::video{poster="https://res.cloudinary.com/nuxt/video/upload/so_0/v1740751953/nuxt-ui/nuxt-compodium_y2bvqw.jpg" controls class="w-full h-auto rounded"}
+  :source{src="https://res.cloudinary.com/nuxt/video/upload/v1740751953/nuxt-ui/nuxt-compodium_y2bvqw.webm" type="video/webm"}
+  :source{src="https://res.cloudinary.com/nuxt/video/upload/v1740751953/nuxt-ui/nuxt-compodium_y2bvqw.mp4" type="video/mp4"}
+  :source{src="https://res.cloudinary.com/nuxt/video/upload/v1740751953/nuxt-ui/nuxt-compodium_y2bvqw.ogg" type="video/ogg"}
 ::
 
 ## Migration

docs/content/1.getting-started/2.installation/1.nuxt.md

@@ -219,23 +219,6 @@ export default defineNuxtConfig({
 This option adds the `transition-colors` class on components with hover or active states.
 ::
 
-### `devtools.enabled`
-
-Use the `devtools.enabled` option to enable or disable the Nuxt UI devtools.
-
-- Default: `true`{lang="ts-type"}
-
-```ts [nuxt.config.ts]
-export default defineNuxtConfig({
-  modules: ['@nuxt/ui'],
-  ui: {
-    devtools: {
-      enabled: false
-    }
-  }
-})
-```
-
 ## Continuous Releases
 
 Nuxt UI v3 uses [pkg.pr.new](https://github.com/stackblitz-labs/pkg.pr.new) for continuous preview releases, providing developers with instant access to the latest features and bug fixes without waiting for official releases.

docs/content/1.getting-started/contribution.md

@@ -37,7 +37,6 @@ The documentation lives in the `docs` folder as a Nuxt app using `@nuxt/content`
 The module code resides in the `src` folder. Here's a breakdown of its structure:
 
 ```bash
-├── devtools/
 ├── plugins/
 ├── runtime/
 │   ├── components/        # Where all the components are located

docs/nuxt.config.ts

@@ -38,7 +38,9 @@ export default defineNuxtConfig({
     }
   },
 
-  devtools: { enabled: true },
+  devtools: {
+    enabled: true
+  },
 
   app: {
     head: {