Nueva Handbook

# BaseLink

The BaseLink evaluates if the link is interal link.linktype === "story" or external link.linktype === "url". Becomes either:

  • Internal link: <nuxt-link :to="">
  • External: <a href="" target="_blank" rel="noopener">

Example

TODO

Storyblok

This component exists in Storyblok too.

blok: {
  // required
  link: {
    id: '',
    url: '',
    fieldtype: 'multilink',
    linktype: 'story' // story | url
    cached_url: ''
  },
  // required
  label: ''
}
1
2
3
4
5
6
7
8
9
10
11
12

# Dependencies

This component uses a filter and a standard Nuxt component.

# Filter

  • absolutPath.filter.js: For links with linktype: story Storyblok only returns the slug (e.g. blog), the filter makes sure that we always use the absolute path /blog and don't end up with something like this contact/blog.

# Components

  • nuxt-link

# Required by

# Props

Name Type Required Default Description
link Object true - Storyblok multilink field
label String true -

# Variants

  • External (default): .c-base-link--external, will be set if link.linktype !== "story".

# Example

Good

<!-- Manually defined internal link -->
<BaseLink
  :link="{
    linktype: 'story',
    cached_url: 'impressum'
  }"
  label="Impressum"
/>

<!-- Manually defined internal link -->
<BaseLink
  :link="{
    linktype: 'url',
    cached_url: 'https://nueva.ch'
  }"
  label="nueva"
/>

<!-- Pass data from an object -->
<BaseLink :link="blok.link" :label="blok.label" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Bad

<!-- BaseLink does not have a slot, please use the props. -->
<BaseLink href="https://www.nueva.ch">nueva</BaseLink>
1
2

# TODO

  • Icon for external link