---
title: "Nuxt"
description: "了解如何使用 Nuxt.js 设置 Tiptap 编辑器，以实现动态富文本编辑体验。深入阅读我们的文档指南！"
canonical_url: "https://tiptap.zhcndoc.com/editor/getting-started/install/nuxt"
---

# Nuxt

了解如何使用 Nuxt.js 设置 Tiptap 编辑器，以实现动态富文本编辑体验。深入阅读我们的文档指南！

本指南涵盖了如何将 Tiptap 集成到你的 Nuxt.js 项目中，附带代码示例。

### 系统要求

- [Node](https://nodejs.org/en/download/) 已安装在你的机器上
- 有 [Vue](https://vuejs.org/guide/introduction.html) 使用经验

## 创建项目（可选）

如果你已经有一个 Nuxt.js 项目，那也没关系。可以跳过这一步。

为了这个项目的目的，从一个名为 `my-tiptap-project` 的新 Nuxt.js 项目开始。以下命令设置了我们需要的一切。它会问很多问题，但只需选择你喜欢的选项或使用默认设置即可。

```bash
# 创建一个项目
npx nuxi@latest init my-tiptap-project

# 更改目录
cd my-tiptap-project
```

### 安装依赖

够了，这些无聊的模板工作。让我们安装 Tiptap！对于以下示例，你需要 `@tiptap/vue-3` 包以及一些组件，`@tiptap/pm` 包和 `@tiptap/starter-kit`，后者包含了最常见的扩展，可以快速入门。

```bash
npm install @tiptap/vue-3 @tiptap/pm @tiptap/starter-kit
```

如果你按照步骤 1 和 2 使用，现在可以通过 `npm run dev` 启动项目，并在你喜欢的浏览器中打开 [http://localhost:3000/](http://localhost:3000/)。如果你在处理一个已有项目，可能会有所不同。

## 集成 Tiptap

要实际开始使用 Tiptap，你需要在你的应用中添加一个新组件。我们称之为 `TiptapEditor`，并将以下示例代码放入 `components/TiptapEditor.vue`。

这是让 Tiptap 与 Vue 一起快速启动的最简单方法。它将为你提供一个非常基本的 Tiptap 版本，没有任何按钮。别担心，你将很快能够添加更多功能。

由于 Nuxt 使用服务端渲染（SSR），我们设置了 `immediatelyRender: false`，以防止编辑器在服务器上渲染。编辑器需要浏览器 API，而这些在 SSR 期间不可用，所以这个选项确保它只在客户端水合后渲染。

```html
<template>
  <EditorContent :editor="editor" />
</template>

<script setup>
  import { useEditor, EditorContent } from '@tiptap/vue-3'
  import StarterKit from '@tiptap/starter-kit'

  const editor = useEditor({
    content: `<p>我正在使用 Vue.js 运行 Tiptap。🎉</p>`,
    extensions: [StarterKit],
    // 不在服务器端渲染，仅在客户端水合后渲染
    immediatelyRender: false,
  })
</script>
```

### 将其添加到你的应用中

现在，让我们用以下示例代码替换 `app/app.vue` 的内容，以便在我们的应用中使用新的 `TiptapEditor` 组件：

```html
<template>
  <TiptapEditor />
</template>
```

请注意，Tiptap 需要在客户端运行，而不是在服务器上。必须将编辑器包装在 `<client-only>` 标签中。[了解更多关于客户端组件的信息。](https://nuxtjs.org/api/components-client-only)

在 Nuxt 4 中，组件和 Vue 组合函数（如 `ref` 和 `watch`）会自动导入，因此你无需手动导入或注册它们。

现在你应该能在浏览器中看到 Tiptap。给自己一个赞吧！:)

### 使用 v-model（可选）

你可能习惯于在表单中使用 `v-model` 绑定数据。这在 Tiptap 中也是可能的。以下是一个可以在你的项目中集成的工作示例组件：

> **Interactive demo:** [VModel](https://embed.tiptap.dev/preview/GuideGettingStarted/VModel)

```html
<template>
  <EditorContent :editor="editor" />
</template>

<script setup>
  import { useEditor, EditorContent } from '@tiptap/vue-3'
  import StarterKit from '@tiptap/starter-kit'

  const emit = defineEmits(['update:modelValue'])
  const props = defineProps({
    modelValue: {
      type: String,
      default: '',
    },
  })

  const editor = useEditor({
    content: props.modelValue,
    extensions: [StarterKit],
    // 不在服务器端渲染，仅在客户端水合后渲染
    immediatelyRender: false,
    onUpdate: ({ editor }) => {
      // HTML
      emit('update:modelValue', editor.getHTML())

      // JSON
      // emit('update:modelValue', editor.getJSON())
    },
  })

  watch(
    () => props.modelValue,
    (value) => {
      // HTML
      const isSame = editor.value?.getHTML() === value

      // JSON
      // const isSame = JSON.stringify(editor.value?.getJSON()) === JSON.stringify(value)

      if (isSame) {
        return
      }

      editor.value?.commands.setContent(value, false)
    }
  )
</script>
```

## 下一步

- [配置你的编辑器](https://tiptap.zhcndoc.com/editor/getting-started/configure.md)
- [为编辑器添加样式](https://tiptap.zhcndoc.com/editor/getting-started/style-editor.md)
- [了解更多 Tiptap 的概念](https://tiptap.zhcndoc.com/editor/core-concepts/introduction.md)
- [学习如何持久化编辑器状态](https://tiptap.zhcndoc.com/editor/core-concepts/persistence.md)
- [开始构建你自己的扩展](https://tiptap.zhcndoc.com/editor/extensions/custom-extensions.md)