diff --git a/packages/docs/cookbook/migration-v2-v3.md b/packages/docs/cookbook/migration-v2-v3.md index 3f244874b6..d9177a1ace 100644 --- a/packages/docs/cookbook/migration-v2-v3.md +++ b/packages/docs/cookbook/migration-v2-v3.md @@ -28,6 +28,9 @@ This deprecated type alias has been removed in favor of `PiniaPlugin`. - TypeScript 5 or newer is required. - The devtools API has been upgraded to [v7](https://devtools.vuejs.org). +> [!NOTE] +> To use Pinia with Devtools v6, use Pinia 2 + ## Nuxt The Nuxt module has been updated to support Nuxt 3. If you are using Nuxt 2 or Nuxt bridge, you can keep using the old version of Pinia. diff --git a/packages/pinia/CHANGELOG.md b/packages/pinia/CHANGELOG.md index 2338d3014f..5623d644d6 100644 --- a/packages/pinia/CHANGELOG.md +++ b/packages/pinia/CHANGELOG.md @@ -17,6 +17,9 @@ See the [migration guide](https://pinia.vuejs.org/cookbook/migration-v2-v3.html) - `defineStore({ id: 'id' })` is now removed. Use `defineStore('id')` instead - Pinia is now published as a `type: module` package but it still provides CJS versions dist files +> [!NOTE] +> Pinia >= 3.0.0 is only compatible with Vue Devtools v7. To use Pinia with Devtools v6, use Pinia 2 + ### Code Refactoring - remove deprecated aliases ([87c6182](https://github.com/vuejs/pinia/commit/87c6182c4bf61e1f96a4877eb884fd59cf824e1f)) diff --git a/packages/pinia/src/devtools/plugin.ts b/packages/pinia/src/devtools/plugin.ts index a46d284396..d9ebf652f0 100644 --- a/packages/pinia/src/devtools/plugin.ts +++ b/packages/pinia/src/devtools/plugin.ts @@ -52,6 +52,15 @@ interface TimelineEvent { */ const getStoreType = (id: string) => '🍍 ' + id +/** + * Check if Vue DevTools is legacy + */ +function isLegacyVueDevTools() { + return ( + +(globalThis.__VUE_DEVTOOLS_GLOBAL_HOOK__.devtoolsVersion?.[0] ?? 0) < 7 + ) +} + /** * Add the pinia plugin without any store. Allows displaying a Pinia plugin tab * as soon as it is added to the application. @@ -60,6 +69,12 @@ const getStoreType = (id: string) => '🍍 ' + id * @param pinia - pinia instance */ export function registerPiniaDevtools(app: App, pinia: Pinia) { + if (isLegacyVueDevTools()) { + toastMessage( + 'Pinia >= 3.0.0 is only compatible with Vue Devtools v7. To use Pinia with Devtools v6, use Pinia 2', + 'warn' + ) + } setupDevtoolsPlugin( { id: 'dev.esm.pinia',