<!-- mobian-agent-page publisher="dailydev" canonical="https://daily.dev/posts/nuxt-devtools-v4-r4rhejxdx" -->

---
title: Nuxt DevTools v4 | daily.dev
description: Nuxt DevTools v4 is rebuilt on a new framework-agnostic toolkit called Devframe, plus Vite DevTools. Nuxt no longer vendors its own copy of Vue DevTools, so...
canonical: https://daily.dev/posts/nuxt-devtools-v4-r4rhejxdx
twitter:card: summary_large_image
twitter:site: @dailydotdev
og:type: website
og:site_name: daily.dev
og:title: Nuxt DevTools v4 | daily.dev
og:description: Nuxt DevTools v4 is rebuilt on a new framework-agnostic toolkit called Devframe, plus Vite DevTools. Nuxt no longer vendors its own copy of Vue DevTools, so...
og:url: https://daily.dev/posts/nuxt-devtools-v4-r4rhejxdx
og:image: https://api.daily.dev/og/posts/r4rhEJxdX.png
og:image:alt: Nuxt DevTools v4
og:image:width: 1200
og:image:height: 630
og:locale: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Nuxt DevTools v4

**[Nuxt](https://daily.dev/sources/nuxt_source)** · 8 min read · 2 upvotes · 1 comments

## Summary

Nuxt DevTools v4 is rebuilt on a new framework-agnostic toolkit called Devframe, plus Vite DevTools. Nuxt no longer vendors its own copy of Vue DevTools, so users get the complete, up-to-date Vue DevTools automatically. The stack has three layers: Devframe Hub, Vite DevTools, and Nuxt DevTools, each inheriting from the one above. This is a transition release: the old @nuxt/devtools-kit API still works through a shim that logs deprecation warnings, with diagnostic codes like NDT_DEP_0005. Nuxt 5 ships with DevTools v4 by default, or it can be added to Nuxt v4.5+ via 'npx nuxt module add @nuxt/devtools@4'.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://nuxt.com/blog/devtools-v4>

## Questions this post answers

### How do I migrate my Nuxt module from the old devtools-kit API to the new onDevtoolsReady API in Nuxt DevTools v4?

Replace addCustomTab() with ctx.docks.register(), extendServerRpc() with ctx.scope('my-module').rpc.register(), and startSubprocess() with ctx.terminals.startChildProcess(), all inside an onDevtoolsReady((ctx) => {...}) callback. Each deprecated helper logs a diagnostic code such as NDT_DEP_0005 so you can find exact calls to update. A compatibility shim keeps the old API working in the meantime.

_daily.dev surfaces framework migration guides like this as Nuxt module APIs evolve._

### Why did Nuxt DevTools stop bundling its own copy of Vue DevTools?

Nuxt DevTools v4 is built on a new framework-agnostic toolkit called Devframe and on Vite DevTools, so it no longer needs to vendor and manually sync Vue DevTools features into its own code. Instead it inherits Vue DevTools directly, meaning users always get the complete, up-to-date Vue DevTools, and improvements to Vite DevTools reach Nuxt without extra work.

_Developers tracking tooling architecture shifts follow release breakdowns like this on daily.dev._

### How do I add Nuxt DevTools v4 to an existing Nuxt v4.5 project?

Run 'npx nuxt module add @nuxt/devtools@4' to add it as a module on Nuxt v4.5 or later. Alternatively, Nuxt 5 ships with DevTools v4 included by default, so no manual installation is needed there.

_daily.dev helps developers upgrading Nuxt tooling stay on top of each version's setup steps._

## Community discussion

Top comments from developers on daily.dev.

**@romanius** · 0 upvotes

> freakin love nuxt

## Similar posts on daily.dev

- [Pluggable, Extensible, and Playful DevTools](https://daily.dev/posts/pluggable-extensible-and-playful-devtools-6xms07jys) · Anthony Fu · 3 upvotes · 1 comments
- [Vite toolchain: Cloudflare, vinext, and shared web tooling](https://daily.dev/posts/vite-toolchain-cloudflare-vinext-and-shared-web-tooling-mspyi9ulb) · Flavio Copes · 0 upvotes · 0 comments
- [Nuxt 4.4 · Nuxt Blog](https://daily.dev/posts/nuxt-4-4-nuxt-blog-vdidzqjqy) · Nuxt · 59 upvotes · 3 comments
- [Weekly Vue News \#227 - Mastering Nuxt Layers, DevTools & Vite 8 Beta](https://daily.dev/posts/weekly-vue-news-227---mastering-nuxt-layers-devtools-vite-8-beta-iilv9zz9n) · Weekly Vue News · 29 upvotes · 0 comments

---

Tags: [#devtools](https://daily.dev/tags/devtools), [#vuejs](https://daily.dev/tags/vuejs), [#vite](https://daily.dev/tags/vite), [#nuxt](https://daily.dev/tags/nuxt)

[View this post on daily.dev](https://daily.dev/posts/nuxt-devtools-v4-r4rhejxdx)

```json
{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]}
{"@context":"https://schema.org","@type":"TechArticle","headline":"Nuxt DevTools v4","url":"https://daily.dev/posts/nuxt-devtools-v4-r4rhejxdx","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/nuxt-devtools-v4-r4rhejxdx"},"datePublished":"2026-10-28T19:48:55.117Z","dateModified":"2026-10-28T22:36:24.207Z","description":"Nuxt DevTools v4 is rebuilt on a new framework-agnostic toolkit called Devframe, plus Vite DevTools. Nuxt no longer vendors its own copy of Vue DevTools, so...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/587bb23578b13f3014ac10e0db6a45d2?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/587bb23578b13f3014ac10e0db6a45d2?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Nuxt","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Nuxt","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/b35a100e22dc4eddbddf32c32667a57b","url":"https://daily.dev/sources/nuxt_source"},"commentCount":1,"discussionUrl":"https://daily.dev/posts/nuxt-devtools-v4-r4rhejxdx","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"keywords":"devtools,vuejs,vite,nuxt","timeRequired":"PT8M"}
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Nuxt","item":"https://daily.dev/sources/nuxt_source"},{"@type":"ListItem","position":3,"name":"Nuxt DevTools v4"}]}
{"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/nuxt-devtools-v4-r4rhejxdx","comment":[{"@type":"Comment","text":"freakin love nuxt","datePublished":"2026-10-28T20:59:22.538Z","url":"https://daily.dev/posts/r4rhEJxdX#c-Ld5BeScJf","author":{"@type":"Person","name":"Roman K.","url":"https://daily.dev/romanius","image":"https://avatars.githubusercontent.com/u/60832668?v=4"}}]}
{"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/nuxt-devtools-v4-r4rhejxdx#faq","mainEntity":[{"@type":"Question","name":"How do I migrate my Nuxt module from the old devtools-kit API to the new onDevtoolsReady API in Nuxt DevTools v4?","acceptedAnswer":{"@type":"Answer","text":"Replace addCustomTab() with ctx.docks.register(), extendServerRpc() with ctx.scope('my-module').rpc.register(), and startSubprocess() with ctx.terminals.startChildProcess(), all inside an onDevtoolsReady((ctx) =\u003e {...}) callback. Each deprecated helper logs a diagnostic code such as NDT_DEP_0005 so you can find exact calls to update. A compatibility shim keeps the old API working in the meantime. daily.dev surfaces framework migration guides like this as Nuxt module APIs evolve."}},{"@type":"Question","name":"Why did Nuxt DevTools stop bundling its own copy of Vue DevTools?","acceptedAnswer":{"@type":"Answer","text":"Nuxt DevTools v4 is built on a new framework-agnostic toolkit called Devframe and on Vite DevTools, so it no longer needs to vendor and manually sync Vue DevTools features into its own code. Instead it inherits Vue DevTools directly, meaning users always get the complete, up-to-date Vue DevTools, and improvements to Vite DevTools reach Nuxt without extra work. Developers tracking tooling architecture shifts follow release breakdowns like this on daily.dev."}},{"@type":"Question","name":"How do I add Nuxt DevTools v4 to an existing Nuxt v4.5 project?","acceptedAnswer":{"@type":"Answer","text":"Run 'npx nuxt module add @nuxt/devtools@4' to add it as a module on Nuxt v4.5 or later. Alternatively, Nuxt 5 ships with DevTools v4 included by default, so no manual installation is needed there. daily.dev helps developers upgrading Nuxt tooling stay on top of each version's setup steps."}}]}
```