What is Baleada SPA Links?

Updated on August 22, 2024Source code

Baleada SPA Links is a Markdown-it plugin that replaces the default link markup with the correct routing component for your single-page application.

For example, if you're using Nuxt, you can write the following Markdown:

[My other page](/my-other-page)

And Baleada SPA Links will render this:

<p><RouterLink to="/my-other-page">My other page</RouterLink></p>

The plugin supports link components for the following tools:

Installation

You can install Baleada SPA Links from NPM.

npm i @baleada/markdown-it-spa-links

Usage

To get started, import the plugin from the entry file of @baleada/spa-links, and create a Markdown-it instance.

import MarkdownItSpaLinks from '@baleada/spa-links'
import MarkdownIt from 'markdown-it'

const md = new MarkdownIt()

Use the use method of your Markdown-it instance to register the plugin. Pass the plugin as the first argument, and for the second argument, you can pass a configuration object. That object can have two properties:

Property

Type

Required

Default

Value description

spa

String

yes

none

Indicates which tool you are using to build your SPA, so that the plugin can identify the correct link component.

See the Link components by tool reference table to see valid values for the spa option and which link components get rendered.

base

String

none

Passes the base URL of your site to help the plugin identify links within the site.

If base is not passed, the plugin will only use link components for URLs that start with /.

For example, here's how you would configure the plugin to work with Nuxt:

import MarkdownItSpaLinks from '@baleada/spa-links'
import MarkdownIt from 'markdown-it'

const md = new MarkdownIt()

md.use(MarkdownItSpaLinks, { spa: 'nuxt' })

And here's how you would pass the optional base URL:

import MarkdownItSpaLinks from '@baleada/spa-links'
import MarkdownIt from 'markdown-it'

const md = new MarkdownIt()

md.use(MarkdownItSpaLinks, { spa: 'nuxt', base: 'https://example.com' })