Releases: nextcloud-libraries/nextcloud-vue
v9.3.0
What's Changed
🚀 Enhancements
- feat(NcAppSettingsDialog): add version on the bottom and
noVersionprop to disable it by @ShGKme in #7837 - fix(NcActions): introduce 'size' prop by @Antreesy in #7847
- feat(NcRichText): add 'Copy to clipboard' button for code blocks by @Antreesy in #7841
🐛 Fixed bugs
- fix(NcPasswordField): respect
checkPasswordStrengthfor input validation by @Antreesy in #7845 - fix(NcTextField): helper text icon is too large by @ShGKme in #7856
- fix(NcFormBox): use default text color in items by @ShGKme in #7854
- fix(NcAvatar): do no request avatar image if icon slot provided by @Antreesy in #7891
Other Changes
- ci(dependabot): Use auto merge instead of deprecated option by @nickvergessen in #7835
- Updates for project Nextcloud vue library by @transifex-integration[bot] in #7840
- Updates for project Nextcloud vue library by @transifex-integration[bot] in #7858
- docs: Move to more outline icons by @nickvergessen in #7860
- docs: Move more icons to outline by @nickvergessen in #7862
- fix(NcActions): handle expensive height computation by popover library by @Antreesy in #7778
- Updates for project Nextcloud vue library by @transifex-integration[bot] in #7867
- chore: refactor deprecated :deep selector by @ShGKme in #7875
- Updates for project Nextcloud vue library by @transifex-integration[bot] in #7876
Full Changelog: v9.2.0...v9.3.0
v9.2.0
What's Changed
📝 Notes
NcAppSettingsSectionShortcutshas been renamed toNcAppSettingsShortcutsSectionbut still available by the previous nameNcAppSettingsDialoghas started the process of migration to the new design. It may break the existing settings layout. Uselayoutprop to partially revert the change or migrate to useNcFormBoxandNcFormGroupcomponents in the settings sections.
🚀 Enhancements
- feat: add NcFormGroup by @ShGKme in #7689
- feat: add
NcFormBoxand adjustNcRadioGrouptoNcFormboxandNcFormGroupby @ShGKme in #7690 - feat(NcRadioGroup): deprecate
labelHiddenprop in favor ofhideLabelby @susnux in #7771 - feat: add NcFormBoxButton by @ShGKme in #7779
- feat: add NcFormBoxSwitch by @ShGKme in #7781
- feat: add NcFormBoxCopyButton by @ShGKme in #7787
- feat(NcAppSettingsDialog): adjust design for new form elements, add section descriptions and optional switch to legacy design by @ShGKme in #7797
- feat: NcAppSettingsSectionShortcuts -> NcAppSettingsShortcutsSection by @ShGKme in #7814
🐛 Fixed bugs
- fix(NcRichText): start heading from h4 by @ShGKme in #7748
- fix(NcFormGroup): remove margin when no label/description by @ShGKme in #7764
- fix(NcFormGroup): decrease gap between label and content by @ShGKme in #7775
- fix(NcFormBox*): user-select: none on Safari as well by @ShGKme in #7792
- fix(NcRichContenteditable): keep previous cursor position on focus by @Antreesy in #7791
- fix(NcHotkeyList): align with form labels by @ShGKme in #7807
- fix(NcHotkeyList): align with the section by @ShGKme in #7811
- fix(NcActions): improve performance by only computing popover maxHeight on demand by @Antreesy in #7808
- fix(NcListItem): do not mount NcAction until necessary by @ShGKme in #7817
Other Changes
- Updates for project Nextcloud vue library by @transifex-integration[bot] in #7714
- Updates for project Nextcloud vue library by @transifex-integration[bot] in #7750
- Updates for project Nextcloud vue library by @transifex-integration[bot] in #7751
- chore(docs): update docs link titles by @ShGKme in #7768
- chore(docs): correct min supported Nextcloud version by @ShGKme in #7774
- Updates for project Nextcloud vue library by @transifex-integration[bot] in #7783
- Updates for project Nextcloud vue library by @transifex-integration[bot] in #7794
- Updates for project Nextcloud vue library by @transifex-integration[bot] in #7798
- chore(docs): do not minimize docs and add examples code highlight by @ShGKme in #7784
- chore(docs): optionally set docs server port via VUE_STYLEGUIDIST_PORT by @ShGKme in #7805
- Updates for project Nextcloud vue library by @transifex-integration[bot] in #7809
- chore: bump node and npm dev versions by @susnux in #7785
- Updates for project Nextcloud vue library by @transifex-integration[bot] in #7819
Full Changelog: v9.1.0...v9.2.0
v8.34.0
What's Changed
📝 Notes
NcAppSettingsSectionShortcutshas been renamed toNcAppSettingsShortcutsSectionbut still available by the previous name
🚀 Enhancements
- [stable8] feat: add NcFormGroup by @backportbot[bot] in #7762
- [stable8] feat: add
NcFormBoxand adjustNcRadioGrouptoNcFormBoxandNcFormGroupby @backportbot[bot] in #7765 - [stable8] feat: add NcFormBoxButton by @backportbot[bot] in #7789
- [stable8] feat(NcRadioGroup): deprecate
labelHiddenprop in favor ofhideLabelby @backportbot[bot] in #7772 - [stable8] feat: add NcFormBoxCopyButton by @backportbot[bot] in #7793
- [stable8] feat: add NcFormBoxSwitch by @backportbot[bot] in #7795
- [stable8] feat(NcAppSettingsDialog): adjust design for new form elements, add section descriptions by @backportbot[bot] in #7802
- [stable8] feat: NcAppSettingsSectionShortcuts -> NcAppSettingsShortcutsSection by @backportbot[bot] in #7816
🐛 Fixed bugs
- [stable8] fix(NcFormGroup): remove margin when no label/description by @backportbot[bot] in #7780
- [stable8] fix(NcFormGroup): decrease gap between label and content by @ShGKme in #7782
- [stable8] fix(NcFormBox*): user-select: none on Safari as well by @backportbot[bot] in #7796
- [stable8] fix(NcRichContenteditable): keep previous cursor position on focus by @backportbot[bot] in #7804
- [stable8] fix(NcHotkeyList): align with form labels by @backportbot[bot] in #7810
- [stable8] fix(NcHotkeyList): align with the section by @backportbot[bot] in #7812
- [stable8] fix(NcActions): improve performance by only computing popover maxHeight on demand by @backportbot[bot] in #7815
- [stable8] fix(NcListItem): do not mount NcAction until necessary by @backportbot[bot] in #7818
- [stable8] fix(NcRichText): start heading from h4 by @ShGKme in #7821
- [stable8] fix(NcFormBoxButton): router check on Vue 2 by @ShGKme in #7822
Other Changes
- [stable8] chore(docs): update docs link titles by @backportbot[bot] in #7770
- [stable8] chore: update workflows from organization by @susnux in #7763
- [stable8] chore(docs): add missing backports around supported versions and links by @ShGKme in #7773
- [stable8] chore(docs): correct min supported Nextcloud version by @backportbot[bot] in #7776
- [stable8] chore(docs): do not minimize docs and add examples code highlight by @backportbot[bot] in #7803
- [stable8] chore: update Node and NPM version in dev engines by @susnux in #7786
- [stable8] chore(docs): optionally set docs server port via VUE_STYLEGUIDIST_PORT by @backportbot[bot] in #7806
Full Changelog: v8.33.0...v8.34.0
v9.1.0
What's Changed
🚀 Enhancements
- feat(NcChip): add error, success and warning variants by @DorraJaouad in #7652
- feat(NcAppSettingsSection): add
orderprop, ensure intended order in navigation list by @Antreesy in #7636 - feat: add
NcAppSettingsSectionShortcuts,NcHotkeyListandNcHotkeyby @ShGKme in #7633
🐛 Fixed bugs
- fix(NcInputField): use empty string to fix label position by @susnux in #7630
- chore: switch dependency for MD5 to
ts-md5by @susnux in #7623 - fix(NcEmptyContent): use name as label by @susnux in #7634
- fix(NcRadioGroupButton): scope expensive CSS selectors by @Antreesy in #7661
- fix(NcAppContentDetailsToggle): Hide navigation toggle on mobile by @mejo- in #7697
Other Changes
- refactor(NcAppSidebarTabs): use custom components for tab buttons by @susnux in #7516
- refactor(NcAppSettingsSection): migrate to
<script setup lang="ts">by @ShGKme in #7651 - refactor: use named export for logger by @ShGKme in #7655
Full Changelog: v9.0.1...v9.1.0
v8.33.0
What's Changed
🚀 Enhancements
- [stable8] feat(NcChip): add error, success and warning variants by @backportbot[bot] in #7653
- [stable8] feat(NcAppSettingsSection): add
orderprop, ensure intended order in navigation list by @backportbot[bot] in #7656 - [stable8] feat: add
NcAppSettingsSectionShortcuts,NcHotkeyListandNcHotkeyby @backportbot[bot] in #7696
🐛 Fixed bugs
- [stable8] fix(NcInputField): use empty string to fix label position by @susnux in #7637
- [stable8] fix(NcEmptyContent): use name as label by @backportbot[bot] in #7649
- [stable8] fix(NcRadioGroupButton): scope expensive CSS selectors by @backportbot[bot] in #7662
- [stable8] fix(NcAppContentDetailsToggle): Hide navigation toggle on mobile by @mejo- in #7698
- [stable8] fix(NcAppNavigationSettings): migrate to NcButton component by @mejo- in #7700
Other Changes
- [stable8] chore: adjust heading in changelog to match version by @susnux in #7622
- [stable8] refactor(NcAppSettingsSection): migrate to
<script setup lang="ts">by @backportbot[bot] in #7654
Full Changelog: v8.32.0...v8.32.1
v9.0.1
v8.32.0
What's Changed
🚀 Enhancements
- [stable8] feat(NcColorPicker): allow to clear selected value by @backportbot[bot] in #7531
- [stable8] feat(NcModal): add new
closeButtonOutsideprop and deprecatedcloseButtonContainedby @Antreesy in #7553
🐛 Fixed bugs
- [stable8] fix(useHotKey): use correct callback type by @backportbot[bot] in #7511
- [stable8] fix(NcRadioGroupButton): adjust hight if needed by @backportbot[bot] in #7554
- [stable8] fix(NcAvatar): log error and URL on error by @ChristophWurst in #7561
- [stable8] fix(console): fix log context object by @ChristophWurst in #7563
- [stable8] fix(NcAppContent): avoid double content mount by @backportbot[bot] in #7619
Other Changes
- [stable8] refactor(NcColorPicker): migrate component to Typescript and script-setup by @backportbot[bot] in #7532
- [stable8] fix(NcAppContent): add reactivity to pane config key by @GVodyanov in #7573
- [stable8] refactor(NcAppSettingsDialog): migrate to Typescript and script-setup by @backportbot[bot] in #7517
- chore: prepare release of v8.32.0 by @susnux in #7620
Full Changelog: v8.31.0...v8.32.0
v9.0.0
v9.0.0 (2025-09-25)
💥 Breaking Changes
- The package now uses Vue 3 instead of Vue 2.7
- The package is now a native ESM package and the CommonJS entry points were dropped!
- The package has dropped compatibility with Nextcloud before version 31.
This mostly affects the visual appearance of components. - The
NcSettingsInputTextcomponent was deprecated in v8 and is now removed.
Plugin registering removed
The plugin registering all the components and directives globally is removed.
Instead use local registration of components and directives.
If you really need an alternative we recommend using unplugin-vue-components.
Import paths changed
The old import paths like @nextcloud/vue/dist/Components/NcComponent.js were removed.
Instead use the new ones (@nextcloud/vue/components/NcComponent).
Example shell command to do the refactoring:
PATTERN='s,@nextcloud/vue/dist/([^/]+)/([^.]+).js,@nextcloud/vue/\L\1\E/\2,'
find src \
-name "*.vue" \
-exec sed -i -re "$PATTERN" \{\} +Container components now default to box-sizing: border-box
For container components that can be directly mounted to <body> the box-sizing was adjusted to match the behavior of NcContent.
The box-sizing: border-box is now default for following components and its content:
NcDialogNcModalNcPopover
Consistent usage of modelValue prop
All input elements were refactored to use the modelValue prop instead of the now removed value / checked prop and emit the update:modelValue event instead of the removed update:checked / update:value / input events.
This which allows consistent using of v-model.
Affected components:
- Removed
checkedprop andupdate:checkedeventNcActionCheckboxNcActionRadioNcCheckboxRadioSwitch
- Removed
valueprop andupdate:value/inputevents: - The
modelValueprop ofNcActionRadiois expecting to have typestring|numberto be compared tovalueprop. - The
valueprop was renamed tomodelValue, theupdate:valueorinputevents were renamed toupdate:modelValue. This affects the following components:NcActionInputNcActionTextEditableNcColorPickerNcDateTimePickerNcDateTimePickerNativeNcInputFieldNcPasswordFieldNcRichContenteditableNcSelectNcSelectTagsNcSettingsInputTextNcSettingsSelectGroupNcTextAreaNcTextFieldNcTimezonePicker
Removing the exact prop
The exact prop, previously used by router-link components, was removed.
This affects the following components:
NcActionRouterNcAppNavigationItemNcBreadcrumbNcButtonNcListItem
Renaming icon slot of Nc*Field
The leading icon slot was changed from #default to #icon in Nc*Field components:
NcInputFieldNcTextFieldNcPasswordField
Boolean props default to false
Some boolean props that have been deprecated in favor of alternatives with default value false,
are now removed. Following components have been adjusted:
| Component | Removed deprecated prop | New alternative |
|---|---|---|
NcAppContent |
allowSwipeNavigation |
disabledSwipe |
NcAvatar |
showUserStatus |
hideStatus |
NcAvatar |
showUserStatusCompact |
verboseStatus |
NcModal |
closeButtonContained |
closeButtonOutside |
NcModal |
enableSwipe |
disableSwipe |
NcModal |
canClose |
noClose |
NcDialog |
canClose |
noClose |
NcPopover |
focusTrap |
noFocusTrap |
Additionally the default value closeOnClickOutside for NcModal was aligned with NcDialog and now defaults to false.
Removal of type and nativeType props
The type property for button components (NcButton, NcActions, NcDialogButton) was deprecated for the usage with color variants like primary.
The fallback behavior was removed, type now only allows the native HTML button type like button, reset or submit.
Instead use the variant property for the color variant.
The nativeType property was removed in favor of type.
<!-- Old: Nextcloud Vue v8 -->
<NcButton type="primary" native-type="submit">Submit</NcButton>
<!-- New: Nextcloud Vue v9 -->
<NcButton type="submit" variant="primary">Submit</NcButton>Event names
To have a consistent naming for custom event the following events were deprecated
and now are removed in favor of a new consistent event name:
Component | Old event | New event
---------------|-----------------|----------------
NcAppContent | resize:list | resizeList
NcRichText | interact:todo | interactTodo
Mixins are removed
Mixins only work in Options API and are in general not recommended by Vue anymore:
In Vue 2, mixins were the primary mechanism for creating reusable chunks of component logic. While mixins continue to be supported in Vue 3, Composable functions using Composition API is now the preferred approach for code reuse between components.
As this library also uses composition API now all required mixins have been migrated to composables which work in Options API and Composition API.
Especially the following are now provided as composables:
isFullscreenis now provided asuseIsFullscreenisMobileis now provided asuseIsMobileandisMobileStatewas removed.
The richEditing mixin can be replaced by just using the NcRichText component.
Other breaking changes
NcActionsandNcAction*- The
ariaHiddenproperty is removed, please do no longer provide it, otherwise the root element will inherit incorrect aria-hidden.
- The
NcAppSidebar- The
closingandopeningevents were removed.
They are directly emitted when the sidebar was opened when usingv-if
and also just duplicated the state of theopenprop #5606
- The
NcButtonnow does no longer hasrole="button"when used as a link (passing thehrefprop or a router link (to)).
Instead, for accessibility and semantical correctness, has thelinkrole.NcColorPicker- The deprecated
closeevent was removed in favor of theclosedevent, this was done for consistent event names.
- The deprecated
NcCounterBubble- The default slot was removed
- The
countprop is now required #5997
NcHeaderMenuopen,closeandcancelevents were removed in favor ofopenedandclosedevents #6429
NcSettingsSection- The
limitWidthwas removed (the content is now always limited width) #5605
- The
- The
isFullscreen, andisMobilemixins were removed. Use the according composables instead. - The
clickOutsideOptionsmixin is removed - The
box-sizing: border-boxis now default for following components and its content. This is done to match behavior ofNcContent(as they can be mounted directly tobody):NcModalNcPopover
NcDateTimePicker- The
rangeproperty was removed in favor oftype="datetime-range"(datetime ranges),type="date-range"(date only ranges), andtype="time-range"(time only ranges). - The
langproperty was replaced with thelocaleproperty. - The
formatterproperty was removed.
- The
NcPopoveris no longer a transparent wrapper over thefloating-vuepackage.
Instead only use the documented properties and events.
If you find some use cases not covered by the documented interface, please open a feature request.NcRichContenteditableNcAutoCompleteResult: Thetitleprop was deprecated and is now removed in favor of thelabelpropNcMentionBubble: Thetitleprop was deprecated and is now removed in favor of thelabelprop
NcSelectuserSelectproperty was removed, instead just use theNcSelectUserscomponentcloseOnSelectproperty was removed in favor ofkeepOpen.
NcTextField:- The value
'arrowRight'for thetrailingButtonIconproperty was deprecated is now removed in favor ofarrowEnd.
- The value
Tooltipdirective was deprecated in v8 and is now removed.
This was done in favor of native tooltips using thetitleattribute, which is better for accessibility.
If you really need custom formatted tooltips, you can useNcPopoverinstead.- The
useFormatDateTimecomposable - only exported from default entry point - is removed.
Instead you can now useuseFormatTimefor formatting a time to a local date string oruseFormatRelativeTimeto format it to a humanized string like a day ago. - The
usernameToColorfunction is named exported instead of a default export.
This was done to have consistent export types.
🚀 Enhancements
- Allow writing components using Typescript and provide type definitions for
NcButton#4525 (susnux) - feat(NcDateTimePicker): add time range picker and align naming #6728 (susnux)
- feat(dialogs/spawnDialog): separate spawning options from dialog props and allow Element as a container #6756 ([ShGKme](https://gith...
v9.0.0-rc.9
What's Changed
🚀 Enhancements
🐛 Fixed bugs
- fix(NcAssistantIcon): adjust gradient for dark theme #7426 (susnux)
- fix(NcCheckboxContent): limit wrapper width #7445 (Antreesy)
- fix(NcRichText): correctly render empty children list #7447 (Antreesy)
- fix: revert renaming template refs resulting in a breaking change #7448 (ShGKme)
- fix(NcDateTimePicker): use proper day names #7473 (susnux)
- fix(NcCheckboxRadioSwitch): ensure label less radio has proper size #7471 (susnux)
- fix(NcDateTime): adjust for bidi support #7484 (susnux)
- fix(NcAppNavigationItem): ensure to pass boolean where needed #7489 (susnux)
- fix(NcReferenceWidget): harden checks for reference = null #7478 (Antreesy)
- fix(NcAvatar): make min status size visually accessible #7476 (DorraJaouad)
- fix(NcRadioGroup): fieldsets always need a label for accessibility #7483
- fix(usernameToColor): restore original color algorithm #7470
Other Changes
- docs: enhance NcAppSidebar documentation #6913 (Antreesy)
- chore!: deprecate and remove
NcSettingsInputTextcomponent #7486 (susnux) - chore(NcCheckboxRadioSwitch): deprecate button variant in favor of
NcRadioGroup#7490 (susnux)
Full Changelog: v9.0.0-rc.8...v9.0.0-rc.9
v8.31.0
Changelog
v8.31.0 (2025-09-11)
📝 Notes
The NcSettingsInputText component was deprecated,
it is no longer used by Nextcloud or Nextcloud apps and not recommended to be used for design reasons.
🚀 Enhancements
🐛 Fixed bugs
- fix(NcAssistantIcon): adjust gradient for dark theme #7430
- fix(NcPopover): regression with
this.getPopoverTriggerContainerElement is not a function#7443 (max-nextcloud) - fix(NcCheckboxRadioSwitch): ensure label less radio has proper size #7477
- fix(NcDateTime): adjust for bidi support #7485
- fix(NcReferenceWidget): harden checks for reference = null #7493
- fix(NcRadioGroup): fieldsets always need a label for accessibility #7495
- fix(NcAvatar): make min status size visually accessible #7480
- fix(NcAppNavigationItem): ensure to pass boolean where needed #7491
Other Changes
- chore(NcCheckboxRadioSwitch): deprecate button variant in favor of
NcRadioGroup#7492 - chore: deprecate
NcSettingsInputTextcomponent #7488 - chore: migrate to ESLint 9 and @nextcloud/eslint-config 9 #7418 (ShGKme)
- chore(lint): fix #7425 (ShGKme)
- chore(test): explicitly import from jest/globals to simplify migration to/from Vitest #7424 (ShGKme)
- docs: typos in 8.30.0 changelog #7422