Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

概要

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

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

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

解説

.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>

参考

y-temp4
フリーランスエンジニア。Webのフロントエンドが好きです。お仕事のご相談はTwitterのDMまで!
https://y-temp4.com
techtrain
プロのエンジニアを目指すU30(30歳以下)の方に現役エンジニアにメンタリングもらえるコミュニティです。
https://techbowl.co.jp/techtrain/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away