vanilla-autokanaをNuxt.jsとTypeScriptで使用

Vue・Nuxt・TSの環境でふりがなをカタカナで自動入力したかったので、Nuxt.jsに対応している自動カナ入力を探していましたが、出てこないということで、vanilla-autokanaをインストールしてきて使って見ようと試みましたが、師匠の手を借りなんとか、使える形になりました。きっと断念された方も多いはず。。。

まずはこのwindowにアクセスしているがSSR時にアクセスできていない問題です。

<script lang="ts">

import * as AutoKana from 'vanilla-autokana'

let autokanaName: any

mounted() {
  if (process.client) {
      autokanaName = require('vanilla-autokana')
     }
}

mounted() {
  if (process.client) {
      autokanaName = require('vanilla-autokana')
      }
  autokanaName = AutoKana.bind('#name', '#kana', { katakana: true })
}

としただけでは、このwindowエラーは回避できませんでした。

import * as AutoKana from 'vanilla-autokana'

を取って、requireに直接バインドさせます。

<script lang="ts">

mounted() {
  if (process.client) {
        autokanaName = require('vanilla-autokana').bind('#name', '#kana', { katakana: true, })
      }
}

こうすることで、windowのエラーは回避できました。

次に来るのがこちらの問題、これはもうさっぱりわかりませんでした。#(シャープ)で指定したIDの要素を紐づけている訳ですが、.(ドット)でクラスの要素にしてもビクともしません。

Vueのドキュメントにmountedで$nextTickを使ってビュー全体をレンダリングするまで待つとあったのでそれを使います。

<template>

     <input
            id="name"
            v-model="form.name"
            class=""
            type="text"
            placeholder=""
            @input="handleNameInput"
          />
     <input
            id="kana"
            v-model="form.kana"
            placeholder=""
            type="text"
            class=""
          />

</template>

<script lang="ts">

interface Form {
  name: string
  kana: string
}

export default class Hoge extends Vue {

form: Partial<Form> = {}

async mounted() {
    
      if (process.client) {
        this.$nextTick(() => {
          autokanaName = require('vanilla-autokana').bind('name', 'kana', {
            katakana: true,
          })
        })
      }
    })
  }

handleNameInput() {
    this.form.kana = autokanaName.getFurigana()
  }

</script>

$nextTickを付与し#を外します。

vanilla-autokanaを発動させることができました。