Nuxt•9mo ago

null values in nuxt ui input

Hi there! It looks like after a recent change of something, nuxt ui no longer allows certain values in a UInput's v-model? I get the following error when trying to display a possible null value in an input

Type 'string | null | undefined' is not assignable to type 'string | number | undefined'

Type 'string | null | undefined' is not assignable to type 'string | number | undefined'

It also appears that boolean options are no longer allowed in select menus either... Or an array of strings? Though that might be due to the null value

Type 'string[] | null | undefined' is not assignable to type 'string | 
number | Record<string, any> | unknown[] | undefined'.

Type 'string[] | null | undefined' is not assignable to type 'string | 
number | Record<string, any> | unknown[] | undefined'.

If this change was intentional there a correct way to handle these kinds of data errors? It might just be a bad implementation my end if I'm using boolean values in select's for example I am using @nuxt/ui: ^2.14.2. The error is also present on ^2.15.2 which is the latest version The code used to build fine so I'm not sure what changed I'm also really confused as I only get the errors when running nuxi typecheck, but not in my local vscode Maybe it was an update to vue-tsc?

10 Replies

WazbatOP•9mo ago

Hell I can't even use a boolean anymore it seems with a USelectMenu?

<script setup lang="ts">

const value = ref<boolean|undefined>();

const options = [
  {
    label: 'Yes',
    value: true
  },
  {
    label: 'No',
    value: false
  },
  {
    label: 'None selected',
    value: undefined
  }
];
</script>

<template>
  <div>
    <USelectMenu
    :options="options"
    v-model="value"
    value-attribute="value" option-attribute="label"
    />
  </div>
</template>

<script setup lang="ts">

const value = ref<boolean|undefined>();

const options = [
  {
    label: 'Yes',
    value: true
  },
  {
    label: 'No',
    value: false
  },
  {
    label: 'None selected',
    value: undefined
  }
];
</script>

<template>
  <div>
    <USelectMenu
    :options="options"
    v-model="value"
    value-attribute="value" option-attribute="label"
    />
  </div>
</template>

And I get this error with the v-model, where the property's type is boolean|undefined

error TS2322: Type 'boolean | undefined' is not assignable to type 'string | number | Record<string, any> | unknown[] | undefined'.

Valentin•9mo ago

Your problem seems to be with the boolean value. No change on the component side: https://github.com/nuxt/ui/commits/dev/src/runtime/components/forms/Input.vue

WazbatOP•9mo ago

Sorry I forgot to submit my edit to that message you're replying to. Added an example I'm going to raise an issue on the github, but I think it might be a problem with vue-tsc

Valentin•9mo ago

Ohh it's a SelectMenu not a UInput

WazbatOP•9mo ago

I have similar typeerrors with both components I'm trying to set up a small proper example with a UInput now I was able to fix my inputs by type casting to string|undefined which while not ideal, works. But this here with the select is a blocker as I can't type cast my way out of it ...well I can but it's a mess and I'd rather just fix the problem Here's the same with an input. This one also doesn't compile

<script setup lang="ts">
const value = ref<string | null | undefined>(undefined);
</script>

<template>
  <div>
    <UInput v-model.trim="value" />
  </div>
</template>

<script setup lang="ts">
const value = ref<string | null | undefined>(undefined);
</script>

<template>
  <div>
    <UInput v-model.trim="value" />
  </div>
</template>

Valentin•9mo ago

For me this example works without TS issues :

<script setup lang="ts">
type Option = {
  label: string
  value: boolean | undefined
}

const value = ref<Option['value']>()

const options: Option[] = [
  {
    label: 'Yes',
    value: true
  },
  {
    label: 'No',
    value: false
  },
  {
    label: 'None selected',
    value: undefined
  }
];
</script>

<template>
  {{ value }}

  <USelectMenu
    :options="options"
    v-model="value"
    value-attribute="value" 
    option-attribute="label"
  />
</template>

<script setup lang="ts">
type Option = {
  label: string
  value: boolean | undefined
}

const value = ref<Option['value']>()

const options: Option[] = [
  {
    label: 'Yes',
    value: true
  },
  {
    label: 'No',
    value: false
  },
  {
    label: 'None selected',
    value: undefined
  }
];
</script>

<template>
  {{ value }}

  <USelectMenu
    :options="options"
    v-model="value"
    value-attribute="value" 
    option-attribute="label"
  />
</template>

(using edge)

WazbatOP•9mo ago

Yeah that one doesn't work for me on my local. I get this error

Untitled-1.vue:30:5 - error TS2322: Type 'boolean | undefined' is not assignable to type 'string | number | Record<string, any> | unknown[] | undefined'.

30     v-model="value"
       ~~~~~~~~~~

  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]/node_modules/@nuxt/ui/dist/runtime/components/forms/SelectMenu.vue.d.ts:354:5
    354     modelValue: string | number | unknown[] | Record<string, any>;
            ~~~~~~~~~~
    The expected type comes from property 'modelValue' which is declared here on type 'Partial<{ size: SelectSize; ui: any; id: string; icon: string; color: any; class: any; options: string[] | { [key: string]: any; disabled?: boolean | undefined; }[]; popper: PopperOptions; ... 27 more ...; showCreateOptionWhen: "empty" | "always"; }> & Omit<...> & Record<...>'


Found 1 error in Untitled-1.vue:30

Untitled-1.vue:30:5 - error TS2322: Type 'boolean | undefined' is not assignable to type 'string | number | Record<string, any> | unknown[] | undefined'.

30     v-model="value"
       ~~~~~~~~~~

  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]/node_modules/@nuxt/ui/dist/runtime/components/forms/SelectMenu.vue.d.ts:354:5
    354     modelValue: string | number | unknown[] | Record<string, any>;
            ~~~~~~~~~~
    The expected type comes from property 'modelValue' which is declared here on type 'Partial<{ size: SelectSize; ui: any; id: string; icon: string; color: any; class: any; options: string[] | { [key: string]: any; disabled?: boolean | undefined; }[]; popper: PopperOptions; ... 27 more ...; showCreateOptionWhen: "empty" | "always"; }> & Omit<...> & Record<...>'


Found 1 error in Untitled-1.vue:30

What version of vue-tsc are you using?

Valentin•9mo ago

https://stackblitz.com/edit/nuxt-ui-gyskbt?file=package.json Nuxt ui 2.15.2 https://nuxt.com/docs/guide/concepts/typescript @Wazbat

You may experience issues with the latest vue-tsc and vite-plugin-checker, used internally when type checking. For now, you may need to stay on v1 of vue-tsc, and follow these upstream issues for updates: fi3ework/vite-plugin-checker#306 and vuejs/language-tools#3969.

WazbatOP•9mo ago

Ahhh let me test that Ohh even with that I still get the same error with your code

C:\Users\Wazbat\Documents\code\whatever-my-folder-is-called> pnpm add -D vue-tsc@^1 typescript
Packages: +9 -9
+++++++++---------
Progress: resolved 1327, reused 1238, downloaded 0, added 9, done

devDependencies:
- vue-tsc 2.0.14
+ vue-tsc 1.8.27 (2.0.14 is available)

Done in 9s
PS C:\Users\Wazbat\Documents\code\whatever-my-folder-is-called> pnpm run validate:typescript     

> [email protected] validate:typescript C:\Users\Wazbat\Documents\code\whatever-my-folder-is-called
> nuxi typecheck

ℹ Using default Tailwind CSS file                                                                                             nuxt:tailwindcss 21:43:44
Untitled-1.vue:30:5 - error TS2322: Type 'boolean | undefined' is not assignable to type 'string | number | Record<string, any> | unknown[] | undefined'.

30     v-model="value"
       ~~~~~~~

  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]/node_modules/@nuxt/ui/dist/runtime/components/forms/SelectMenu.vue.d.ts:354:5
    354     modelValue: string | number | unknown[] | Record<string, any>;
            ~~~~~~~~~~
    The expected type comes from property 'modelValue' which is declared here on type 'Partial<{ size: SelectSize; ui: any; id: string; icon: string; color: any; class: any; options: string[] | { [key: string]: any; disabled?: boolean | undefined; }[]; popper: PopperOptions; ... 27 more ...; showCreateOptionWhen: "empty" | "always"; }> & Omit<...> & Record<...>'


Found 1 error in Untitled-1.vue:30


 ERROR  Command failed with exit code 2: vue-tsc --noEmit                                                                                       21:44:01

C:\Users\Wazbat\Documents\code\whatever-my-folder-is-called> pnpm add -D vue-tsc@^1 typescript
Packages: +9 -9
+++++++++---------
Progress: resolved 1327, reused 1238, downloaded 0, added 9, done

devDependencies:
- vue-tsc 2.0.14
+ vue-tsc 1.8.27 (2.0.14 is available)

Done in 9s
PS C:\Users\Wazbat\Documents\code\whatever-my-folder-is-called> pnpm run validate:typescript     

> [email protected] validate:typescript C:\Users\Wazbat\Documents\code\whatever-my-folder-is-called
> nuxi typecheck

ℹ Using default Tailwind CSS file                                                                                             nuxt:tailwindcss 21:43:44
Untitled-1.vue:30:5 - error TS2322: Type 'boolean | undefined' is not assignable to type 'string | number | Record<string, any> | unknown[] | undefined'.

30     v-model="value"
       ~~~~~~~

  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]/node_modules/@nuxt/ui/dist/runtime/components/forms/SelectMenu.vue.d.ts:354:5
    354     modelValue: string | number | unknown[] | Record<string, any>;
            ~~~~~~~~~~
    The expected type comes from property 'modelValue' which is declared here on type 'Partial<{ size: SelectSize; ui: any; id: string; icon: string; color: any; class: any; options: string[] | { [key: string]: any; disabled?: boolean | undefined; }[]; popper: PopperOptions; ... 27 more ...; showCreateOptionWhen: "empty" | "always"; }> & Omit<...> & Record<...>'


Found 1 error in Untitled-1.vue:30


 ERROR  Command failed with exit code 2: vue-tsc --noEmit                                                                                       21:44:01

https://stackblitz.com/edit/nuxt-ui-eqhn2j?file=package.json @Valentin

WazbatOP•9mo ago

I've opened a github issue for this https://github.com/nuxt/ui/issues/1710

GitHub

Unable to use boolean values with USelectMenu or null with UInput ·...

Environment Operating System: Windows_NT Node Version: v20.12.2 Nuxt Version: 3.10.3 CLI Version: 3.10.1 Nitro Version: 2.9.1 Package Manager: [email protected] Builder: - User Config: app, colorMode, ui,...

Gaming

Programming

null values in nuxt ui input

Did you find this page helpful?