Kopteksten en tekst

Prachtig vormgegeven koppen, alinea

Koppen

Gebruik koppen om uw inhoud te ordenen en het leesbaarder te maken.

Koppen kunnen worden verpakt in een ankerlink wanneer ze een id hebben, met een hash-pictogram dat wordt weergegeven op hover voor H2 en H3 (op grote schermen), zodat lezers kunnen linken rechtstreeks naar een rubriek.

Ankerkoppelingen zijn standaard ingeschakeld voor H2 naar H4 bij gebruik van @nuxt/content, en anders uitgeschakeld, Comark inbegrepen. Gebruik de Theme component met de anchor prop om ze te wisselen voor een gedeelte van je app:

<template>
  <UTheme :props="{ prose: { h2: { anchor: true }, h3: { anchor: true }, h4: { anchor: true } } }">
    <!-- your rendered markdown -->
  </UTheme>
</template>

Bij gebruik van @nuxt/content zijn ankerkoppelingen standaard ingeschakeld voor H2, H3 en H4. Je kunt hun generation (bijvoorbeeld om ze uit te schakelen voor AI-chatinterfaces) en de toc generation in je nuxt.config.ts:

nuxt.config.ts

export default defineNuxtConfig({
  content: {
    renderer: {
      anchorLinks: false
    },
    build: {
      markdown: {
        toc: {
          depth: 3
        }
      }
    }
  }
})

Rubriek 1

Nuxt gebruikersinterface

# Nuxt UI

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      h1: {
        slots: {
          base: 'text-4xl text-highlighted font-bold mb-8 scroll-mt-[calc(45px+var(--ui-header-height))] lg:scroll-mt-(--ui-header-height)',
          link: 'inline-flex items-center gap-2'
        }
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          h1: {
            slots: {
              base: 'text-4xl text-highlighted font-bold mb-8 scroll-mt-[calc(45px+var(--ui-header-height))] lg:scroll-mt-(--ui-header-height)',
              link: 'inline-flex items-center gap-2'
            }
          }
        }
      }
    })
  ]
})

Rubriek 2

Wat is er nieuw in v4?

## What's new in v4?

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      h2: {
        slots: {
          base: [
            'relative text-2xl text-highlighted font-bold mt-12 mb-6 scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))] [&>a]:rounded-sm [&>a]:outline-primary/25 [&>a]:focus-visible:outline-3 [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-xl/7 [&>a>code]:font-bold',
            '[&>a>code]:transition-colors'
          ],
          leading: [
            'absolute -ms-8 top-1 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated group-hover:text-primary group-focus:text-primary rounded-md hidden lg:flex text-muted',
            'transition'
          ],
          leadingIcon: 'size-4 shrink-0',
          link: 'group lg:after:absolute lg:after:inset-y-0 lg:after:-inset-s-2 lg:after:w-2'
        }
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          h2: {
            slots: {
              base: [
                'relative text-2xl text-highlighted font-bold mt-12 mb-6 scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))] [&>a]:rounded-sm [&>a]:outline-primary/25 [&>a]:focus-visible:outline-3 [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-xl/7 [&>a>code]:font-bold',
                '[&>a>code]:transition-colors'
              ],
              leading: [
                'absolute -ms-8 top-1 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated group-hover:text-primary group-focus:text-primary rounded-md hidden lg:flex text-muted',
                'transition'
              ],
              leadingIcon: 'size-4 shrink-0',
              link: 'group lg:after:absolute lg:after:inset-y-0 lg:after:-inset-s-2 lg:after:w-2'
            }
          }
        }
      }
    })
  ]
})

Rubriek 3

Verbeterde componenten

### Enhanced components

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      h3: {
        slots: {
          base: [
            'relative text-xl text-highlighted font-bold mt-8 mb-3 scroll-mt-[calc(32px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(32px+var(--ui-header-height))] [&>a]:rounded-sm [&>a]:outline-primary/25 [&>a]:focus-visible:outline-3 [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-lg/6 [&>a>code]:font-bold',
            '[&>a>code]:transition-colors'
          ],
          leading: [
            'absolute -ms-8 top-0.5 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated group-hover:text-primary group-focus:text-primary rounded-md hidden lg:flex text-muted',
            'transition'
          ],
          leadingIcon: 'size-4 shrink-0',
          link: 'group lg:after:absolute lg:after:inset-y-0 lg:after:-inset-s-2 lg:after:w-2'
        }
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          h3: {
            slots: {
              base: [
                'relative text-xl text-highlighted font-bold mt-8 mb-3 scroll-mt-[calc(32px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(32px+var(--ui-header-height))] [&>a]:rounded-sm [&>a]:outline-primary/25 [&>a]:focus-visible:outline-3 [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-lg/6 [&>a>code]:font-bold',
                '[&>a>code]:transition-colors'
              ],
              leading: [
                'absolute -ms-8 top-0.5 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated group-hover:text-primary group-focus:text-primary rounded-md hidden lg:flex text-muted',
                'transition'
              ],
              leadingIcon: 'size-4 shrink-0',
              link: 'group lg:after:absolute lg:after:inset-y-0 lg:after:-inset-s-2 lg:after:w-2'
            }
          }
        }
      }
    })
  ]
})

Rubriek 4

Aan de slag

#### Getting started

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      h4: {
        slots: {
          base: 'text-lg text-highlighted font-bold mt-6 mb-2 scroll-mt-[calc(24px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(24px+var(--ui-header-height))] [&>a]:rounded-sm [&>a]:outline-primary/25 [&>a]:focus-visible:outline-3',
          link: ''
        }
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          h4: {
            slots: {
              base: 'text-lg text-highlighted font-bold mt-6 mb-2 scroll-mt-[calc(24px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(24px+var(--ui-header-height))] [&>a]:rounded-sm [&>a]:outline-primary/25 [&>a]:focus-visible:outline-3',
              link: ''
            }
          }
        }
      }
    })
  ]
})

Tekst opmaak

Structureer uw inhoud met duidelijke alinea 's en consistente tekstopmaak voor een betere leesbaarheid.

Alinea

Nuxt UI biedt een uitgebreide collectie Vue-componenten, composables en hulpprogramma 's voor het bouwen van moderne, toegankelijke applicaties met een consistent ontwerp en verbeterde gebruikerservaring.

Nuxt UI provides a comprehensive collection of Vue components, composables and utilities for building modern, accessible applications with consistent design and enhanced user experience.

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      p: {
        base: 'my-5 leading-7 text-pretty'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          p: {
            base: 'my-5 leading-7 text-pretty'
          }
        }
      }
    })
  ]
})

Sterk

Sterke tekst

**Strong text**

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      strong: {
        base: ''
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          strong: {
            base: ''
          }
        }
      }
    })
  ]
})

Nadruk

Benadrukte tekst *

*Emphasized text*

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      em: {
        base: ''
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          em: {
            base: ''
          }
        }
      }
    })
  ]
})

Links

Om een link te maken, wikkel je de linktekst tussen haakjes gevolgd door de URL tussen haakjes. W******oor zowel externe als interne links.

Nuxt documentation

[Nuxt documentation](https://nuxt.com)

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      a: {
        base: [
          'text-primary border-b border-transparent hover:border-primary font-medium rounded-xs outline-primary/25 focus-visible:outline-3 focus-visible:has-[>code]:outline-0 [&>code]:border-dashed [&>code]:outline-primary/25 focus-visible:[&>code]:outline-3 hover:[&>code]:border-primary hover:[&>code]:text-primary focus-visible:[&>code]:border-primary focus-visible:[&>code]:text-primary',
          'transition-colors [&>code]:transition-colors'
        ]
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          a: {
            base: [
              'text-primary border-b border-transparent hover:border-primary font-medium rounded-xs outline-primary/25 focus-visible:outline-3 focus-visible:has-[>code]:outline-0 [&>code]:border-dashed [&>code]:outline-primary/25 focus-visible:[&>code]:outline-3 hover:[&>code]:border-primary hover:[&>code]:text-primary focus-visible:[&>code]:border-primary focus-visible:[&>code]:text-primary',
              'transition-colors [&>code]:transition-colors'
            ]
          }
        }
      }
    })
  ]
})

Blockquotes

Gebruik blockquotes om belangrijke informatie of citaten te markeren.

Nuxt UI past zich automatisch aan uw thema-instellingen aan, wat zorgt voor consistente typografie in uw hele applicatie.

> Nuxt UI automatically adapts to your theme settings, ensuring consistent typography across your entire application.

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      blockquote: {
        base: 'border-s-4 border-accented ps-4 italic'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          blockquote: {
            base: 'border-s-4 border-accented ps-4 italic'
          }
        }
      }
    })
  ]
})

Horizontale regels

Gebruik horizontale regels om inhoudssecties visueel te scheiden.

---

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      hr: {
        base: 'border-t border-default my-12'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          hr: {
            base: 'border-t border-default my-12'
          }
        }
      }
    })
  ]
})

Introduction

Beautiful typography components and utilities to style your content with Nuxt UI.

Lists and tables

Organize information with styled lists and responsive tables for clear, consistent readability.