fix(devtools): load Vue devtools lazily (#4946)

* fix: load devtools lazily closes #4943 * fix: lazy load the devtools dep to force it out of production bundle
logaretm · Nov 20, 2024 · 30281f5 · 30281f5
1 parent 14122af
commit 30281f5
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/.changeset/polite-spoons-swim.md b/.changeset/polite-spoons-swim.md
@@ -0,0 +1,5 @@
+---
+"vee-validate": patch
+---
+
+fix: lazy load the devtools dep to force it out of production bundle
diff --git a/packages/vee-validate/src/devtools.ts b/packages/vee-validate/src/devtools.ts
@@ -1,5 +1,4 @@
 import { App, ComponentInternalInstance, getCurrentInstance, nextTick, onUnmounted, toValue, unref } from 'vue';
-import { setupDevtoolsPlugin } from '@vue/devtools-api';
 import type { InspectorNodeTag, CustomInspectorState, CustomInspectorNode } from '@vue/devtools-kit';
 import { PathState, PrivateFieldContext, PrivateFormContext } from './types';
 import { keysOf, setInPath, throttle } from './utils';
@@ -33,9 +32,10 @@ let SELECTED_NODE:
  */
 let API: any;
 
-function installDevtoolsPlugin(app: App) {
+async function installDevtoolsPlugin(app: App) {
   if (__DEV__) {
-    setupDevtoolsPlugin(
+    const devtools = await import('@vue/devtools-api');
+    devtools.setupDevtoolsPlugin(
       {
         id: 'vee-validate-devtools-plugin',
         label: 'VeeValidate Plugin',