Add component to easily handle Storyblok's link fields (<StoryblokLink />)

[ZackPlauche]

Description

As a developer using Storyblok SDK I want a link component that easily handles all potential scenarios for the Storyblok link field so I don't re-write the same logic and have a faster experience developing with Storyblok and converting my components to work properly :)

Suggested solution or improvement

I'd like to add a built-in Storyblok component called StoryblokLink that handles all of the different situations from the Storyblok link field.

Something like:

<!-- components/StoryblokLink.vue -->
<template>
  <NuxtLink :to="linkMap[linkField.linktype]" :target="linkField.target" :download="linkField.linktype === 'asset' ? '' : null">
    <slot />
  </NuxtLink>
</template>

<script setup>
const { linkField } = defineProps({ linkField: Object })

const linkMap = {
  url: linkField.url,
  asset: linkField.url,
  email: `mailto:${linkField.email}`,
  story: linkField.story?.url,
}
</script>

Usage:

<template>
  <div>
    <StoryblokLink  link-field="blok.my_link" class="btn">Click me!</StoryblokLink>
  </div>
</template>

<script setup>
defineProps({ blok: Object })
</script>

<style>
.btn {
  @apply whitespace-nowrap inline-flex justify-center items-center px-5 py-2 rounded bg-cyan-500 hover:bg-cyan-400 transition-colors;
}
</style>

Additional context

No response

Validations

• Follow our Code of Conduct

[markus-gx]

Interesting. We do work with such a component. In our codebase it is called StoryblokLink too.

Some suggestions to make this work which definitely should be considered:

• External Links: if a link is marked as external, the component should render as anchor <NuxtLink :external="true"/> the link is "External" too when it starts with e.g mailto:; tel:
• Multilanguage: Since this component should probably support Multilingual Content and anchors we need some sort of logic here. For multilingual content it is important that the parameter resolve_links: 'url' is set. This passes the full story object to a potential link where the translated slug can be inside. (Full_slug <= should contain the correct link if the lang parameter has been passed to Storyblok)
• Home Path: The curious "home" path. Mostly all websites don't have a "home" path. We tend to replace it by the root, just a plain /. This should be optional I guess in this component. So all links which are /home should be able to be replaced by just a /. That's to ensure no duplicated URLs (Duplicated Content) are created and we don't need to handle canonical tags.
• SEO: Speaking of SEO and canonicals. Should the links end with a trailing slash or not? If so, this needs to be managed and compliant with anchor tags.
• Developer Experience: For more DX I'd prefer to have a composable, something like useStoryblokLinkConstructor / useStoryblokLinkResolver() which outputs the link needed to render in a NuxtLink. This is pretty useful when resolving something on demand or when creating custom Javascript code to either download something or similar.

[alvarosabu]

Hi, @ZackPlauche @markus-gx we are actually considering internally adding this cross-SDK, I personally also have a local component of this nature like Markus.

Thanks for the feature request

[ZackPlauche]

Hi, @ZackPlauche @markus-gx we are actually considering internally adding this cross-SDK, I personally also have a local component of this nature like Markus.

Thanks for the feature request

Great :D