Show and Hide Prop Migration
BootstrapVueNext standardizes visibility control around v-model and no*-prefixed rendering props.
Show and Hide Prop Migration
Summary
BootstrapVueNext standardizes visibility control around v-model and no*-prefixed rendering props.
Affected APIs
- BCollapse
- BModal
- BPlaceholder
- BToast
Breaking Change
We have made an effort to standardize the names and behaviors of props that are related to the showing and hiding of components and sub-components.
The primary reactive way to control the visibility of a component is generally by use of the v-model rather than visible as in BCollapse, BModal, BToast. Note that show and visible are still supported for specifying the initial visibility of these components.
Rather than using hide as a prefix to specify that you don't want a sub-component to be rendered, we've moved to using no as the prefix. For instant in BPlaceholder, hideHeader becomes noHeader. Similarly we use the 'no' prefix in place of 'skip' in places like BCollapse where skipAnimation becomes noAnimation.
The properties and components that are affected by this change are shown in the following table:
| Prop | Old Prop | Description | Components |
|---|---|---|---|
| initial-animation | appear | When set, enables the initial animation on mount | |
| lazy | lazy | When set, the content will not be mounted until opened | |
| model-value | visible | Controls the visibility of the component | |
| no-animation | skip-animation | When set, disables the animation | |
| no-backdrop | hide-backdrop | Disables rendering of the backdrop | |
| no-ellipsis | hide-ellipsis | Do not show ellipsis buttons | |
| no-fade | skip-animation | Alias for `noAnimation` | |
| no-goto-end-buttons | hide-goto-end-buttons | Hides the go to first and go to last page buttons | |
| no-header | hide-header | Disables rendering of the header | |
| no-header-close | hide-header-close | Disables rendering of the header close button | |
| no-wrapper | skip-wrapper | Do not render the dropdown wrapper element | |
| show | When set, and prop 'visible' is false on mount, will animate from closed to open on initial mount. Mainly to help with template show. Use model-value for reactive show/hide | ||
| trans-props | Transition properties | ||
| unmount-lazy | lazy | When set and `lazy` is true, the content will be unmounted when closed | |
| visible | visible | When 'true', open without animation |
Migration Notes
- Extracted from the canonical BootstrapVue → BootstrapVueNext migration guide.
Safe Automatic Rewrite
No. This entry includes behavioral or structural changes and should be reviewed manually before applying automated transforms.
Related Migrations
- None