Skip to content

feat(module): devtools integration#2196

Merged
benjamincanac merged 110 commits intov3from
wip/devtools
Nov 5, 2024
Merged

feat(module): devtools integration#2196
benjamincanac merged 110 commits intov3from
wip/devtools

Conversation

@romhml
Copy link
Copy Markdown
Member

@romhml romhml commented Sep 13, 2024

This PR introduces devtools for Nuxt UI. It allows users to browse Nuxt UI components and interact with their props.

image

How it works

There's two big parts to this implementation:

  • DevtoolsRenderer

    • Renders Nuxt UI components using the user's settings
    • it is mounted directly into the end user's app through the main Nuxt module.
  • Devtools App

    • A separate standalone app mounted on the Vite server.
    • It displays the ComponentRenderer inside an iframe and communicates with it using custom events.
    • It uses nuxt-component-meta to parse component props and render interactive inputs.

@benjamincanac benjamincanac added the v3 #1289 label Sep 16, 2024
@atinux
Copy link
Copy Markdown
Member

atinux commented Sep 16, 2024

Awesome 😍

Next step would be the Copy Code button I guess (like for assets):
CleanShot 2024-09-16 at 15 38 03@2x

@cloudflare-workers-and-pages
Copy link
Copy Markdown

cloudflare-workers-and-pages bot commented Oct 5, 2024

Deploying ui3 with  Cloudflare Pages  Cloudflare Pages

Latest commit: 0b5aa8c
Status: ✅  Deploy successful!
Preview URL: https://2701005d.ui-6q2.pages.dev
Branch Preview URL: https://wip-devtools.ui-6q2.pages.dev

View logs

@benjamincanac benjamincanac changed the title feat: devtools feat(module): devtools integration Oct 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

v3 #1289

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants