Links

Use WuiVue's custom wui-link component for generating a standard <a> link or <router-link>. <wui-link> supports the disabled state and click event propagation.

<wui-link> is the building block for most WuiVue components that offer link functionality.

<div>
  <wui-link href="#foo">Link</wui-link>
</div>

<!-- wui-link.vue -->

Link type

By specifying a value in the href prop, a standard link (<a>) element will be rendered. To generate a <router-link> instead, specify the route location via the to prop.

Router links support various additional props. Refer to the Router support reference section for details.

If your app is running under Nuxt.js, the <nuxt-link> component will be used instead of <router-link>. The <nuxt-link> component supports all the same features as <router-link> (as it is a wrapper component for <router-link>) and more.

Third party router links

WuiVue auto detects using <router-link> and <nuxt-link> link components. Some 3rd party frameworks also provide customized versions of <router-link>, such as Gridsome's <g-link> component. <wui-link> can support these third party <router-link> compatible components via the use of the router-component-name prop. All vue-router props (excluding <nuxt-link> specific props) will be passed to the specified router link component.

Note that the 3rd party component will only be used when the to prop is set.

Links with href="#"

Typically <a href="#"> will cause the document to scroll to the top of page when clicked. <wui-link> addresses this by preventing the default action (scroll to top) when href is set to #.

If you need scroll to top behaviour, use a standard <a href="#">...</a> tag.

Link disabled state

Disable link functionality by setting the disabled prop to true.

<div>
  <wui-link href="#foo" disabled>Disabled Link</wui-link>
</div>

<!-- wui-link-disabled.vue -->

Disabling a link will set the WUI .disabled class on the link as well as handles stopping event propagation, preventing the default action from occurring, and removing the link from the document tab sequence (tabindex="-1").

Note: WUI CSS currently does not style disabled links differently than non-disabled links. You can use the following custom CSS to style disabled links (by preventing hover style changes):

a.disabled {
  pointer-events: none;
}

Not all browsers support pointer-events: none;.