Nuxt.js（2.4.x）でAutoKanaを利用する方法

参考にさせていただいたページ

Vue.jsで自動カナ入力する。 autokanaの導入で奮闘してみた。 - Qiita

【Nuxt.js】ReferenceError: window is not defined ってエラーが出た｜たか橋｜note

window or document undefined - Nuxt.js

上記をすべて読んだ前提で。

インストール

$ yarn add vanilla-autokana

SSRで「 window is not defined 」 というエラーが出る。

後は普通にimportして利用したいところだが、「 window is not defined 」 というエラーが出てしまう。

<script>
import * as AutoKana from 'vanilla-autokana'
〜
</script>

原因は、vanilla-autokana の中でwindowにアクセスしているがSSR時にはアクセスできないため。

window or document undefined - Nuxt.js

SSR時はスキップする。

Nuxtでは process.browser を利用すると、SSRではない（、つまりブラウザでのアクセスのみの）場合に処理を切り分けることができる。

※ process.client の方が良いのかな？

したがって、下記の様にrequireしてあげればOK。

let AutoKana
if (process.browser) {
   AutoKana = require('vanilla-autokana')
}

まとめ（たぶんこんな感じ）

必要なトコロだけ抜き出したので動作確認してないのはあしからず。

template

<template>
  <!-- @input(v-on:input)でconvert_kana()を呼び出す -->
  <input type="text" id="form_last_name" placeholder="例）山田" v-model="form.last_name" @input="convert_kana">
  <input type="text" id="form_last_name_kana" placeholder="れい）やまだ" v-model="form.last_name_kana">
</template>

Script

<script>
let AutoKana
if (process.browser) {
   AutoKana = require('vanilla-autokana')
}
let _last_name_auto_kana;

export default {
  data() {
    return {
      form: {
        last_name: ""
        last_name_kana: ""
      }
    }
  },
  mounted() {
    // AutoKana.bind("#form_last_name", "#form_last_name_kana") で変換処理を登録？
    _last_name_auto_kana = AutoKana.bind("#form_last_name")
  },
  methods: {
    convert_kana() {
      // 実際の変換はここ
      this.form.last_name_kana = _last_name_auto_kana.getFurigana()
    }
  }
}
</script>

あと、項目ごとに処理を追加しないといけなくなるので、プラグインか何かにしたみ。