Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: devtools #2196

Open
wants to merge 103 commits into
base: v3
Choose a base branch
from
Open

feat: devtools #2196

wants to merge 103 commits into from

Conversation

romhml
Copy link
Collaborator

@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
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

Copy link

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

Deploying ui3 with  Cloudflare Pages  Cloudflare Pages

Latest commit: 9dcef0a
Status: ✅  Deploy successful!
Preview URL: https://88b4cd24.ui-6q2.pages.dev
Branch Preview URL: https://wip-devtools.ui-6q2.pages.dev

View logs

src/module.ts Outdated Show resolved Hide resolved
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