docs: add devtools v3 compatibility note

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.

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))

packages/pinia/src/devtools/plugin.ts

@@ -52,6 +52,15 @@ interface TimelineEvent<TData = any, TMeta = any> {
  */
 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',