Nuxt.js で medium-editor を使う方法（SSR 対応など）

概要

Nuxt は基本 SSR しているためブラウザのdocumentオブジェクトなどが読み込めず、一部ライブラリが使えない。

例えば medium-editor はdocumentオブジェクトを参照しているため、なんとかして使えるようにする必要がある。

この記事ではその方法を解説する。

解説

.vueファイル内の script タグ内で、process.browserを呼び出すとブラウザ環境かどうか bool 値で返ってくる。

これが true のときに、documentオブジェクトを呼び出すようなライブラリを呼び出す。

例：

const MediumEditor = process.browser ? require('medium-editor') : ''

その後、Vueインスタンスがマウントした後のタイミングなどで読み込んだライブラリを実行する。

例：

<template>
  <div ref="editable" />
</template>

<script>
const MediumEditor = process.browser ? require('medium-editor') : ''

export default {
  // 省略
  mounted() {
    this.initEditor()
  },
  methods: {
    initEditor() {
      const elements = this.$refs.editable
      new MediumEditor(elements, {
        spellcheck: false
      })
    }
  }
}
</script>

参考

• ripe-thumbの VueEditor.vue