docs(framework/vue/devtools): align the 'Embedded Mode' example with the other adapters and add the missing 'ref' import#10855
Merged
Conversation
|
View your CI Pipeline Execution ↗ for commit 2d31081
☁️ Nx Cloud last updated this comment at |
Contributor
🚀 Changeset Version Preview2 package(s) bumped directly, 23 bumped as dependents. 🟩 Patch bumps
|
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughVue devtools documentation example updated: the embedded mode code snippet replaces ChangesVue Devtools Embedded Mode Example
sequenceDiagram
participant Button
participant Component
participant VueQueryDevtoolsPanel
Button->>Component: click -> toggleDevtools()
Component->>Component: isOpen = !isOpen
Component->>VueQueryDevtoolsPanel: render when isOpen true (v-if="isOpen")
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
Contributor
size-limit report 📦
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/framework/vue/devtools.md`:
- Around line 94-96: The Vue docs example is missing the Vue import for ref, so
the <script setup> snippet should be updated to import ref alongside
VueQueryDevtoolsPanel. Fix the code example in the devtools markdown by adding
the missing ref import in the same snippet where isOpen is initialized, and
review nearby Vue documentation examples for the same pattern to ensure any
ref(...) usage is paired with an import from Vue.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 8559a476-e7e4-465d-9a46-d6368774bce3
📒 Files selected for processing (1)
docs/framework/vue/devtools.md
…the other adapters and add the missing 'ref' import
sukvvon
force-pushed
the
docs/framework-vue-devtools-embedded-mode-align
branch
from
2d31081 to
617b606
Compare
sukvvon
changed the title
4 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🎯 Changes
Align the Vue
## Embedded Modeexample with the other adapter docs (React/Preact/Solid) and add the missingrefimport so the snippet is actually usable when copy-pasted into a plain Vue 3 project:import { ref } from 'vue'— without auto-import (Nuxt,unplugin-auto-import, etc.) the original snippet would throwref is not definedisDevtoolsOpentoisOpenso it matches the variable used in the React/Preact/Solid examplesOpen Devtoolsto the dynamic${isOpen ? 'Close' : 'Open'} the devtools panel, mirroring how the React/Preact/Solid examples reflect the current panel stateThe Vue-idiomatic parts of the snippet —
<script setup>with a namedtoggleDevtoolsfunction,v-iffor conditional rendering, and the<h1>The app!</h1>placeholder — are intentionally preserved so the example still reads like idiomatic Vue 3.Found while comparing the Embedded Mode sections across all four adapter docs in #10853. The missing
refimport was flagged by CodeRabbit during review.✅ Checklist
🚀 Release Impact
Summary by CodeRabbit