Nuxt.jsのありがちな詰みパターンに対応した汎用性のあるlink用コンポーネント

~/components/atoms/Link/index.vue

<template lang="pug">
.a-link(v-bind="bind")
  slot
</template>

<script>
export default {
  props: {
    to: {
      type: String,
      required: true
    },
    isNuxtLink: {
      type: Boolean,
      default: false
    },
    isBlank: {
      type: Boolean,
      default: false
    },
    isInline: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    bind() {
      return {
        is: this.isNuxtLink ? 'nuxt-link' : 'a',
        to: this.isNuxtLink ? this.to : false,
        href: this.to,
        target: this.isBlank ? '_blank' : false,
        class: [{'is-inline': this.isInline}]
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.a-link
  display block

  &.is-inline
    display inline
</style>

使い方

<template lang="pug">
Link(to="/text/" isNuxtLink isBlank isInline @mouseenter.native="assignTrueToHover" @mouseleave.native="assignFalseToHover") text
</template>

<script>
import Link from '~/components/atoms/Link/index.vue'

export default {
  components: {
    Link
  },
  data: () => ({
    hover: false
  }),
  methods: {
    assignTrueToHover() {
      this.hover = true
    },
    assignFalseToHover() {
      this.hover = false
    }
  }
}
</script>