# novel-vue

> A Vue 3 component for the novel editor

Latest version **0.0.4** (published 2023-11-13) · 0 weekly downloads

## Install

```sh
npm install novel-vue
pnpm add novel-vue
yarn add novel-vue
bun add novel-vue
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2023-11-13 |
| First published | 2023-09-03 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 22 |
| Unpacked size | 1.4 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Naveen Naidu |
| Maintainers | naveennaidu |

## Links

- npm: https://www.npmjs.com/package/novel-vue
- npm.io page: https://npm.io/package/novel-vue

## Dependencies (22)

- [ai](https://npm.io/package/ai.md) ^2.2.11
- [vue](https://npm.io/package/vue.md) ^3.3.4
- [tippy.js](https://npm.io/package/tippy.js.md) ^6.3.7
- [@tiptap/pm](https://npm.io/package/@tiptap/pm.md) ^2.1.7
- [@vueuse/core](https://npm.io/package/@vueuse/core.md) ^10.4.1
- [@tiptap/vue-3](https://npm.io/package/@tiptap/vue-3.md) ^2.1.7
- [@headlessui/vue](https://npm.io/package/@headlessui/vue.md) ^1.7.16
- [lucide-vue-next](https://npm.io/package/lucide-vue-next.md) ^0.274.0
- [tiptap-markdown](https://npm.io/package/tiptap-markdown.md) ^0.8.2
- [@tiptap/suggestion](https://npm.io/package/@tiptap/suggestion.md) ^2.1.7
- [@tiptap/starter-kit](https://npm.io/package/@tiptap/starter-kit.md) ^2.1.7
- [tailwindcss-animate](https://npm.io/package/tailwindcss-animate.md) ^1.0.7
- [@tiptap/extension-link](https://npm.io/package/@tiptap/extension-link.md) ^2.1.7
- [@tiptap/extension-color](https://npm.io/package/@tiptap/extension-color.md) ^2.1.7
- [@tiptap/extension-image](https://npm.io/package/@tiptap/extension-image.md) ^2.1.7
- [@tiptap/extension-highlight](https://npm.io/package/@tiptap/extension-highlight.md) ^2.1.7
- [@tiptap/extension-task-item](https://npm.io/package/@tiptap/extension-task-item.md) ^2.1.7
- [@tiptap/extension-task-list](https://npm.io/package/@tiptap/extension-task-list.md) ^2.1.7
- [@tiptap/extension-underline](https://npm.io/package/@tiptap/extension-underline.md) ^2.1.7
- [@tiptap/extension-text-style](https://npm.io/package/@tiptap/extension-text-style.md) ^2.1.7
- [@tiptap/extension-placeholder](https://npm.io/package/@tiptap/extension-placeholder.md) ^2.1.7
- [@tiptap/extension-horizontal-rule](https://npm.io/package/@tiptap/extension-horizontal-rule.md) ^2.1.7

## Recent versions

- 0.0.4 (latest) — 2023-11-13
- 0.0.3 — 2023-09-04
- 0.0.2 — 2023-09-03
- 0.0.1 — 2023-09-03

## README

# Novel Vue

Novel Vue is port of [Novel](https://github.com/steven-tey/novel)

## Introduction

[Novel](https://novel.sh/) is a Notion-style WYSIWYG editor with AI-powered autocompletions.

## Installation

To use Novel Vue in a project, you can run the following command to install the `novel-vue` [NPM package](https://www.npmjs.com/package/novel-vue):

```
npm i novel-vue
```

Then, you can use it in your code like this:

```vue
<template>
  <Editor />
</template>

<script setup lang="ts">
import { Editor } from "novel-vue";
import "novel-vue/dist/style.css";
</script>
```

| Prop              | Type        | Description                                                                                                      | Default                                                                                                                                                     |
| ----------------- | ----------- | ---------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| completionApi     | String      | The API route to use for the OpenAI completion API.                                                              | "/api/generate"                                                                                                                                             |
| className         | String      | Additional classes to add to the editor container.                                                               | "relative min-h-500px] w-full mx-auto max-w-screen-lg border-stone-200 bg-white p-12 px-8 sm:mb-[calc(20vh)] sm:rounded-lg sm:border sm:px-12 sm:shadow-lg" |
| defaultValue      | JSONContent | The default value to use for the editor.                                                                         | defaultEditorContent                                                                                                                                        |
| extensions        | Extension[] | A list of extensions to use for the editor, in addition to the default Novel extensions.                         | []                                                                                                                                                          |
| editorProps       | EditorProps | Props to pass to the underlying Tiptap editor, in addition to the default Novel editor props.                    | {}                                                                                                                                                          |
| onUpdate          | Function    | A callback function that is called whenever the editor is updated.                                               | () => {}                                                                                                                                                    |
| onDebouncedUpdate | Function    | A callback function that is called whenever the editor is updated, but only after the defined debounce duration. | () => {}                                                                                                                                                    |
| debounceDuration  | Number      | The duration (in milliseconds) to debounce the onDebouncedUpdate callback.                                       | 750                                                                                                                                                         |
| storageKey        | String      | The key to use for storing the editor's value in local storage.                                                  | "novel\_\_content"                                                                                                                                          |

> **Note**: Make sure to define an API endpoint that matches the `completionApi` prop (default is `/api/generate`). This is needed for the AI autocompletions to work. Here's an example: https://github.com/naveennaidu/novel-vue/blob/main/nuxt-server/server/api/generate.ts

---
_Source: https://npm.io/package/novel-vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._