[SOLVED] [QUESTION] defineModel macro in Nuxt

[angelhdzmultimedia]

Just read the announcement of defineModel macro and was excited to try it! But after research, I don't seem to figure out how to get it working in Nuxt 3. I already installed vue and @vue/compiler-sfc 3.3.0-alpha.9.

Any tip will be appreciated.

[coolCucumber-cat]

https://www.youtube.com/watch?v=6xhF9HCTf9s
https://github.com/vuejs/core/blob/main/CHANGELOG.md

I don't think it should be any different really, some config things might be different or optional. You either need to be on at least 3.3.0-alpha.9 (2023-04-08) or you can use Vue Macros like the guy in the video. He mentioned the Macros were compatible with Nuxt3 and he does Nuxt too so it should work.

[angelhdzmultimedia]

https://www.youtube.com/watch?v=6xhF9HCTf9s https://github.com/vuejs/core/blob/main/CHANGELOG.md

I don't think it should be any different really, some config things might be different or optional. You either need to be on at least 3.3.0-alpha.9 (2023-04-08) or you can use Vue Macros like the guy in the video. He mentioned the Macros were compatible with Nuxt3 and he does Nuxt too so it should work.

Thank for the info and for your time.
Yeah it should work as you mentioned, but it doesn't. I installed @vue/compiler-sfc@3.3.0-beta.1, and I get error.
But in the Vue Playground, switching to version 3.3.0-beta.1, it works.

Unless it's not compatible with Node 16.14.2, because I'm using stackblitz.com, and I've been having issues because stackblitz still doesn't upgrade the Node version. 🤷‍♂️

Or maybe I need to configure some Vite or Vue compiler macro settings in nuxt config?

[angelhdzmultimedia]

Got it working thanks to someone on Discord.

nuxt.config.ts:

 vite: {
    vue: {
      script: {
        defineModel: true,
      },
    },
  },

[coolCucumber-cat]

TS throws an when I do that: "Type '{ defineModel: true; }' is not assignable to type 'Partial<Pick<SFCScriptCompileOptions, "babelParserPlugins">>'.
Object literal may only specify known properties, and 'defineModel' does not exist in type 'Partial<Pick<SFCScriptCompileOptions, "babelParserPlugins">>'.ts(2322)". vite, vue, script all works. What version of Vue are you on?

[angelhdzmultimedia]

Latest Nuxt, 3.5 or so. And what version is Nuxt 3.5 using? No idea lol. I'll try on a pure Vue project, no Nuxt to test.

[coolCucumber-cat]

Latest Nuxt, 3.5 or so. And what version is Nuxt 3.5 using? No idea lol. I'll try on a pure Vue project, no Nuxt to test.

I found the answer, Nuxt is a global and local package, I needed to do npm outdated -g and npm update -g. Was on 3.4.1 instead of 3.5.1. Bit annoying it doesn't show global by default but that must've been the issue.

[angelhdzmultimedia]

Latest Nuxt, 3.5 or so. And what version is Nuxt 3.5 using? No idea lol. I'll try on a pure Vue project, no Nuxt to test.

I found the answer, Nuxt is a global and local package, I needed to do npm outdated -g and npm update -g. Was on 3.4.1 instead of 3.5.1. Bit annoying it doesn't show global by default but that must've been the issue.

Phew! Glad you figured it out!