Work with TSX on vue 3

[Dolyka]

Hi all
Can anyone tell me how to make VUE on TSX understand v-model with arguments?
I didn't find anything in the official documentation.
Using the latest version of vue 3 and ts 4.4.4 (if you need any more information write)

The problem is with TS. It doesn't understand the v-model construct, and since the user property is required, TS shows an error.
If make the user property optional, then this is normal for TS. And babel is already transpiling everything normally at the output.

Use Visual Studio Code with extensions Vue Language Features (Volar) v0.34.16 and TypeScript Vue Plugin (Volar) v0.34.16

<UserForm
   mode={PageMode.Create}
   v-model:user={this.user}
   permissions={this.permissions}
/>

export default defineComponent({
  name: 'UserForm',

  props: {
    user: {
      type: Object as PropType<User>,
      required: true
    },
    permissions: {
      type: Array as PropType<Permission[]>,
      required: true
    },
    mode: {
      type: Number as PropType<PageMode>,
      default: PageMode.View
    }
  },

  emits: ['update:user'],

  data() {
    return {
      repeatPassword: ''
    };
  },

Failed to compile.

src/pages/users/create.tsx:54:12
TS2322: Type '{ mode: PageMode.Create; "v-model:user": { readonly userId?: number | undefined; login: string; password: string | null; firstName: string; lastName: string; middleName: string; organization: string; isActive: boolean; email: string | null; phone: string; rights: number[]; }; permissions: any; }' is not assignable to type 'IntrinsicAttributes & Partial<{ mode: PageMode; }> & Omit<Readonly<ExtractPropTypes<{ user: { type: PropType<User>; required: true; }; permissions: { ...; }; mode: { ...; }; }>> & { ...; } & VNodeProps & AllowedComponentProps & ComponentCustomProps, "mode">'.
  Property 'user' is missing in type '{ mode: PageMode.Create; "v-model:user": { readonly userId?: number | undefined; login: string; password: string | null; firstName: string; lastName: string; middleName: string; organization: string; isActive: boolean; email: string | null; phone: string; rights: number[]; }; permissions: any; }' but required in type 'Omit<Readonly<ExtractPropTypes<{ user: { type: PropType<User>; required: true; }; permissions: { type: PropType<Permission[]>; required: true; }; mode: { type: PropType<PageMode>; default: PageMode; }; }>> & { ...; } & VNodeProps & AllowedComponentProps & ComponentCustomProps, "mode">'.
    52 |         {this.isLoading && <Loading />}
    53 |         <div class={styles.container}>
  > 54 |           <UserForm
       |            ^^^^^^^^
    55 |             mode={PageMode.Create}
    56 |             v-model:user={this.user}
    57 |             permissions={this.permissions}

  "dependencies": {
    "@flowjs/flow.js": "^2.14.1",
    "@mdi/font": "^6.5.95",
    "@microsoft/signalr": "^6.0.3",
    "ag-grid-community": "^27.3.0",
    "ag-grid-enterprise": "^27.3.0",
    "ag-grid-vue3": "^27.3.0",
    "core-js": "^3.6.5",
    "element-plus": "^2.1.10",
    "heatmap.js": "^2.0.5",
    "leaflet": "^1.7.1",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
    "roboto-fontface": "^0.10.0",
    "uuid": "^8.3.2",
    "v-click-outside": "^3.1.2",
    "vue": "^3.2.36",
    "vue-router": "^4.0.14",
    "vue-types": "^4.1.1",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@types/jest": "^24.0.19",
    "@types/leaflet": "^1.7.9",
    "@types/lodash": "^4.14.182",
    "@typescript-eslint/eslint-plugin": "^4.33.0",
    "@typescript-eslint/parser": "^4.33.0",
    "@vue/babel-plugin-jsx": "^1.1.1",
    "@vue/cli-plugin-babel": "^4.5.17",
    "@vue/cli-plugin-e2e-cypress": "^4.5.17",
    "@vue/cli-plugin-eslint": "^4.5.17",
    "@vue/cli-plugin-router": "^4.5.17",
    "@vue/cli-plugin-typescript": "^4.5.17",
    "@vue/cli-plugin-unit-jest": "^4.5.17",
    "@vue/cli-plugin-vuex": "^4.5.17",
    "@vue/cli-service": "^4.5.17",
    "@vue/compiler-sfc": "^3.2.33",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "@vue/test-utils": "^2.0.0-0",
    "eslint": "^6.8.0",
    "eslint-plugin-prettier": "^3.4.1",
    "eslint-plugin-vue": "^7.20.0",
    "prettier": "^2.6.2",
    "sass": "^1.49.9",
    "sass-loader": "^8.0.2",
    "typescript": "^4.4.4",
    "vue-jest": "^5.0.0-0"
  }

[harshagarwalnyu]

In TSX, Vue's v-model:propName directive is not available - JSX does not have Vue-specific directives. You need to expand it manually to its two parts: the prop and the update event.

v-model:user="myUser" in template becomes this in TSX:

<MyComponent
  user={myUser.value}
  onUpdate:user={(val: UserType) => (myUser.value = val)}
/>

v-model:user is syntactic sugar for prop user={value} + event onUpdate:user={handler} (the event name is update:user, prefixed with on).

Full working example:

import { defineComponent, ref } from 'vue';

const UserForm = defineComponent({
  props: {
    user: { type: Object as () => User, required: true },
  },
  emits: ['update:user'],
  setup(props, { emit }) {
    return () => (
      <input
        value={props.user.name}
        onInput={(e) =>
          emit('update:user', { ...props.user, name: (e.target as HTMLInputElement).value })
        }
      />
    );
  },
});

const Parent = defineComponent({
  setup() {
    const user = ref<User>({ name: 'Alice' });
    return () => (
      <UserForm
        user={user.value}
        onUpdate:user={(val) => (user.value = val)}
      />
    );
  },
});

TypeScript error on onUpdate:user: Volar derives JSX types for Vue 3 model events from the emits option. Volar 0.34.16 had gaps in TSX emits inference. Upgrading to Volar >= 0.36 typically resolves the red squiggles without any code change.

If the error persists after upgrading Volar, use a spread workaround for the colon-containing event name:

{...{ 'onUpdate:user': (val: User) => (user.value = val) }}

[GitNimay]

In TSX, I would not rely on v-model:user being understood by TypeScript the same way it is understood by the Vue JSX Babel transform.

Babel can transform this:

<UserForm
  mode={PageMode.Create}
  v-model:user={this.user}
  permissions={this.permissions}
/>

but TypeScript still sees a prop literally named "v-model:user". It does not understand that this should become both:

user={this.user}
onUpdate:user={...}

That is why TS complains that the required user prop is missing.

The TSX-friendly version is to write the expanded form yourself:

<UserForm
  mode={PageMode.Create}
  user={this.user}
  permissions={this.permissions}
  onUpdate:user={(value: User) => {
    this.user = value;
  }}
/>

Depending on your tooling, if onUpdate:user is not accepted as JSX syntax, use an object spread:

<UserForm
  mode={PageMode.Create}
  user={this.user}
  permissions={this.permissions}
  {...{
    "onUpdate:user": (value: User) => {
      this.user = value;
    },
  }}
/>

Your child component setup is basically correct:

props: {
  user: {
    type: Object as PropType<User>,
    required: true,
  },
},

emits: ["update:user"],

and inside UserForm, emit updates like this:

this.$emit("update:user", nextUser);

So the issue is not Vue runtime support. Vue 3 supports v-model arguments on components, and @vue/babel-plugin-jsx can transform them. The issue is TSX type checking in that older stack. TypeScript sees the required prop as missing before Babel has a chance to rewrite the directive.

I would use the explicit prop plus update handler in TSX. It is also clearer and avoids making user optional just to satisfy the type checker.

[aymenhmaidiwastaken]

The issue isn't Vue — it's TypeScript. TSX doesn't understand Vue's v-model:user directive syntax. Babel can transform it at build time, but TS sees a literal prop named "v-model:user" and doesn't know it maps to user + update:user.

The fix — expand v-model manually in TSX:

<UserForm
  mode={PageMode.Create}
  user={this.user}
  permissions={this.permissions}
  {...{ "onUpdate:user": (val: User) => { this.user = val; } }}
/>

This is what v-model:user compiles to under the hood:

• Prop: user={value}
• Event: onUpdate:user={handler}

The spread syntax {...{ "onUpdate:user": ... }} is needed because the colon in the event name isn't valid JSX attribute syntax in some tooling setups.

Your UserForm component definition is correct — keep required: true on the user prop and emits: ['update:user']. No need to make it optional.

TL;DR: In Vue TSX, always expand v-model:propName to its two parts (prop + onUpdate:propName handler). This avoids the TS error and works reliably across all tooling versions.