🐛 [Bug]: Visual editor edit hover box not displayed for pages which contains references

[Fl0r14n]

Package

@storyblok/vue (Vue Integration)

Bug Description

Though the page is displayed in visual editor, the element information hover box is not displayed, if the page contains a blok which has a reference element

Steps to Reproduce

1: Create a global folder (used for fragments like menu)
2: Create a "block" or whatever as universal block with some content property of type Blocks
3: Create a "page" like in demo of content type with some body or content property of type Blocks
4: In global create a menu story for example, with a "block" that contains a "paragraph"
5: In root create a home story with a page block what contains a "layout" block with menu as a property of type reference which points to the menu and some Hello world in another property like content

For project the default template for storyblok and vue shoud suffice adding the missing bloks as components

Expected Behavior

Home story should be editable in visual mode.

Actual Behavior

• When going to global/menu all good in edit mode, the edit boxes appear
• When going to the home story, which contains the global menu and some Hello world text, the page is rendered but WITHOUT edit boxes

PS. does not make any difference if fetching the references (the menu) early in the call or let's call it the reference.vue component will fetch it by uuid if the reference is a string or object.
That is to say, with or without "resolve_relations: 'layout.navigation'" (assuming the layout component content a property called navigation which is a refference that points to the menu) does not influence visual editor in working properly or not.

Tried it both ways, no hover boxes in editor mode

Code Sample

CMS Preview


<template>
  <StoryblokComponent :blok="story.content" v-if="story?.id" class="preview" />
</template>
<script lang="ts" setup>
  import { useStoryblok } from '@storyblok/vue'
  import { useRoute } from 'vue-router'
  const route = useRoute()
  const language = 'en'
  language.value = (route.meta.language as string) || language.value
  const slug = ((typeof route.meta.resolveSlug === 'function' && route.meta.resolveSlug(route)) ||
    route.meta.slug ||
    route.params.slug) as string
  const story = await useStoryblok(slug, {
    version: 'draft', // only draft in preview mode
    language
    // resolve_relations: 'layout.navigation'
  })
</script>

Page.vue

<template>
  <div v-editable="blok">
    <StoryblokComponent v-for="b in blok?.body" :key="b._uid" :blok="b" :class="blok?.class" :style="blok?.style" />
  </div>
</template>
<script lang="ts" setup>
  defineProps({ blok: Object })
</script>

Block.vue

<template>
  <div :class="blok?.class" :style="blok?.style" v-editable="blok">
    <StoryblokComponent v-for="b in blok?.content" :blok="b" :key="b._uid">
      <slot />
    </StoryblokComponent>
  </div>
</template>
<script setup lang="ts">
  defineProps({ blok: Object })
</script>

Paragraph.vue

<template>
  <p :class="blok?.class" :style="blok?.style" v-editable="blok">
    {{ blok?.text }}
    <StoryblokComponent v-for="b in blok?.content" :blok="b" :key="b._uid" />
  </p>
</template>

<script setup lang="ts">
  defineProps({ blok: Object })
</script>

Reference.vue

<template>
  <StoryblokComponent :blok="content" v-if="content">
    <slot />
  </StoryblokComponent>
</template>
<script lang="ts" setup>
  import { useReferenceStore } from '@/cms'
  import type { ISbStoryData } from '@storyblok/vue'
  import { computed, ref, watch } from 'vue'

  const { blok } = defineProps<{ blok: any | string }>()

  const { getReference } = useReferenceStore()
  const reference = ref<ISbStoryData>()
  const isReference = computed(() => typeof blok === 'string')
  const content = computed(() => reference.value?.content)

  watch(
    isReference,
    async isReference => {
      reference.value = (isReference && (await getReference(blok as any))) || blok
    },
    { immediate: true }
  )
</script>

Layout.vue

<template>
  <div v-editable="blok">
    <reference v-for="(b, i) in blok?.navigation" :blok="b" :key="i">
      <v-container class="h-100" fluid>
        <StoryblokComponent v-for="b in blok?.content" :blok="b" :key="b._uid" />
      </v-container>
    </reference>
  </div>
</template>
<script setup lang="ts">
  defineProps({ blok: Object })
</script>

Environment

System:
    OS: Linux 6.16 Garuda Linux
    CPU: (16) x64 AMD Ryzen 9 7940HS w/ Radeon 780M Graphics
    Memory: 13.77 GB / 30.55 GB
    Container: Yes
    Shell: 4.1.1 - /usr/bin/fish
  Binaries:
    Node: 24.9.0 - /usr/bin/node
    npm: 11.6.1 - /usr/bin/npm
    bun: 1.2.23 - /usr/bin/bun
  Browsers:
    Brave Browser: 141.1.83.109
  npmPackages:
    @storyblok/vue: ^9.3.2 => 9.3.2 
    vue: ^3.5.22 => 3.5.22

Error Logs

no error logs

Additional Context

No response

[maoberlehner]

Hey @Fl0r14n! Thank you for your report! Can you create a minimal reproduction repository, ideally including the component definitions (https://www.storyblok.com/docs/packages/storyblok-cli#example), so we can quickly get it up and running on our side to reproduce the issue? Thx!

[Fl0r14n]

Hi @maoberlehner here is the demo https://github.com/Fl0r14n/my-storyblok-demo . Feel free ro reach out if anything. Thx!