humanonlyweb/writer

Installation

Nuxt module or Vue plugin.

Markdown

Install

bun add @humanonlyweb/writer
Copy code

Nuxt

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

// 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
  },
});
Copy code

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

Vue

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

createApp(App)
  .use(createWriter({ blocks: { callout: Callout }, components: { a: RouterLink } }))
  .mount("#app");
Copy code
OptionWhat it does
blocksComponents authors can use, by Markdown name: { callout } is ::callout. See Blocks.
componentsNative elements to render with your components, e.g. { a: RouterLink, img: AppImage }.
parserParser options for Markdown parsed in the browser.
translationsThe built-in text. See Localisation.

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

Use it

<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>
Copy code

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:

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.
Copy code