参考にさせていただいたページ
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>
あと、項目ごとに処理を追加しないといけなくなるので、プラグインか何かにしたみ。