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

nuypyhwy  于 2023-03-24  发布在  Vue.js
关注(0)|答案(2)|浏览(156)

我有一个ssr应用程序和一个使用vue-codemirror的文本编辑器组件。据我所知,这不能在ssr中使用,页面加载失败,并出现错误“导航器未定义”。这是有意义的,因为导航器在文档准备好之前不会存在。
我在文档中读到<q-no-ssr />用于强制一个组件只在客户端呈现。我试图将我的文本编辑器组件 Package 在<q-no-ssr />标签中,但仍然遇到“navigator is not defined”错误。
我使用的文本编辑器是quasar tiptap
以下是我的尝试:

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

我错过了什么?

axr492tv

axr492tv1#

创建 Boot 文件: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 文件

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

在应用程序中的任何位置使用组件:

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

monwx1rj2#

<template>
  <q-no-ssr> <!-- Важно -->
        <YaMap />
  </q-no-ssr>
</template>

<script>
   components: {
    YaMap: defineAsyncComponent(() =>
      import('components/modules/YaMap.vue') /* Важно */
    )
  },
</script>

相关问题