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>
  • $sbutils.tag() becomes <a></a>
  • $sbutils.linkTo() becomes href="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() becomes to="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.