Nuxt.js/Vue.js Bootstrap navigation generator

Navigator.vue

<!--
How to use:

<navigator :data="[
  {
    type: 'link',
    link: URL, // required
    label: String, // required
    icon: BootstrapIcon, // optional, https://bootstrap-vue.org/docs/icons
    external: Boolean, // optional, <a> if external, else <nuxt-link>
    exact: Boolean, // optional, <nuxt-link exact>
  },
  {
    type: 'heading',
    label: String, // required
    button: { // optional
      icon: BootstrapIcon, // required, https://bootstrap-vue.org/docs/icons
      link: URL, // required
    },
  },
]">
-->

<template>
  <ul class="nav flex-column">
    <template v-for="(item, index) in data">
      <li v-if="item.type === 'link'" :key="index" class="nav-item">
        <component
          :is="!item.external ? 'nuxt-link' : 'a'"
          v-if="item.link"
          class="nav-link"
          active-class="active"
          exact-active-class="active"
          :exact="item.exact"
          :target="item.target"
          v-bind="{
              to: !item.external ? item.link : undefined,
              href: item.link,
            }"
        >
          <component :is="item.icon" v-if="item.icon" class="mr-1" />
          {{ item.label }}
        </component>
      </li>
      <h6
        v-else-if="item.type === 'heading'"
        :key="index"
        class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted"
      >
        <span>{{ item.label }}</span>
        <template v-if="item.button && item.button.link">
          <component
            :is="!item.button.external ? 'nuxt-link' : 'a'"
            v-if="item.button"
            class="d-flex align-items-center text-muted"
            active-class="active"
            exact-active-class="active"
            :exact="item.button.exact"
            :target="item.button.target"
            v-bind="{
                to: !item.button.external ? item.button.link : undefined,
                href: item.button.link,
              }"
          >
            <component
              :is="item.button.icon"
              v-if="item.button.icon"
              font-scale="1.3"
            ></component>
          </component>
        </template>
      </h6>
    </template>
  </ul>
</template>

<script>
export default {
  name: 'Navigator',
  props: {
    data: {
      type: Array,
      default() {
        return []
      },
    },
  },
}
</script>