Cacher is the code snippet organizer for pro developers

<template>
  <nav class="breadcrumbs inline-flex" aria-label="Breadcrumb">
    <slot></slot>
  </nav>
</template>

<template>
  <span class="text-black p-0 flex items-center">
    <span v-if="to" class="hover:text-orange-900">
      <nuxt-link :to="to">
        <slot></slot>
      </nuxt-link>
    </span>
    <span v-else class="cursor-default font-bold">
      <slot></slot>
    </span>
    <span class="mx-2">
      <img v-if="to !== false" class="w-3 h-3" src="~/assets/svg/arrow-right-black.svg" />
    </span>
  </span>
</template>

<script>
export default {
  props: {
    to: {
      type: [ String, Boolean, Object ],
      required: false,
      default: false
    }
  }
};
</script>

<Breadcrumbs>
  <breadcrumbs-el to="/">首頁</breadcrumbs-el>
  <breadcrumbs-el>{{ $nuxt.$route.params.id }}</breadcrumbs-el>
</Breadcrumbs>