Introducing Colada
Tags: vue, pinia, javascript, webdev
Published: 2022-09-22 19:16:37

## Time-travel debugging for [Pinia](https://pinia.vuejs.org/)🍍, Vue’s official state management library


![Colada Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/klkovxdmekb33bthetsw.png)

### **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.](https://colada.dev)

### **Core Features**

- 🔄 Direct integration into [Vue.js DevTools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en), 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.


![Vue.js DevTools plugin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gfq3h6faxo7vnq3s389y.png)

![Colada Chrome DevTool Extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i98v85o7dfvq025ucmkc.gif)


### **Getting Started**
**Installation: VueDevTools Plugin**

1. Ensure the [Vue.js DevTools extension](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en) is installed
2. Install the [Colada npm package](https://www.npmjs.com/package/colada-plugin) in your app’s root directory
   `npm install colada-plugin --save-dev`

3. 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](https://chrome.google.com/webstore/detail/colada-devtools/icdbaobbeemmhlmjolbkedcneadkfpdl?hl=en&authuser=0) and click “Add to Chrome”

**Install from source**

1. Follow the directions above for adding `colada-plugin` to your Vue app.
2. Clone the [colada repository](https://github.com/oslabs-beta/colada) to your machine.
3. Run the following commands

```
cd colada-extension
npm install
npm run build
```
4. This will create a new `/dist` directory in `/colada-extension`
5. In Chrome, navigate to chrome://extensions
6. In the top right of the Extensions page, there is a toggle for “Developer Mode.” Make sure this is toggled ON.
7. 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 ](https://github.com/oslabs-beta/colada)| [Documentation](https://colada.dev/)

### **Colada Team**

- Parker Steinberg | [GitHub](https://github.com/parkersteinberg) | [LinkedIn](https://www.linkedin.com/in/parker-steinberg/)
- Jonathan Chen | [Github](https://github.com/JonHPC) | [LinkedIn](https://www.linkedin.com/in/jonathan-hp-chen/)
- Vaughn Sulit | [Github](https://github.com/bvaughnsulit) | [LinkedIn](https://www.linkedin.com/in/bvaughnsulit/)
- Dan Steinbrook | [Github](https://github.com/dsteinbrook) | [LinkedIn](https://www.linkedin.com/in/daniel-steinbrook/)