Nuxt Typography

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

Repository is on GitHub: nuxt-themes/typography

See also the online playground or using Tailwind Typograhy content.

Installation

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

Usage

Add it to the nuxt.config:

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

Configuration

You can configure the typography by creating a tokens.config.ts in your project:

import { defineTheme, palette } from 'pinceau'// Checkout all the properties to overwrite: https://github.com/nuxt-themes/prose/blob/main/tokens.config.tsexport default defineTheme({  colors: {    primary: palette('teal')  }})

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

\```javascriptexport 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.png)

A Cool Image

`<ProseUl>`

Code

- Just- An- Unordered- List

Just
An
Unordered
List

It also include the <ProseLi> component.

`<ProseOl>`

Code

1. Foo2. Bar3. 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 || 2 | Wonderful | Data || 3 | Wonderful | Website |

Key	Type	Description
1	Wonderful	Table
2	Wonderful	Data
3	Wonderful	Website

It also includes:

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