Links in visual edit mode (nuxt)

Questions
#1

Hello everyone,

I have a problem with links with the visual editor:

  • for my editors, when they are editing a teaser on a website which is linked, I want them to be able to click the teaser and start editing the content. However as the the teaser has an actual nuxt-link, when they click the browser navigates away, which is not helpful at all.
  • as a developer, I still want to make sure the link works correct in the preview mode

What I tried:

  • Checking for query parameter _storyblok and disable links. This works, but it has the disadvantage that in the preview the links also won’t work
  • Trying out pingEditor and isInEditor but this doesnt seem to work with nuxt and $storybridge or $storyapi. There is a $storybridge.proxy.inEditor but this seems to be not available on the server side?
#2

Hi, you could try one of these two options:

  1. Disable it using the pointer-events - https://css-tricks.com/almanac/properties/p/pointer-events/
    Basically you could enhance the class storyblok-outline that each nested anchor link will be disabled with pointer-events: none - but this require to have wrapper for nuxt-link

  2. You should be able to disable the nuxt-link as is shown in this stack overflow thread - https://stackoverflow.com/questions/55292592/disable-nuxt-link-based-on-boolean - you could check if there is a storyblok-outline class on the nuxt-link and in that case you will disable the link.

#3

Hey thanks for your quick reply.

I indeed ended up creating a linkhelper component which checks if there’s a storyblok query and then disabling the nuxtlink

1 Like