Vue 3 v-model not working with custom input component in Nuxt.js

Question

I am trying to use a custom Vue input component with a v-model, but the value is not updating in the parent component. I am using Vue 3 with Nuxt.js.

Here is my custom input component:

<template>
  <input
    type="text"
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
    :placeholder="placeholder"
    class="border border-gray-300 rounded-lg w-full p-2 text-black m-1"
  />
</template>

<script setup>
const props = defineProps({
  modelValue: String,
  placeholder: String,
});

const emit = defineEmits(["update:modelValue"]);
</script>

<script>
export default {
  name: "MyInput",
};
</script>

And here is how I am using it in the parent component:

<template>
  <div>
    <MyInput v-model="inputValue" placeholder="Enter a value" />
  </div>
</template>

<script>
import MyInput from "./MyInput.vue";

export default {
  name: "MyParentComponent",
  components: {
    MyInput,
  },
  data() {
    return {
      inputValue: "",
    };
  },
};
</script>

The inputValue data property is not being updated when I type in the input field. Can someone help me figure out what I'm doing wrong?

I have a Vue 3 project without Nuxt.js using this exact same code and it works there.

Answer 1

It's working dude! You can see here. Although we don't explicitly define emits for modelValue.