Stop guessing where your template variables come from. Instantly see their origin.
VueGlimpse is a VS Code extension for Vue & Nuxt that ends the constant scrolling and context-switching when working in large components. It shows you exactly where your template variables originate—be it props, a store, or a computed property—with subtle, at-a-glance icons. It supports both <script setup> (Composition API) and the Options API, helping you stay in your flow and understand your component's data source instantly.
You're deep in a component, see <p>{{ user.name }}</p>, and ask yourself:
"Where is
usercoming from? Is it aprop? Aref? From a Pinia store? Or adataproperty?"
Each question forces a jump to the <script> block, breaking your concentration. VueGlimpse eliminates these interruptions.
- 🧠 Reduces Cognitive Load: Stop mapping your component's state in your head. The editor does it for you.
- ⚡ Keeps You in the Flow: Stay focused on your template without constant context switching.
- 🚀 Speeds Up Onboarding & Reviews: Instantly understand any component's data flow, regardless of the API style.
- At-a-glance Origin Indicators: Subtle icons in your template tell you the source of your data.
- Reliability Indicator: Always know if the analysis is up-to-date with a simple status bar icon.
- Universal API Support: Works seamlessly with both
<script setup>and the Options API. - Intelligent Store Detection: Recognizes state from Pinia and Vuex based on imports.
- Minimalist Hovers: Instantly identify a variable's origin (
Prop,Ref, etc.) on hover—no code, just context. - Compiler-Level Accuracy: Powered by
@vue/compiler-sfcfor guaranteed correctness where possible. - Full API Visibility: Identifies the entire Vue API surface, including stores and passthrough attributes.
- Blazing Fast: Intelligent caching ensures zero performance impact.
- Configurable: Toggle icons and hovers to fit your workflow.
A simple, intuitive icon set helps you decode your template instantly.
| Icon | Origin | What It Means |
|---|---|---|
| ℗ | prop |
Data passed down from a parent (defineProps or props option). |
| 📥 | attrs / slots |
Attributes or slots passed from a parent. Available via $attrs, $slots, etc. |
| 📤 | emit |
An event sent to a parent component. Available via defineEmits or $emit. |
| 🔹 | ref |
A reactive primitive value (ref() in <script setup>). |
| 🔷 | reactive |
A reactive object (reactive() or a data() property). |
| ⚡ | computed |
A derived value that updates automatically (computed option or function). |
| 🍍 | Pinia State |
State from a Pinia store, identified via imports. |
| 📦 | Vuex / Other Store |
State from Vuex or another global store. |
| ƒ | method |
A function you can call from the template (methods option or a function in <script setup>). |
| • | Local Variable | A simple, non-reactive const or let in <script setup>. |
- Open VS Code.
- Go to the Extensions view (
Ctrl+Shift+X). - Search for
VueGlimpse. - Click Install.
VueGlimpse activates for .vue files. This requires a language support extension like Vue (Official) (which you likely already have).
For a distraction-free view (e.g., during a presentation), you can quickly hide or show all VueGlimpse icons.
- Open the Command Palette (
Ctrl+Shift+PorCmd+Shift+P). - Type and select
VueGlimpse: Toggle Decorations.
VueGlimpse is designed to work out of the box, but you can tailor its features to your workflow by editing your settings.json.
| Setting | Description | Default |
|---|---|---|
vueGlimpse.enabled |
Globally enables or disables all features (icons & hovers). | true |
vueGlimpse.hovers.enabled |
Toggles the origin identifier tooltip on hover. | true |
vueGlimpse.statusBar.enabled |
Shows or hides the analysis status indicator in the status bar. | true |
vueGlimpse.icons.override |
Overrides default icons. Example: { "props": "🅿️", "ref": "R" } |
{} |
vueGlimpse.colors.override |
Overrides default colors. Example: { "props": "#90ee90", "ref": "terminal.ansiBlue" } |
{} |
- ❤️ Show Support: If you find VueGlimpse useful, please star the repository on GitHub!
- 🤝 Contribute: Have an idea or find a bug? Please open an issue.