{"id":13881074,"url":"https://github.com/oslabs-beta/colada","last_synced_at":"2025-04-30T19:24:42.055Z","repository":{"id":59024269,"uuid":"529462075","full_name":"oslabs-beta/colada","owner":"oslabs-beta","description":"Time-travel debugging for Pinia, Vue's official state management library.","archived":false,"fork":false,"pushed_at":"2023-01-13T22:58:46.000Z","size":889,"stargazers_count":98,"open_issues_count":4,"forks_count":14,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-08T10:53:16.531Z","etag":null,"topics":["chrome-extension","devtools","pinia","pinia-plugin","vue","vuejs","vuejs-plugin"],"latest_commit_sha":null,"homepage":"https://colada.dev/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oslabs-beta.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-08-27T02:38:04.000Z","updated_at":"2025-03-12T09:25:18.000Z","dependencies_parsed_at":"2023-02-09T17:32:04.022Z","dependency_job_id":null,"html_url":"https://github.com/oslabs-beta/colada","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2Fcolada","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2Fcolada/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2Fcolada/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2Fcolada/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oslabs-beta","download_url":"https://codeload.github.com/oslabs-beta/colada/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251767863,"owners_count":21640621,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chrome-extension","devtools","pinia","pinia-plugin","vue","vuejs","vuejs-plugin"],"created_at":"2024-08-06T08:03:58.808Z","updated_at":"2025-04-30T19:24:42.011Z","avatar_url":"https://github.com/oslabs-beta.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://colada.dev/\" target=\"_blank\"\u003e\n  \u003c!--TODO: update img src and href's below once our app is live and make sure that the links open in a new tab--\u003e\n    \u003cimg width=\"300\" src=\"https://colada.dev/assets/Colada.b6cd244a.png\" alt=\"Colada logo\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cbr/\u003e\n\u003cp align=\"center\"\u003e\n  \u003c!--TODO: update img src and href's below once our app is live and make sure that the links open in a new tab--\u003e\n  \u003ca href=\"https://opensource.org/licenses/MIT\" target=\"_blank\"\u003e\u003cimg src=\"https://badgen.net/badge/license/MIT/green\" alt=\"license MIT\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://npmjs.com/package/colada-plugin\" target=\"_blank\"\u003e\u003cimg src=\"https://badgen.net/npm/v/colada-plugin\" alt=\"npm package\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://chrome.google.com/webstore/detail/colada-devtools/icdbaobbeemmhlmjolbkedcneadkfpdl\" target=\"_blank\"\u003e\u003cimg src=\"https://badgen.net/chrome-web-store/v/icdbaobbeemmhlmjolbkedcneadkfpdl\" alt=\"chrome web store\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.typescriptlang.org/docs/\" target=\"_blank\"\u003e\u003cimg src=\"https://badgen.net/badge/icon/typescript?icon=typescript\u0026label\" alt=\"typescript\"\u003e\u003c/a\u003e\n\n\u003c/p\u003e\n\u003cbr/\u003e\n\n# What is [Colada](https://colada.dev/)?\n\n## *Time-travel debugging for [Pinia🍍](https://pinia.vuejs.org/ \"Pinia homepage and documentation\"), Vue's official state management library*\n\u003cbr/\u003e\n\n## Colada offers a suite of tools for Vue developers working with the [Pinia state management library](https://pinia.vuejs.org/):\n1. [Chrome DevTool Extension](https://chrome.google.com/webstore/detail/colada-devtools/icdbaobbeemmhlmjolbkedcneadkfpdl)\n2. [NPM package](https://www.npmjs.com/package/colada-plugin) that serves as a [plugin](https://devtools.vuejs.org/plugin/plugins-guide.html) for the [Vue.js DevTools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en) Chrome Extension\n3. [Pinia🍍](https://pinia.vuejs.org/) plugin to directly access and mutate your app's store\n\n\u003cbr/\u003e\n\n## Core Features\n\n- ✅  Minimal installation and automatic detection of Vue app in [Vue.js DevTools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en)\n- 🔄  Direct integration into [Vue.js DevTools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en), so developers can use Colada without leaving their existing devtool configuration\n  - 🕰️  Time travel debugging\n  - 🔎  Inspector panel for viewing Pinia state within your Vue app\n- 💻  A [Chrome DevTool Extension](https://chrome.google.com/webstore/detail/colada-devtools/icdbaobbeemmhlmjolbkedcneadkfpdl) providing enhanced features, including: \n  - 🕰️  Time travel debugging\n  - 🔎  Inspector panel for viewing Pinia state within your Vue app\n\n\u003cbr/\u003e\n\n\n\u003cimg width=\"600px\" src=\"https://camo.githubusercontent.com/c3ebc90c193b526add0ea2d7999906ebd1e4e5a8e07765dd3f29bbaddd1042da/68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f763055564d336c4643305464514d375a476b2f67697068792e676966\" alt=\"demo screenshot\" /\u003e\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n# Getting Started\n\n## Installation: **Vue DevTools Plugin**\n0. Ensure the [Vue.js DevTools Chrome Extension](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en) is installed\n1. Install the [Colada npm package](https://www.npmjs.com/package/colada-plugin) in your app's root directory\n```bash\nnpm install colada-plugin --save-dev\n```\n\n2. Add Colada to your Vue app\n```js\n// main.js\n\nimport { createApp } from 'vue';\nimport { createPinia } from 'pinia';\n// import Colada Plugin\nimport Colada, { PiniaColadaPlugin } from 'colada-plugin';\nimport App from './App.vue';\n\nconst app = createApp(App);\nconst pinia = createPinia();\n\napp.use(pinia);\npinia.use(PiniaColadaPlugin);\napp.use(Colada);\n\napp.mount('#app');\n```\n\u003cbr/\u003e\n\n## Installation: **Chrome DevTools Extension**\n\n### *NOTE: Ensure the [Vue.js DevTools Chrome Extension](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en) is installed before installing the Colada DevTool Chrome Extension*\n\u003cbr/\u003e\n\n### There are two ways to install the Colada Chrome Extension:\n\n\n### 1. **Install from the Chrome Web Store**\n1. Navigate to [Colada on the Chrome Web Store](https://chrome.google.com/webstore/detail/colada-devtools/icdbaobbeemmhlmjolbkedcneadkfpdl), and click \"Add to Chrome\"\n\n\u003ca href=\"https://chrome.google.com/webstore/detail/colada-devtools/icdbaobbeemmhlmjolbkedcneadkfpdl\" target=\"_blank\"\u003e\u003cimg width=\"200px\" src=\"https://storage.googleapis.com/web-dev-uploads/image/WlD8wC6g8khYWPJUsQceQkhXSlv1/mPGKYBIR2uCP0ApchDXE.png\" alt=\"demo screenshot\" /\u003e\u003c/a\u003e\n\n### 2. **Install from source**\n\n1. Clone this repository\n2. Run the following commands\n```\ncd colada-extension\nnpm install\nnpm run build\n```\n3. This will create a new `/dist` directory in `/colada-extension`\n4. In Chrome, navigate to [chrome://extensions](chrome://extensions).\n5. In the top right of the Extensions page, there is a toggle for \"Developer Mode.\" Make sure this is toggled **ON**.\n6. On the top left of the page, select \"Load Unpacked\", and select the `colada/colada-extension/dist` directory.\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n# How to Use Colada\n\n## Using the Colada **Vue DevTools Plugin**\n- Navigate to the Vue.js DevTools\n\u003cbr/\u003e\n\n### **Time Travel Debugging**\n- Select the \"Colada\" timeline in the timeline view \n- Turn off screenshots \u003cbr/\u003e\n\u003cimg width=600px src=\"https://user-images.githubusercontent.com/40417991/191641371-1987ad2a-ca47-4fea-8ed9-8513e4158224.png\"\u003e\n- Changes in your app's store and state will automatically be tracked on the timeline\n- Click on timeline events to travel through time and update your app's state\n\u003cbr/\u003e\u003cbr/\u003e\n\n### **Inspector Panel** - View Your App's Stores and State in Real Time\n- Select \"Colada\" in the component menu drop down\n- Click on your Pinia store to view state, actions, and getters updated in real time\n\u003cbr/\u003e\n\u003cimg width=800px src=\"https://user-images.githubusercontent.com/40417991/191645124-67f347a7-e89e-479f-b123-fb56e68d0c7f.png\"\u003e\n\n\n\u003cbr/\u003e\n\u003chr/\u003e\n\u003cbr/\u003e\n\n## Using the Colada **Chrome DevTool Extension**\n- Navigate to Colada DevTools in Chrome \n\u003cbr/\u003e\n\u003cimg width=400px src=\"https://github.com/oslabs-beta/colada/blob/dev/colada-extension/public/assets/chrome-dev-tools.png?raw=true\"\u003e\n\n- Changes in your app's store and state will automatically be tracked on the timeline\n- Click on a timestamp or use the arrows to travel through time and update your app's state\n- View your app's state as you time travel in the inspector panel on the right\n\u003cbr\u003e\n\u003cimg width=1000px src=\"https://user-images.githubusercontent.com/34523493/191632172-9a2615f9-ac85-4c26-9bcc-14435014c8e1.png\"\u003e\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n# How to Give Colada a Test Run With Our Demo App\n\n1. Clone this repository\n2. Navigate to the ```demo-project``` directory\n```\ncd demo-project\n```\n3. Install packages and run application\n```bash\nnpm install\nnpm run dev\n```\n4. Interact with the app to watch the app's state update in real-time!\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n# Contributing and Issues\nInterested in conributing to Colada? Reach out to our [core team](https://colada.dev/#contributors) \u003cbr/\u003e\nFeature requests or issues/bugs to report? [Let us know!](https://github.com/oslabs-beta/colada/issues)\n\n\u003cbr/\u003e\n\n# Release Notes\n## Contributors\n- Parker Steinberg • [LinkedIn](https://www.linkedin.com/in/parker-steinberg/) • [Github](https://github.com/parkersteinberg)\n- Jonathan Chen • [LinkedIn](https://www.linkedin.com/in/jonathan-hp-chen/) • [Github](https://github.com/JonHPC)\n- Vaughn Sulit • [LinkedIn](https://www.linkedin.com/in/bvaughnsulit/) • [Github](https://github.com/bvaughnsulit)\n- Dan Steinbrook • [LinkedIn](https://www.linkedin.com/in/daniel-steinbrook/) • [Github](https://github.com/dsteinbrook)\n\n\u003cbr/\u003e\n0.1.1 | Initial release of Colada, more to come!\n\n\n\u003cbr/\u003e\n\n# License\n[MIT](http://opensource.org/licenses/MIT)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foslabs-beta%2Fcolada","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foslabs-beta%2Fcolada","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foslabs-beta%2Fcolada/lists"}