← All demos

Vue 3

Bind a template ref, then attach in onMounted and clean up in onBeforeUnmount. thaanaKeyboard() returns the cleanup function.

Source

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import { thaanaKeyboard } from "thaana-keyboard-lite";

const text = ref("");
const inputEl = ref(null);
let cleanup;

onMounted(() => {
  cleanup = thaanaKeyboard({ element: inputEl.value });
});
onBeforeUnmount(() => cleanup?.());
</script>

<template>
  <input ref="inputEl" v-model="text" dir="rtl" />
</template>