I am using Nuxt 3.5.1 and Vuejs 3.3 but defineModel macro always returns undefined I don't know why?

 <template>
     <input v-model="count">
</template>

 <script lang="ts" setup>
   const count = defineModel('count');

   debugger //====when I stopped here I get count undefined
</script>
I added this section to nuxt.config.ts but with no success:
vite:{      
         vue: {
             script: {
                 defineModel: true,
                 propsDestructure: true                 
             }
         }
     
   }

I am using Nuxt 3.5.1 and Vuejs 3.3 but defineModel macro always returns undefined I don't know why?

 <template>
     <input v-model="count">
</template>

 <script lang="ts" setup>
   const count = defineModel('count');

   debugger //====when I stopped here I get count undefined
</script>
I added this section to nuxt.config.ts but with no success:
vite:{      
         vue: {
             script: {
                 defineModel: true,
                 propsDestructure: true                 
             }
         }
     
   }

• javascript
• html
• typescript
• vue.js
• nuxt.js

Share Follow edited May 26, 2023 at 2:27 aym1781969 asked May 26, 2023 at 1:14 aym1781969aym1781969 64711 gold badge77 silver badges1919 bronze badges 1

• defineModel requires Vue 3.3 and explicit opt-in. Did you opt-in? scroll down to 'Adoption Strategy' for instructions – yoduh Commented May 26, 2023 at 2:03

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Here's my nuxt config as you said

// https://nuxt./docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  vite: {
    vue: {
      script: {
        defineModel: true,
        propsDestructure: true,
      },
    },
  },
});

And the my ponent

<script setup>
const count = defineModel();

console.log(count?.value);

watch(
  () => count.value,
  (n) => {
    console.log(n);
  }
);
</script>

<template>
  <input v-model="count" />
</template>

Remember that as the official blog said link

3.3 simplifies the usage with the new defineModel macro. The macro automatically registers a prop, and returns a ref that can be directly mutated:

It's working fine. I think Here's the Stackblitz link. Check out the code. It's working file and printing value properly in the console.

I figured out the problem there is section in my nuxt.config.ts that conflict with vite section:

//=====when I disable this section it works fine
 hooks: {
       "vite:extendConfig": (config, { isClient, isServer }) => {
          if (isClient) {
             config.vue =   "vue/dist/vue.esm-bundler";           
          }
       },
    },
//===this is the vite section
 vite:{      
         vue: {
             script: {
                 defineModel: true,
                 propsDestructure: true                 
             }
         }
     
   }