Installation

Installation

To install Pilot, you can use your preferred package manager.

npm install @learnvue/pilot

Nuxt

If you working in a Nuxt project, you can add the Nuxt module to auto-import all of the components and composables.

export default defineNuxtConfig({
  modules: ['@learnvue/pilot/nuxt'],
})

Creating an Editor

To create an editor, you need to use the useEditor composable and pass it a reference to the editor container element.

<script setup lang="ts">
import { useEditor, Editor } from '@learnvue/pilot'

const { editor } = useEditor()
</script>

<template>
  <Editor v-if="editor" :editor="editor"> </Editor>
</template>

When the component is mounted, useEditor creates a Tiptap editor instance with Pilot's default configuration and extensions.

By default, it only includes the StarterKit extension. However, we recommend getting started with the Editor Bundle to get the most out of Pilot. This will include things like bubble menus, slash commands, and more.

<script setup lang="ts">
import { useEditor, Editor, EditorExtensions } from '@learnvue/pilot'

const { editor } = useEditor({
  extensions: [
    ...EditorExtensions(),
  ],
})
</script>

<template>
  <Editor v-if="editor" :editor="editor"> </Editor>
</template>