Novel Vue is port of Novel
Novel is a Notion-style WYSIWYG editor with AI-powered autocompletions.
To use Novel Vue in a project, you can run the following command to install the novel-vue NPM package:
npm i novel-vue
Then, you can use it in your code like this:
<template>
<Editor />
</template>
<script setup lang="ts">
import { Editor } from "novel-vue";
import "novel-vue/dist/style.css";
</script>| Prop | Type | Description | Default |
|---|---|---|---|
| blobApi | String | The API route to use for the Vercel Blob API. | "/api/upload" |
| 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
completionApiprop (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
You can get the editor instance of tiptap by using the editor ref.
For example, to set the content of the editor manually, you can do something like this:
<template>
<button @click="setContent">Set Content</button>
<Editor ref="editorRef" />
</template>
<script setup lang="ts">
import { Editor as EditorClass } from "@tiptap/core";
import { Editor } from "novel-vue";
import "novel-vue/dist/style.css";
const editorRef = ref<{ editor: EditorClass }>();
function setContent() {
if (editorRef.value) {
editorRef.value.editor.commands.setContent({
type: "doc",
content: [
{
type: "paragraph",
content: [
{
type: "text",
text: "Example Text",
},
],
},
],
});
}
}
</script>Novuel: Open Source AI Writing App built with Nuxt 3 and Nuxt UI