how to use it with Vue.js

Import the necessary functions: In your Vue component script section, import the convertToAmharic function from the amharic-converter package.

import { convertToAmharic } from 'amharic-converter';

Set up the state variable: Create a state variable called amharicText using the reactive function from Vue Composition API. Initialize it with an empty string:

import { reactive } from 'vue';
// Inside the setup() function
const state = reactive({
    amharicText: '',
 });

Define the event handler: Create a function, lets call it handleInputChange, that will be responsible for updating the amharicText state whenever the input text changes. This function should extract the English text from the events target value, pass it to the convertToAmharic function to obtain the corresponding Amharic text, and set the amharicText state with the converted text:.

const handleInputChange = (event) => {
    const englishText = event.target.value;
    const amharicResult = convertToAmharic(englishText, {
       includeNumbers: false, 
       enhance: false, 
});
// amharicResult.correctText to access the Corrected spelling 
// amharicResult.suggestions to access possibly the next words 
// amharicResult.convertedText to access the amharic text 
  state.amharicText = convertedText.convertedText;  
};

Use the state variable in the template: In your Vue components template, use the amharicText state variable to display the converted Amharic text within an input element. Bind the value attribute of the input element to the amharicText state variable, and listen to the input event to trigger the handleInputChange function.

<template>
  <div>
    <input type="text" :value="state.amharicText" @input="handleInputChange" />
  </div>
</template>