Nuxt Typography

A Nuxt theme to get a beautiful and customisable typography with a set of prose components for Nuxt Content.

Nuxt Typography

Repository is on GitHub: nuxt-themes/typography

Installation

npm

npm install --save-dev @nuxt-themes/typography

Usage

Add it to the nuxt.config:

nuxt.config.ts

export default defineNuxtConfig({
  extends: '@nuxt-themes/typography'
})

Configuration

You can change the whole appearance of Prose components via tokens.config.ts file.

You can check out all the available keys by looking at the source of this file.

Tokens are divided between two keys:

typography rules general style tokens reused in the other category
prose rules per-component style tokens, that feeds from typography

Editing typography is more suited if you want to modify or adapt the general appearance of your typography.

Editing prose is more suited if you want to modify or adapt the appearance of a specific prose component.

Configuration example

tokens.config.ts

import { defineTheme } from 'pinceau'

export default defineTheme({
  typography: {
    // This will change the general line-break size
    letterSpacings: {
      tight: '-0.035em',
      wide: '0.035em'
    },
  },
  prose: {
    // This will change the fontSize of the `<ProseH1>` component
    h1: {
      fontSize: '{typography.2xl.fontSize}'
    }
  }
})

Icons

To customize the icons used in Nuxt Typography, use the prose property in your app.config.ts:

app.config.ts

export default defineAppConfig({
  prose: {
    // Default icon for all headings on hover
    headings: {
      icon: 'ph:anchor'
    },
    // Icon used for h1 headings
    h1: {
      icon: 'ph:link'
    },
    // Remove icon on h2 headings
    h2: {
      icon: false
    },
    // Icon used for the copy button on code blocks
    copyButton: {
      iconCopy: 'ph:copy',
      iconCopied: 'ph:check'
    }
  }
})

Note that under the hood, Nuxt Typography uses nuxt-icon, this mean that you can use a custom component name or any name coming from icones.js.org.

Prose Components

Nuxt Typography expose a set of prose components that work seamlessly with Nuxt Content.

To overwrite a prose component, create a component with the same name in your project components/content/ directory (ex: components/content/ProseA.vue).

`<ProseA>`

Code

[Link](/api/components/prose)

Link

`<ProseBlockquote>`

Code

> Block quote

Block quote

`<ProseCode>`

Code

\```javascript
export default () => {
  console.log('Code block')
}
\```

export default () => {
  console.log('Code block')
}

Check out the highlight options for more about the syntax highlighting.

`<ProseCodeInline>`

Code

`code inline`.

`const codeInline: string = 'highlighted code inline'`{lang="ts"}

code inline.

const codeInline: string = 'highlighted code inline'

`<ProseH1>`

H1 Heading

Code

# H1 Heading

`<ProseH2>`

Code

## H2 Heading

H2 Heading

`<ProseH3>`

Code

### H3 Heading

H3 Heading

`<ProseH4>`

Code

#### H4 Heading

H4 Heading

`<ProseH5>`

Code

##### H5 Heading

H5 Heading

`<ProseH6>`

Code

###### H6 Heading

H6 Heading

`<ProseHr>`

Code

---

`<ProseImg>`

Code

![A Cool Image](/preview.jpg)

A Cool Image

`<ProseUl>`

Code

- Just
- An
- Unordered
- List

Just
An
Unordered
List

It also include the <ProseLi> component.

`<ProseOl>`

Code

1. Foo
2. Bar
3. Baz

It also include the <ProseLi> component.

`<ProseP>`

Code

Just a paragraph.

Just a paragraph.

`<ProseStrong>`

Code

**Just a strong paragraph.**

Just a strong paragraph.

`<ProseEm>`

Code

_Just an italic paragraph._

Just an italic paragraph.

`<ProseTable>`

Code

| Key | Type | Description |
|-----|------| ------------|
| 1 | Wonderful | Table with `some long code snippet example` |
| 2 | Wonderful | Data |
| 3 | Wonderful | Website |

Key	Type	Description
1	Wonderful	Table with `some long code snippet example`
2	Wonderful	Data
3	Wonderful	Website

It also includes:

<ProseTbody>
<ProseTd>
<ProseTh>
<ProseThead>
<ProseTr>