From 3309ef60b2803ca520d9912a951db252e409d71c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <atinux@gmail.com>
Date: Mon, 13 Jan 2025 18:56:48 +0100
Subject: [PATCH] docs(getting-started): add nuxt devtools video & learnvue
 video

---
 docs/content/1.getting-started/1.index.md | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/docs/content/1.getting-started/1.index.md b/docs/content/1.getting-started/1.index.md
index 53ef73f8..833491be 100644
--- a/docs/content/1.getting-started/1.index.md
+++ b/docs/content/1.getting-started/1.index.md
@@ -8,6 +8,8 @@ We're thrilled to introduce this major update to our UI library, bringing signif
 
 ## What's New in v3?
 
+<iframe width="100%" height="100%" src="https://www.youtube-nocookie.com/embed/_eQxomah-nA?si=pDSzchUBDKb2NQu7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="aspect-ratio: 16/9;"></iframe>
+
 ### Reka UI (Radix Vue)
 
 We've transitioned from [Headless UI](https://headlessui.com/) to [Reka UI](https://reka-ui.com/) as our core component foundation. This shift brings several key advantages:
@@ -74,6 +76,20 @@ You can now use Nuxt UI in any Vue project without Nuxt by adding the Vite and V
 Learn how to install and configure Nuxt UI in a Vue project in the **Vue installation guide**.
 ::
 
+## Nuxt DevTools Integration
+
+Nuxt UI is deeply integrated with Nuxt Devtools, 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"}
+::
+
 ## Migration
 
 We want to be transparent: migrating from Nuxt UI v2 to v3 will require significant effort. While we've maintained core concepts and components, Nuxt UI v3 has been rebuilt from the ground up, resulting in a new library with enhanced capabilities.