# 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](/en/guide/react) 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

```vue
<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:

```bash
pnpm add '@quirekit/incremark@workspace:*' '@quirekit/ui@workspace:*' '@quirekit/unocss-preset@workspace:*' vue@^3.5.0 @ark-ui/vue@5.39.1
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:

```ts
import { defineQuireKitUnoConfig } from '@quirekit/unocss-preset'
export default defineQuireKitUnoConfig()
```

Register Vue and UnoCSS in Vite:

```ts
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.

### reading/basic.vue

```vue
<script setup lang="ts">
import { computed } from "vue";
import { QuireMarkdown } from "@quirekit/incremark/vue";
import "@quirekit/incremark/styles.css";
import type { ExampleLocale } from "../shared/types";
const props = withDefaults(defineProps<{ /** Tutorial language. */ locale?: ExampleLocale }>(), { locale: "zh-CN" });
const source = computed(() => props.locale === "zh-CN" ? "## 你好，Markdown\n\n正文支持 **强调**、`代码` 和[链接](https://example.com)。"
  : "## Hello, Markdown\n\nRender **emphasis**, `code` and [links](https://example.com).");
</script>
<template><div class="p-qk-surface"><QuireMarkdown :content="source" :locale="locale" /></div></template>

```

### shared/types.ts

```ts
/** Example host language; independent of the documentation router. */
export type ExampleLocale = "zh-CN" | "en";

```

Next: [streaming](/en/guide/streaming), [syntax support](/en/guide/syntax) and [Playground](/en/playground).