diff --git a/code/renderers/vue/src/render.ts b/code/renderers/vue/src/render.ts index 22fec5d8bdbf..060a7e0f4e37 100644 --- a/code/renderers/vue/src/render.ts +++ b/code/renderers/vue/src/render.ts @@ -9,7 +9,7 @@ import type { VueFramework } from './types'; export const COMPONENT = 'STORYBOOK_COMPONENT'; export const VALUES = 'STORYBOOK_VALUES'; -const map = new Map(); +const map = new Map(); type Instance = CombinedVueInstance< Vue, { @@ -21,11 +21,16 @@ type Instance = CombinedVueInstance< Record, unknown >; -const getRoot = (domElement: Element): Instance => { +const getRoot = (domElement: Element): [Instance, Element] => { if (map.has(domElement)) { return map.get(domElement); } + // Create a dummy "target" underneath #storybook-root + // that Vue2 will replace on first render with #storybook-vue-root + const target = document.createElement('div'); + domElement.appendChild(target); + const instance = new Vue({ beforeDestroy() { map.delete(domElement); @@ -37,13 +42,13 @@ const getRoot = (domElement: Element): Instance => { }; }, render(h) { - map.set(domElement, instance); + map.set(domElement, [instance, target]); const children = this[COMPONENT] ? [h(this[COMPONENT])] : undefined; - return h('div', { attrs: { id: 'storybook-root' } }, children); + return h('div', { attrs: { id: 'storybook-vue-root' } }, children); }, }); - return instance; + return [instance, target]; }; export const render: ArgsStoryFn = (props, context) => { @@ -92,7 +97,7 @@ export function renderToDOM( }: RenderContext, domElement: Element ) { - const root = getRoot(domElement); + const [root, target] = getRoot(domElement); Vue.config.errorHandler = showException; const element = storyFn(); @@ -116,7 +121,7 @@ export function renderToDOM( root[VALUES] = { ...element.options[VALUES], ...args }; if (!map.has(domElement)) { - root.$mount(domElement); + root.$mount(target); } showMain();