# Build your first editor

Start with one Vue component and understand creation, mounting and cleanup.

This chapter adds an editor to a Vue page. Start with the browser's native DOM view to learn Core; later chapters add Canvas, pagination and your product interface.

You should be familiar with Vue components and lifecycle hooks, and have Node.js and pnpm installed. In an existing Vue 3 project, start with the dependency installation.

## 1. Prepare a Vue project

```sh [Terminal]
pnpm create vite my-editor --template vue-ts
cd my-editor
pnpm install
pnpm add @quirekit/core@alpha @quirekit/starter-kit@alpha @quirekit/dom-view@alpha @quirekit/pm-view@alpha
```

`core` manages content and commands. `starter-kit` provides paragraphs, headings and common formatting. `dom-view` displays editable DOM, and the `pm-view` stylesheet preserves whitespace and native selection presentation. Use matching QuireKit release versions.

## 2. Create an editor component

Create `src/Editor.vue`. Vue supplies an empty element; Editor manages its editable contents after mounting.

```vue [src/Editor.vue]
<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue'
import { Editor } from '@quirekit/core'
import { StarterKit } from '@quirekit/starter-kit'
import { DomViewExtension } from '@quirekit/dom-view'
import '@quirekit/pm-view/style/prosemirror.css'

const element = ref<HTMLElement>()
let editor: Editor | undefined

onMounted(() => {
  editor = new Editor({
    element: element.value,
    mode: 'dom',
    extensions: [StarterKit, DomViewExtension],
    content: '<p>My first QuireKit editor.</p>',
  })
})

onBeforeUnmount(() => editor?.destroy())
</script>

<template><div ref="element" /></template>
```

`element` selects the display location, `extensions` determines supported content, and `content` supplies the initial document. `mode: 'dom'` selects the installed DOM view. Create the instance once, rather than recreating it on each edit.

`onMounted` waits for the host element; `destroy()` releases the view and listeners. With SSR, the server renders only the outer element and the browser creates the editor.

## 3. Use it in your page

Import the component in `src/App.vue`, then run `pnpm dev`.

```vue [src/App.vue]
<script setup lang="ts">
import Editor from './Editor.vue'
</script>

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

Click to type, drag to select, and use your system undo shortcut. This example uses the same integration and has just one component source file.

### tutorial/editor.vue

```vue
<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from "vue";
import { Editor } from "@quirekit/core";
import { StarterKit } from "@quirekit/starter-kit";
import { DomViewExtension } from "@quirekit/dom-view";
import "@quirekit/pm-view/style/prosemirror.css";

const props = withDefaults(defineProps<{
  /** Language of the initial example text; changing it does not replace edits. */
  locale?: "zh-CN" | "en";
}>(), { locale: "zh-CN" });
const element = ref<HTMLElement>();
let editor: Editor | undefined;

onMounted(() => {
  editor = new Editor({
    element: element.value,
    mode: "dom",
    extensions: [StarterKit, DomViewExtension],
    content: props.locale === "en" ? "<p>My first QuireKit editor.</p>" : "<p>我的第一个 QuireKit 编辑器。</p>",
  });
});
onBeforeUnmount(() => editor?.destroy());
</script>

<template><div ref="element" class="p-qk-surface" /></template>

```

## What comes next

The editor has no toolbar or paginated workspace yet. Learn [the document model](/en/build/model) next: how structured content works and why articles and Word documents use different extensions. Then [mount Canvas/SVG](/en/build/view).

Already familiar with these basics? The [complete workspace reference](/en/build/reference) explains the files for state management and file operations individually.