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

问题描述

我有一个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>

我想念什么？

解决方法

创建启动文件：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>

quasar tiptap vue.js