Links
Overview
Sbutils can be used to get a link from Storyblok. It works for both internal links and external ones.
When you use $sbutils it will check if it comes from a story which makes it a <NuxtLink to=""></NuxtLink>
or else it will become <a href=""></a>
.
Examples
In most use cases
<component
:is="$sbutils.tag(button)"
v-bind="$sbutils.linkTo(button)"
>
{{ $sbutils.label(button) }}
</component>
The result in case of external link
$sbutils.tag()
becomes<a></a>
$sbutils.linkTo()
becomeshref="url"
$sbutils.label()
becomes the label or name you gave the button
The result in case of internal story
$sbutils.tag()
becomes<NuxtLink></NuxtLink>
$sbutils.linkTo()
becomesto="story"
$sbutils.label()
becomes the label or name you gave the button
Exception
In some cases linktype
is not nested in a link
prop and you will have to write it the way shown below.
<component
:is="$sbutils.getSliderItemLinkType(reference)"
v-bind="$sbutils.getSliderItemLink(reference)"
>
{{ $sbutils.label(button) }}
</component>
The result will be the same as mentioned in the previous example.
Truncate text
If the label is not fitting its container you can truncate the text by using truncate.
Arguments to pass to truncate:
- label
- preferred length (if not given, the default is 80)
<component
:is="$sbutils.tag(button)"
v-bind="$sbutils.linkTo(button)"
>
{{ $sbutils.truncate(link.label, 15) }}
</component>
Component Api
$sbutils
Props
Prop | Default | Type |
`tag` |
`span` |
`String`
Use
<a>, <span> or <nuxt-link> |
`linkTo` |
`null` |
`String | Object`
|
`label` |
`undefined on storyblok` |
`String`
|
`getSliderItemLinkType` |
`span` |
`String`
Use
<a>, <span> or <nuxt-link> |
`getSliderItemLink` |
`null` |
`String | Object`
|
`truncate` |
`'', 80` |
`String`
It returns the text truncated to the length you prefer.
|