VueGlimpse
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.
Table of Contents
Why VueGlimpse?
You're deep in a component, see <p>{{ user.name }}</p>, and ask yourself:
"Where is user coming from? Is it a prop? A ref? From a Pinia store? Or a data property?"
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.
Features
- 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-sfc for 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.
The Legend: Icon Guide
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>. |
Getting Started
1. Installation
- Open VS Code.
- Go to the Extensions view (
Ctrl+Shift+X).
- Search for
VueGlimpse.
- Click Install.
2. Requirements
VueGlimpse activates for .vue files. This requires a language support extension like Vue (Official) (which you likely already have).
Usage
Toggling Decorations
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+P or Cmd+Shift+P).
- Type and select
VueGlimpse: Toggle Decorations.
Configuration
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 |
|
true |
vueGlimpse.icons.override |
Overrides default icons. Example: { "props": "🅿️", "ref": "R" } |
{} |
|
|
vueGlimpse.colors.override |
Overrides default colors. Example: { "props": "#90ee90", "ref": "terminal.ansiBlue" } |
{} |
|
|
License
MIT
