N
Nuxt2mo ago
Wazbat

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
Wazbat
Wazbat2mo 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
Valentin2mo 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
Wazbat
Wazbat2mo 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
Valentin2mo ago
Ohh it's a SelectMenu not a UInput
Wazbat
Wazbat2mo 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
Valentin2mo 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)
Wazbat
Wazbat2mo 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/@nuxt+ui@2.14.2_axios@1.6.7_nuxt@3.10.3_vite@4.5.2_vue@3.4.21/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/@nuxt+ui@2.14.2_axios@1.6.7_nuxt@3.10.3_vite@4.5.2_vue@3.4.21/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
Valentin2mo 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.
Wazbat
Wazbat2mo 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

> project-name@1.1.6 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/@nuxt+ui@2.14.2_axios@1.6.7_nuxt@3.10.3_vite@4.5.2_vue@3.4.21/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

> project-name@1.1.6 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/@nuxt+ui@2.14.2_axios@1.6.7_nuxt@3.10.3_vite@4.5.2_vue@3.4.21/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
Wazbat
Wazbat2mo 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: pnpm@8.3.1 Builder: - User Config: app, colorMode, ui,...
Want results from more Discord servers?
Add your server
More Posts