From 30281f55092a1695d33c04f77bb281d346cbc9c6 Mon Sep 17 00:00:00 2001 From: Abdelrahman Awad Date: Wed, 20 Nov 2024 14:40:50 +0100 Subject: [PATCH] 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 --- .changeset/polite-spoons-swim.md | 5 +++++ packages/vee-validate/src/devtools.ts | 6 +++--- 2 files changed, 8 insertions(+), 3 deletions(-) create mode 100644 .changeset/polite-spoons-swim.md diff --git a/.changeset/polite-spoons-swim.md b/.changeset/polite-spoons-swim.md new file mode 100644 index 000000000..72a9bb1c4 --- /dev/null +++ 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 index 368607f0b..e9a4ca9b2 100644 --- 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',