vue.js - 如何在 quasar 框架中强制组件在客户端上呈现？

Question

我有一个 ssr 应用程序和一个使用vue-codemirror. 据我所知，这不能在 ssr 中使用，并且页面无法加载并出现错误“导航器未定义”。这是有道理的，因为在文档准备好之前导航器不会存在。

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