Skip to content

docs(migration): update changed components #5655

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
al1maher wants to merge 2 commits into
base: v3
Choose a base branch
from
+25 −0
Open

docs(migration): update changed components #5655

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2700512
docs(migration): update changed components
Dec 11, 2025
d6fc356
docs(v3-migration): correcting the new way modals can be undismissable
Dec 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions docs/content/1.getting-started/2.migration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -448,6 +448,31 @@ This change affects the following components: `Modal`, `Popover`, `Slideover`, `
This change affects the following components: `Modal`, `Slideover`.
::

- The `prevent-close` prop in `Modal` and `Slideover` has been removed in favor of the `dismissible` prop that takes a boolean value:
```diff
<template>
- <UModal prevent-close />
+ <UModal :dismissible="true" />
Copy link
Member

@benjamincanac benjamincanac Dec 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
+ <UModal :dismissible="true" />
+ <UModal :dismissible="false" />

</template>
```

- The `v-model` directive in `Pagination` has been renamed to `v-model:page` to control current page:

```diff
<template>
- <UPagination v-model="page" />
+ <UPagination v-model:page="page" />
</template>
```

- The `change` event in `Select`, `SelectMenu` and `RadioGroup` now emits the native `change` event, not the new chnage value, which is now emitted in the `update:modelValue` event:

```diff
<template></template>
- <USelectMenu v-model="country" :items="countries" @change="console.log(newVal)" />
+ <USelectMenu v-model="country" :items="countries" @update:modelValue="console.log(newVal)" />
```
Comment on lines +468 to +474
Copy link
Member

@benjamincanac benjamincanac Dec 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you mean by this? 🤔 The @change event still exists in v3.

Copy link
Contributor Author

@al1maher al1maher Dec 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I noticed that in v2, I used to use the @change event to capture the new selected value. It used to give the new value, same behavior as @update:model-value event. But in v3, the @change event returns the native HTML change event, so I had to use @update:model-value instead to keep the same behavior.

Copy link
Member

@benjamincanac benjamincanac Dec 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see, I don't think it's necessary to mention though the recommended way was always v-model: https://ui2.nuxt.com/components/select-menu

Copy link
Contributor Author

@al1maher al1maher Dec 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's what I thought too though since the behavior changed, I felt it would be worth mentioned, as it can break functionality in certain cases.

Anyhow, tell me your final thoughts so that I can adjust, also should I make the same changes on v4 branch on a sperate PR?

Copy link
Member

@benjamincanac benjamincanac Dec 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok let's keep it this way. I added a suggestion but once it's done it would be nice to do this on v4 as well yes 😊


### Changed composables

- The `useToast()` composable `timeout` prop has been renamed to `duration`:
Expand Down
Loading