The textarea element uses v-model directive to bind data to form.text value returned from the element. The form.text can be later send as body.data using useFetch() method.

pages/index.vue file:

xxxxxxxxxx
 
<template>
  <form>
    <textarea placeholder='Type something...' v-model="form.text" spellcheck="false"></textarea>
    <button type="button" @click="handleSubmit">Send data</button>
  </form>
</template>
​
<script>
export default {
    name: 'Home',
    data() {
        return {
            form: {
                text: ''
            }
        }
    },
    methods: {
        async handleSubmit() {
            const { data: response } = await useFetch('/api/text', {
                method: 'post',
                body: {
                    data: this.form.text
                }
            })
​
            if (response) {
                alert(response.value);
            }
        }
    }
}
</script>
​
<style scoped>
/* ... */
</style>

2. On backend side, the server receives event object, destructures the data using readBody() method and returns some string (which we later display using alert() on frontend side).

server/api/text.js file:

xxxxxxxxxx
 
export default defineEventHandler(async (event) => {
    const { data } = await readBody(event);
    return `Data from api: ${data}`;
});