<template>
  <a class="noStyle" :href="to" v-if="isExternal(to)" target="_blank"><slot></slot></a>
  <router-link class="noStyle" :to="{ name: to }" v-else><slot></slot></router-link>
</template>

<script>
export default {
  name: 'menu-link',
  props: [
    'to',
  ],
  methods: {
    isExternal(path) {
      return /^(https?:|mailto:|tel:)/.test(path)
    }
  }
}
</script>

<style lang="scss" scoped>
.noStyle {
  text-decoration: none;
}
</style>

