This content originally appeared on DEV Community and was authored by O psnyder
Make Debugging in Vue Less Painful with Vue Log Arsenal
In many Vue projects, you end up spending more time than you’d like digging through Devtools to track down a specific piece of data. Or when you try to solve a bug you might repeatedly have to check the value of a property, when you’d rather just see the value instantly where and when it matters.
That’s why I built Vue Log Arsenal to make the whole debugging process faster. Instead of digging through the component tree or messing around with console.logs, you can just drop in a directive and see exactly what’s going on in your console.
Features
v-log → Logs all reactive and computed properties in the component when the element loads.
v-log.propertyName → Logs just the property you name.
v-log-change → Logs all reactive and computed properties when any value changes.
v-log-change.propertyName → Logs just the named property when it changes.
v-log-click → Logs all reactive and computed properties when the element is clicked.
v-log-click.propertyName → Logs just the named property when the element is clicked.
Example 1: v-log-change
You have a totalPrice property that updates whenever items are added or removed from an input in a form.
<input type="number" v-model="inventoryAmount" v-log-change.totalPrice>{{ totalPrice }}</span>
Now, every time totalPrice updates — whether from adding an item, removing one, or applying a discount — the new value is logged so you can spot the exact moment when something goes wrong.
Example 2: v-log
Here’s a quick way to see the value of selectedUser only when a certain condition becomes true.
Maybe you only care about the data when a user has admin privileges:
<div v-if="isAdmin" v-log.selectedUser>
<p>{{ selectedUser.name }}</p>
</div>
The log will only appear when isAdmin is true and this block is rendered. This is great for narrowing down noisy logs and focusing on values during specific app states.
Example 3: v-log-click
Want to log the state of all properties within a component when a user clicks a button? Just use:
<button v-log-click @click="checkout">
Checkout
</button>
When clicked it will log the exact state of the component with all its data at that moment. Perfect for checking data before an AJAX call is performed.
Installation
npm install vue-log-arsenal
Register it in your Vue 3 project:
import { createApp } from 'vue';
import App from './App.vue';
import VueLogArsenal from 'vue-log-arsenal';
createApp(App)
.use(VueLogArsenal)
.mount('#app');
Demo
Links
This content originally appeared on DEV Community and was authored by O psnyder