Quick start
Render your first Markdown in Vue and understand source, themes and persistence.
Display Markdown in a Vue page by passing a source string to QuireMarkdown. It renders headings, paragraphs and formatting. Persist the source rather than the generated HTML.
The reader comes from @quirekit/incremark/vue. See the React guide for React, or use @quirekit/incremark-core for parsing without an interface. The API is experimental; workspace installation is explained below.
1. Pass Markdown content
<script setup lang="ts">
import { QuireMarkdown } from '@quirekit/incremark/vue'
import '@quirekit/incremark/styles.css'
</script>
<template><QuireMarkdown :content="'# Hello\n\n**Markdown**'" /></template>
content is the Markdown to display; changing it updates the reader. This input produces a heading and bold text. Prepare full styling in the next step.
Defaults include GFM, footnotes, math, containers,
definition lists, frontmatter and inline extras. options.preset: false retains core GFM
and explicit extensions. Avoid installing duplicate owners when adding or replacing features.
2. Install and prepare styles
The package is not yet published to npm. These commands target a Vue application inside an existing QuireKit workspace:
pnpm add '@quirekit/incremark@workspace:*' '@quirekit/ui@workspace:*' '@quirekit/unocss-preset@workspace:*' vue@^3.5.0 @ark-ui/[email protected]
pnpm add -D unocss @vitejs/plugin-vue vite typescript
Use the component preset in uno.config.ts; it includes the prose and component style manifest:
import { defineQuireKitUnoConfig } from '@quirekit/unocss-preset'
export default defineQuireKitUnoConfig()
Register Vue and UnoCSS in Vite:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import UnoCSS from 'unocss/vite'
export default defineConfig({ plugins: [vue(), UnoCSS()] })
Import both virtual:uno.css and @quirekit/incremark/styles.css in the application entry. The latter supplies reading styles such as math; it does not replace component styles.
Set data-qk-theme="precision" data-qk-scheme="light" on the HTML root consistently on server and client.
Existing QuireKit applications keep their theme. Use QuireThemeProvider for local themes and
QuireIconProvider with quireIconRegistry for interactive icons.
3. See the result
This site supplies theme and icons. reading/basic.vue contains the source and reader component; shared/types.ts only defines the example locale. Start with the component, then add streaming or custom rendering as needed.
Next: streaming, syntax support and Playground.