spa-link

@heavyy/nuxt-spa-link

SPA Link component for Nuxt 3

This module provides an easy way to work with internal and external links in Nuxt 3.

Installation

# yarn
yarn add @heavyy/nuxt-spa-link

# npm
npm install @heavyy/nuxt-spa-link

Add @heavyy/nuxt-spa-link to the modules section of your nuxt.config.js.

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
    modules: ['@heavyy/nuxt-spa-link'],
    spalink: {
      basePath: '/' // (default) that base path to strip from internal links.
      cdn: '' // (default) the fully qualified domain (including https://) for the media files.
    }
})

Use in template

<template>
  <div class="app">
    <SpaLink link="/my/subpage">Subpage</SpaLink>
  </div>
</template>

The link property

The link property accepts value formats. Either a string containing the path or full url or an object referencing this template:

interface SpaLinkProperty {
  url: string | Record<'url', string>
}

Example

<template>
  <SpaLink link="/internal-link">Internal Link</SpaLink>
  <SpaLink link="https://example.com">External Link</SpaLink>
  <SpaLink :link="{ url: '/internal-link' }">Link with object property</SpaLink>
  <SpaLink :link="{ url: { url: '/internal-link' } }">Link with object property</SpaLink>
</template>