# Installation

> Nuxt module or Vue plugin.

## Install

```bash
bun add @humanonlyweb/writer
```

## Nuxt

The components are auto-imported, `core.css` is added, and every component in `components/blocks/` becomes a block.

```ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ["@humanonlyweb/writer/nuxt"],
  writer: {
    blocks: "blocks", // folder in components/; false for none
    components: { a: "NuxtLink" }, // render native elements with your components
    css: true, // inject core.css
    parser: { highlight: true }, // see Parsing
  },
});
```

On the server, `parseWriterDocument`, `writerParserVersion` and `countWords` are auto-imported.

## Vue

```ts
import { createWriter } from "@humanonlyweb/writer";
import "@humanonlyweb/writer/core.css";

createApp(App)
  .use(createWriter({ blocks: { callout: Callout }, components: { a: RouterLink } }))
  .mount("#app");
```

| Option         | What it does                                                                                       |
| -------------- | -------------------------------------------------------------------------------------------------- |
| `blocks`       | Components authors can use, by Markdown name: `{ callout }` is `::callout`. See [Blocks](/blocks). |
| `components`   | Native elements to render with your components, e.g. `{ a: RouterLink, img: AppImage }`.           |
| `parser`       | [Parser options](/parsing) for Markdown parsed in the browser.                                     |
| `translations` | The built-in text. See [Localisation](/localisation).                                              |

`useWriterConfig()` reads the config in your own components, and `WRITER_CONFIG_KEY` provides one yourself.

## Use it

```vue
<script setup lang="ts">
const body = ref("");
const editor = useTemplateRef("editor");
</script>

<template>
  <WriterToolbar :editor="editor" />
  <WriterEditor ref="editor" v-model="body" label="Post body" />
  <WriterContent :value="body" />
</template>
```

In plain Vue, import `WriterEditor`, `WriterToolbar` and `WriterContent` from `@humanonlyweb/writer`.

## AI agents

The package ships these docs as Markdown, matching the installed version. Point your agent at them in `AGENTS.md` or `CLAUDE.md`:

```md
For @humanonlyweb/writer, read node_modules/@humanonlyweb/writer/dist/docs/README.md
before using it. It indexes a page per topic: components, parsing, storing documents.
```