plugin cannot be used in nuxt

Summary

plugin cannot be used in nuxt error message: self is not defined

Screenshots

Version:

• System: macOS 12.0.1
• nuxt: 2.15.3
• @toast-ui/vue-editor: 3.1.1

Code

/plugins/tui-editor.js

import Vue from 'vue'
import { Viewer } from '@toast-ui/vue-editor'
import '@toast-ui/editor/dist/toastui-editor.css'
Vue.component('Viewer', Viewer)

/nuxt.config.js

... // other
plugins: [
  { src: '@/plugins/tui-editor.js', mode: 'client' }
}
... // other

Viewer.vue

<template>
  <client-only>
    <viewer :initial-value="value" :height="height" :options="editorOptions" />
  </client-only>
</template>

<script>
import chart from '@toast-ui/editor-plugin-chart'
import colorSyntax from '@toast-ui/editor-plugin-color-syntax'
import tableMergedCell from '@toast-ui/editor-plugin-table-merged-cell'
import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight'

export default {
  name: 'MarkDownViewer',
  props: {
    value: {
      type: String,
      default: ''
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      chartOptions: {
        minWidth: 100,
        maxWidth: 600,
        minHeight: 100,
        maxHeight: 300
      }
    }
  },
  computed: {
    editorOptions() {
      return {
        minHeight: '500px',
        plugins: [
          [chart, this.chartOptions],
          codeSyntaxHighlight,
          colorSyntax,
          tableMergedCell
        ]
      }
    }
  }
}
</script>

[js87zz]

@jianweigit @JakeStanger Sorry for late replying. we has not yet officially supported SSR. There are many requests for this, so I will work on the next minor version.

[JakeStanger]

Guys please if you’re going to make posts like these can you avoid tagging everyone in the quotes, we do get notified still.

It’ll happen when the dev gets to it, if you need it that badly submit a PR.