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

Question

I have an ssr app and a text editor component that uses vue-codemirror. To my knowledge, this can't be used in ssr and the page fails to load with the error "navigator is not defined." This makes sense because the navigator wont exist until the document is ready.

I read in the docs that <q-no-ssr /> is used for forcing a component to be rendered on the client only. I tried wrapping my text editor component in a <q-no-ssr /> tag but am still running into the "navigator is not defined" error.

The text editor I am using is quasar tiptap.

Here is what I have tried:

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

What am I missing?

Answer 1

Create a boot file: 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
})

reference boot file in quasar.conf.js

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

use component wherever you want in your application:

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