如何强制组件在类星体框架中呈现在客户端上？

Question

我有一个 ssr 应用程序和一个使用 vue-codemirror 的文本编辑器组件。据我所知，这不能在 ssr 中使用，并且页面加载失败并出现错误“navigator is not defined”。这是有道理的，因为在文档准备好之前导航器不存在。

我在文档中读到 <q-no-ssr /> 用于强制组件仅在客户端呈现。我尝试将我的文本编辑器组件包装在 <q-no-ssr /> 标记中，但我仍然运行进入“未定义导航器”错误。

我使用的文本编辑器是quasar tiptap。

这是我尝试过的：

<q-no-ssr>
  <quasar-tiptap
   v-bind="options"
   @update="onUpdate"
  />
</q-no-ssr>

我错过了什么？

Answer 1

创建引导文件：quasar new boot tiptap

tiptap.js

import Vue from 'vue'
import { QuasarTiptapPlugin, RecommendedExtensions } from 'quasar-tiptap'
import "quasar-tiptap/lib/index.css";

Vue.use(QuasarTiptapPlugin, {
  language: 'en-us',
  spellcheck: true
})

参考 quasar.conf.js

中的引导文件

 boot: [
  'axios',
  {path: 'tiptap', server: false} //render only on client
 ],

在应用程序中的任意位置使用组件：

 <div>
  <quasar-tiptap
   ref="transcript"
   v-bind="options"
   @update="onUpdate"
   @annotation="handleAnnotation($event)"
  />
</div>

如何强制组件在类星体框架中呈现在客户端上？

How to force component to render on client in quasar framework?

vue.js

quasar

tiptap