Introducing Colada

Jonathan Chen — Thu, 22 Sep 2022 19:16:37 +0000

Time-travel debugging for Pinia🍍, Vue’s official state management library

Pinia 🍍

Pinia is the new official state management library for Vue, compatible with Vue2 and Vue3, replacing VueX . As compared with the previous VueX versions it is replacing, it offers a simpler, less verbose API, and introduces native support for Typescript. Vue developers who have existing projects using VueX will want to make the switch to Pinia, because VueX will no longer be officially supported, and developers starting new Vue projects will likely want to use Pinia for the same reason. Pinia comes with support from Vue devtools, however because Pinia and Vue 3 were released just earlier this year, the devtools are currently lacking some functionality for Pinia, specifically time travel debugging.

Colada 🥥

Enter Colada, the perfect companion for Pinia! Noticing this lack of time travel capability, we decided to implement it in a chrome extension, as well as a plugin for the existing Vue devtools. You can install the Colada plugin in your Vue-Pinia application, and click on nodes representing store changes to dynamically change the state of the app back to previous snapshots, improving the debugging process for Vue-Pinia apps with complex state changes. Additionally if you install the Colada chrome extension along with the plugin, you can access a separate Chrome devtools panel offering the same time travel functionality with an enhanced U.I.

To learn more and get started, see our documentation here.

Core Features

🔄 Direct integration into Vue.js DevTools, so developers can use Colada without needing to leave their existing devtool configuration
🕰️ Time travel debugging
🔎 Inspector panel for viewing your Vue app’s Pinia state
A Chrome DevTool extension providing the same features with an enhanced U.I.

Getting Started

Installation: VueDevTools Plugin

Ensure the Vue.js DevTools extension is installed
Install the Colada npm package in your app’s root directory
npm install colada-plugin --save-dev
Add Colada to your Vue app

// main.js

import { createApp } from 'vue';
import { createPinia } from 'pinia';
// import Colada Plugin
import Colada, { PiniaColadaPlugin } from 'colada-plugin';
import App from './App.vue';

const app = createApp(App);
const pinia = createPinia();

app.use(pinia);
pinia.use(PiniaColadaPlugin);
app.use(Colada);

app.mount('#app');

Installation: Chrome Extension

Make sure you have the Vue.js DevTools installed.

There are two ways to install the Colada Chrome extension:
Install from the Chrome Web Store

Follow the directions above for adding colada-plugin to your Vue app.
Navigate to Colada on the Chrome Web Store and click “Add to Chrome”

Install from source

Follow the directions above for adding colada-plugin to your Vue app.
Clone the colada repository to your machine.
Run the following commands

cd colada-extension
npm install
npm run build

This will create a new /dist directory in /colada-extension
In Chrome, navigate to chrome://extensions
In the top right of the Extensions page, there is a toggle for “Developer Mode.” Make sure this is toggled ON.
On the top left of the page, select “Load Unpacked”, and select the colada/colada-extension/dist directory

Features to come

Interactive component tree graph to visualize data flow between Vue components and further aid with debugging

Colada Links

Github | Documentation

Colada Team

Parker Steinberg | GitHub | LinkedIn
Jonathan Chen | Github | LinkedIn
Vaughn Sulit | Github | LinkedIn
Dan Steinbrook | Github | LinkedIn

DEV Community: Jonathan Chen