Nuxt和Nuxt ui使用初体验,SSR大冒险!#

1. 使用官方Nuxt nuxt-tiptap-editor 插件, 编写富文本编辑器导致组件自调用,堆栈溢出#

2026-03-02 20:18:29 我依然没能解决使用这个插件在父组件创造富文本编辑器并进行组件通讯问题,并且在加载页面时出现:

1
RangeError: Maximum call stack size exceeded

这出现了Vue组件系统中的组件自引用问题,导致堆栈溢出页面崩溃

1. 根据官方文档中的内容, 可以在nuxt.config.ts 配置文件中配置tiptap 中的prefix为:“Tiptap” 然后在commponets 文件夹中创建TiptapEditor.vue 封装相关的编辑器组件

但如果同时创建了TiptapEditor组件, 并在其中使用TiptapEditor全局注册的组件则会导致: 1. Vue 尝试渲染 2. 加载 components/TiptapEditor.vue 3. 该组件的模板中又包含 4. 再次加载 components/TiptapEditor.vue 5. 无限递归 → 调用栈爆炸 → 浏览器崩溃

关键点：Vue 会自动注册 components/ 目录下的组件为全局或局部组件。当你在 TiptapEditor.vue 中写 ，它解析的就是自己！

2. v-model 透传:

透传（Transparent Transmission / Pass-through） 是指：某个中间层（组件、服务、模块）在处理数据时，不对特定字段或属性做任何修改、解析或拦截，而是原封不动地将其传递给下一层。

v-model 在vue中的语法糖使用

1
  <MyComponent v-model="value" />
2
   <!-- 等价于 -->
3
  <MyComponent :modelValue="value" @update:modelValue="value = $event" />

封装组件并透传v-model的逻辑为:

1
  const innerValue = computed({
2
  get: () => props.modelValue,
3
  set: (val) => emit('update:modelValue', val)
4
  })

透传的价值

3. Nuxt4官方中 ClientOnly api 的使用:

Nuxt 官方提供的内置组件，用于将部分内容限制在客户端（浏览器）渲染，跳过服务端渲染（SSR）阶段。 这个api 能解决什么问题?

1
  // 错误示例：在 setup() 中直接使用 window
2
  const width = window.innerWidth // ❌ ReferenceError: window is not defined

1
<template>
2
<div>
3
<!-- 这部分始终渲染（包括 SSR） -->
4
<h1>我的页面</h1>
5

6
<!-- 这部分仅在客户端渲染 -->
7
<ClientOnly>
8
  <MyHeavyComponent />
9
</ClientOnly>
10
</div>
11
</template>