Pinia Colada Devtools

Migrating from v1 to v2

Version 2 moves the devtools out of your Vue component tree and into Vite. Keep @pinia/colada-devtools as a development dependency, then remove the v1 component from your app:

 <script setup lang="ts">
-import { PiniaColadaDevtools } from '@pinia/colada-devtools'
 </script>

 <template>
   <RouterView />
-  <PiniaColadaDevtools />
 </template>

If you used <PiniaColadaProdDevtools />, remove it in the same way and enable production support in the Vite plugin as described below.

Vite DevTools

Use this when your project uses the new Vite DevTools:

pnpm add -D @pinia/colada-devtools @vitejs/devtools @vitejs/devtools-kit

+import { DevTools } from '@vitejs/devtools'
+import { PiniaColadaDevtools } from '@pinia/colada-devtools/vite'

 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(), DevTools(), PiniaColadaDevtools()],
 })

The Pinia Colada plugin must come after DevTools().

Use Vite DevTools and its kit version 0.7.5 or later with DevFrame 1.

For Nuxt, install @pinia/colada-devtools and enable Nuxt DevTools. The Pinia Colada Nuxt module registers the integration automatically:

 export default defineNuxtConfig({
   modules: ['@pinia/nuxt', '@pinia/colada-nuxt'],
+  devtools: { enabled: true },
 })

Standalone

If the project does not use Vite DevTools, use the standalone DevFrame UI:

pnpm add -D @pinia/colada-devtools @devframes/hub @devframes/hub-ui @devframes/vite

+import { PiniaColadaDevtoolsStandalone } from '@pinia/colada-devtools/standalone'

 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(), PiniaColadaDevtoolsStandalone()],
 })

MCP support is included through @devframes/agentic. The standalone host enables MCP; a custom hub controls MCP through its own mcp option. The Vite and standalone adapters publish their live hub to devframe connect. Browser-backed tools are available while an app page is open and authorized.

Production builds

To keep the devtools in production, enable both options in your Vite configuration:

plugins: [vue(), DevTools({ build: { withApp: true } }), PiniaColadaDevtools({ production: true })]

Load <base>__devtools/embedded.js in the built app and deploy the full build output. See the playground configuration for a complete example. In the playground, add ?DEVTOOLS to the URL to show the devtools.

Development

pnpm run dev

Build and test

Build the package:

pnpm run build

Then test it on the playground (root folder):

pnpm run play # at root