smart-link

@lihbr/utils-nuxt.smart-link provides a generic link component to stop choosing between anchor tag or nuxt-link.

Features

Installation

Add @lihbr/utils-nuxt.smart-link dependency to your project:

Usage

Import @lihbr/utils-nuxt.smart-link into your components:

~/components/display/Card.vue

<script>
import SmartLink from "@lihbr/utils-nuxt.smart-link";

export default {
  components: {
    SmartLink
  }
};
</script>

Or register it globally through a Nuxt.js plugin (do not forget to register the plugin inside your nuxt.config.js file):

~/plugins/smart-link.js

import Vue from "vue";
import SmartLink from "@lihbr/utils-nuxt.smart-link";

Vue.component("smart-link", SmartLink);

You can now use it in your Vue.js templates:

~/components/display/Card.vue

<template>
  <!-- Will use an anchor tag -->
  <smart-link href="https://example.com"><!-- ... --></smart-link>

  <!-- Will use Nuxt.js link component -->
  <smart-link href="/about"><!-- ... --></smart-link>

  <!-- Will use an anchor tag and open in a new page -->
  <smart-link href="/references" blank><!-- ... --></smart-link>

  <!-- Force an anchor tag usage -->
  <smart-link href="/media/nuxt3-release-date.pdf" external><!-- ... --></smart-link>

  <!-- Will use an anchor tag -->
  <smart-link href="mailto:hello@lihbr.com"><!-- ... --></smart-link>
</template>

Reference

Props

href

Type: String
Default: ""

Link href.

component options

<smart-link href="https://example.com"><!-- ... --></smart-link>

blank

Type: Boolean
Default: false

Opens link in a new page, even if internal.

component options

<smart-link blank><!-- ... --></smart-link>

external

Type: Boolean
Default: false

Force link to be considered as an external link using anchor tag.

component options

<smart-link external><!-- ... --></smart-link>

internal

Type: Boolean
Default: false

Force link to be considered as an internal link using Nuxt.js link component.

component options

<smart-link internal><!-- ... --></smart-link>

Props Defaults

component props

{
  href: "",
  blank: false,
  external: false,
  internal: false
}

smart-link

Table of Contents