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 1 commit into
base: v3
Choose a base branch
from
Open

docs(migration): update changed components #5655

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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" />
</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.


### Changed composables

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