# Vue 接入

让 Vue 提供容器，在挂载与卸载时创建和释放 Editor。

Vue 负责页面与界面，Editor 负责编辑内容。最小接入只需要一个元素引用和两个生命周期钩子，不需要把整个文档复制到 Vue 状态里。

## 一个组件就能开始

在 `onMounted` 中使用元素引用创建 Editor；在 `onBeforeUnmount` 中调用 `destroy()`。下面是可运行的单文件组件，完整写法与安装步骤见[建立第一个编辑器](/build/project)。

### 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>

```

这里用普通变量保存实例。如果模板或其他组件需要引用它，可用 `shallowRef<Editor>()`；不需要让内部文档和视图对象深度响应化。

## 让 Vue 管理界面状态

例如工具栏要显示粗体选中态，可以订阅 Editor 事件，只把相应布尔值同步到 Vue。用户点击按钮时调用 Editor 命令，而不是修改另一份正文后再反写回来。

具体按钮和订阅的连接方式见[工具栏教程](/build/commands)。只有真正打开另一份文档时，才显式调用内容替换方法。

## Nuxt 和异步加载

服务端没有挂载元素，因此 Editor 的 DOM 创建放在浏览器挂载阶段。加载浏览器专用能力时，可以使用客户端组件或 `ClientOnly`；若动态导入完成时组件已经卸载，就不再创建实例。

切换语言只更新界面，不应重新灌入初始正文；切换主题也不应清空用户的撤销历史。想直接复用完整分页界面，可看 [Classic Vue 接入](/classic/quick-start)。