Skip to content

Releases: nextcloud-libraries/nextcloud-vue

v9.0.0

25 Sep 11:08
@susnux susnux
v9.0.0
dd64239
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v9.0.0 Latest
Latest

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 NcSettingsInputText component 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:

  • NcDialog
  • NcModal
  • NcPopover

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 checked prop and update:checked event
    • NcActionCheckbox
    • NcActionRadio
    • NcCheckboxRadioSwitch
  • Removed value prop and update:value / input events:
  • The modelValue prop of NcActionRadio is expecting to have type string|number to be compared to value prop.
  • The value prop was renamed to modelValue, the update:value or input events were renamed to update:modelValue. This affects the following components:
    • NcActionInput
    • NcActionTextEditable
    • NcColorPicker
    • NcDateTimePicker
    • NcDateTimePickerNative
    • NcInputField
    • NcPasswordField
    • NcRichContenteditable
    • NcSelect
    • NcSelectTags
    • NcSettingsInputText
    • NcSettingsSelectGroup
    • NcTextArea
    • NcTextField
    • NcTimezonePicker

Removing the exact prop

The exact prop, previously used by router-link components, was removed.
This affects the following components:

  • NcActionRouter
  • NcAppNavigationItem
  • NcBreadcrumb
  • NcButton
  • NcListItem

Renaming icon slot of Nc*Field

The leading icon slot was changed from #default to #icon in Nc*Field components:

  • NcInputField
  • NcTextField
  • NcPasswordField

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:

  • isFullscreen is now provided as useIsFullscreen
  • isMobile is now provided as useIsMobile and isMobileState was removed.

The richEditing mixin can be replaced by just using the NcRichText component.

Other breaking changes

  • NcActions and NcAction*
    • The ariaHidden property is removed, please do no longer provide it, otherwise the root element will inherit incorrect aria-hidden.
  • NcAppSidebar
    • The closing and opening events were removed.
      They are directly emitted when the sidebar was opened when using v-if
      and also just duplicated the state of the open prop #5606
  • NcButton now does no longer has role="button" when used as a link (passing the href prop or a router link (to)).
    Instead, for accessibility and semantical correctness, has the link role.
  • NcColorPicker
    • The deprecated close event was removed in favor of the closed event, this was done for consistent event names.
  • NcCounterBubble
    • The default slot was removed
    • The count prop is now required #5997
  • NcHeaderMenu
    • open, close and cancel events were removed in favor of opened and closed events #6429
  • NcSettingsSection
    • The limitWidth was removed (the content is now always limited width) #5605
  • The isFullscreen, and isMobile mixins were removed. Use the according composables instead.
  • The clickOutsideOptions mixin is removed
  • The box-sizing: border-box is now default for following components and its content. This is done to match behavior of NcContent (as they can be mounted directly to body):
    • NcModal
    • NcPopover
  • NcDateTimePicker
    • The range property was removed in favor of type="datetime-range" (datetime ranges), type="date-range" (date only ranges), and type="time-range" (time only ranges).
    • The lang property was replaced with the locale property.
    • The formatter property was removed.
  • NcPopover is no longer a transparent wrapper over the floating-vue package.
    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.
  • NcRichContenteditable
    • NcAutoCompleteResult: The title prop was deprecated and is now removed in favor of the label prop
    • NcMentionBubble: The title prop was deprecated and is now removed in favor of the label prop
  • NcSelect
    • userSelect property was removed, instead just use the NcSelectUsers component
    • closeOnSelect property was removed in favor of keepOpen.
  • NcTextField:
    • The value 'arrowRight' for the trailingButtonIcon property was deprecated is now removed in favor of arrowEnd.
  • Tooltip directive was deprecated in v8 and is now removed.
    This was done in favor of native tooltips using the title attribute, which is better for accessibility.
    If you really need custom formatted tooltips, you can use NcPopover instead.
  • The useFormatDateTime composable - only exported from default entry point - is removed.
    Instead you can now use useFormatTime for formatting a time to a local date string or useFormatRelativeTime to format it to a humanized string like a day ago.
  • The usernameToColor function 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...
Read more
Assets 2
Loading

v9.0.0-rc.9

11 Sep 13:24
@Antreesy Antreesy
v9.0.0-rc.9
304c9d1
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v9.0.0-rc.9 Pre-release
Pre-release

What's Changed

🚀 Enhancements

  • feat(NcRadioGroup): add component to group radio buttons #7441 (susnux)

🐛 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 NcSettingsInputText component #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

Loading

v8.31.0

11 Sep 13:00
@susnux susnux
v8.31.0
89a7787
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
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

  • feat: add NcKbd component #7407
  • feat(NcRadioGroup): add component to group radio buttons #7474

🐛 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 NcSettingsInputText component #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
Loading

v9.0.0-rc.8

01 Sep 15:04
@Antreesy Antreesy
v9.0.0-rc.8
4b9f13f
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v9.0.0-rc.8 Pre-release
Pre-release

What's Changed

🚀 Enhancements

  • feat: add NcKbd component by @ShGKme in #7401
  • feat(NcAssistant*): provide components for consistent integrations design by @susnux in #7398

Full Changelog: v9.0.0-rc.7...v9.0.0-rc.8

Contributors

susnux and ShGKme
Loading

v8.30.0

01 Sep 13:06
@susnux susnux
v8.30.0
b21e660
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v8.30.0

What's Changed

🚀 Enhancements

  • feat(NcPopover): auto return focus to trigger button on close by @ShGKme in #5155
  • [stable8] feat(NcAssistant*): provide components for consistent integrations design by @backportbot[bot] in #7413
  • [stable8] feat(NcCheckboxRadioSwitch): Add support for a description field by @backportbot[bot] in #7395

Other Changes

  • [stable8] refactor: migrate reference widget related function to Typescript by @backportbot[bot] in #7417
  • [stable8] prepare release v8.30.0 by @susnux in #7420

Full Changelog: v8.29.2...v8.30.0

Contributors

susnux and ShGKme
Loading

v9.0.0-rc.7

28 Aug 10:33
@Antreesy Antreesy
v9.0.0-rc.7
f40b24c
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v9.0.0-rc.7 Pre-release
Pre-release

What's Changed

🚀 Enhancements

  • feat: add new border design for NcInputField and NcTextArea #7351 (susnux)
  • feat(NcCheckboxRadioSwitch): Add support for a description field #7378 (CarlSchwan)

🐛 Fixed bugs

  • fix(NcEmojiPicker): scope styles #7334 (ShGKme)
  • fix(NcPopover): scope styles to avoid leak #7330 (ShGKme)
  • fix(NcReferencePickerModal): scope styles #7333 (ShGKme)
  • fix(NcActionButtonGroup): scope styles #7332 (ShGKme)
  • fix(NcAppNavigationItem): icon-collapse has wrong colour #7329 (GretaD)
  • fix(NcAppNavigation): warn if neither ariaLabel nor ariaLabelledby is set #7350 (susnux)
  • chore: revert breaking changes and keep Nextcloud 31 support #7353 (susnux)
  • fix(NcAppNavigationSearch): add space before ellipsis #7372 (ShGKme)
  • fix(NcHeaderMenu): pause trap stack on opening #7370 (Antreesy)
  • fix(NcAppNavigationSettings): bring back filled icon for Nextcloud 31 #7397 (susnux)
  • fix(NcHeaderMenu): apply ariaLabel prop and add proper default values #7367 (susnux)

Other Changes

Full Changelog: v9.0.0-rc.6...v9.0.0-rc.7

Loading

v8.29.2

28 Aug 07:57
@susnux susnux
v8.29.2
90de2fa
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v8.29.2

What's Changed

🐛 Fixed bugs

  • fix(NcUserStatusIcon): legacy 32 check by @skjnldsv in #7320
  • [stable8] fix(NcDateTimePicker): lost styles in docs by @ShGKme in #7344
  • [stable8] fix(NcPopover): scope styles to avoid leak by @backportbot[bot] in #7341
  • [stable8] fix(NcReferencePickerModal): scope styles by @backportbot[bot] in #7347
  • [stable8] fix(NcEmojiPicker): scope styles by @backportbot[bot] in #7343
  • [stable8] fix(NcActionButtonGroup): scope styles by @backportbot[bot] in #7348
  • [stable8] fix(NcAppNavigationItem): icon-collapse has wrong colour by @GretaD in #7346
  • fix(NcNoteCard): adjust colors to work with Nextcloud 32+ by @susnux in #7361
  • [stable8] fix(l10n): add non-breaking space before ellipsis by @backportbot[bot] in #7373
  • [stable8] fix(NcHeaderMenu): pause trap stack on opening by @Antreesy in #7384
  • [stable8] feat: add new border design for NcInputField and NcTextArea by @backportbot[bot] in #7383
  • [stable8] fix: change icon cog into outline version on 32+ by @GretaD in #7394

Other Changes

  • [stable8] docs: fix CSS Modules support in Styleguidist by @backportbot[bot] in #7342
  • [stable8] chore(docs): fix css modules export names in styleguidist by @backportbot[bot] in #7387
  • [stable8] fix(NcUserStatusIcon): adjust icon colors by @backportbot[bot] in #7393
  • [stable8] fix(NcUserStatusIcon): adjust scoped names for style variables by @backportbot[bot] in #7400
  • [stable8] chore: v8.29.2 by @skjnldsv in #7321

Full Changelog: v8.29.1...v8.29.2

Contributors

susnux, GretaD, and 3 other contributors
Loading

v9.0.0-rc.6

20 Aug 11:32
@Antreesy Antreesy
v9.0.0-rc.6
8cbab89
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v9.0.0-rc.6 Pre-release
Pre-release

What's Changed

Notes

  • The package has dropped compatibility with Nextcloud before version 32.
    This mostly affects the visual appearance of components.
  • NcButton now does no longer has role="button" when used as a link (passing the href prop or a router link (to)).
    Instead, for accessibility and semantical correctness, has the link role.
  • NcColorPicker
    • The deprecated close event was removed in favor of the closed event, this was done for consistent event names.

🚀 Enhancements

  • fix(NcDateTimePicker): adjust input padding inline end #7208 (raimund-schluessler)
  • feat(NcColorPicker): add proper open-state handling #7212 (susnux)
  • feat(NcAppNavigationItem): add active as slot property to the "icon"-slot #7273 (susnux)
  • feat(NcButton): add border with a bottom shadow #7282 (susnux)

🐛 Fixed bugs

  • fix(NcAvatar): contacts menu is broken #7194 (ShGKme)
  • fix(NcActionInput): lazy load large children #7195 (ShGKme)
  • fix(NcButton): use correct type for to prop from VueRouter #7201 (susnux)
  • fix(NcButton): render with "to" and prevent wrong context crash #7100 (ShGKme)
  • fix(NcContent): flip skip action image in rtl mode #7202 (skjnldsv)
  • fix: remove asterisk from filename allowing checkout on Windows #7211 (ShGKme)
  • fix: correctly apply types so that type definitions are generated during build #7207 (susnux)
  • fix(NcColorPicker): use proper directional arrow icon for submit #7217 (susnux)
  • fix(NcBreadCrumb): correctly pass container for NcActions #7237 (susnux)
  • ci: use correct base branch when doing styling update on stable* #7256 (susnux)
  • fix(NcAvatar): orbital best-fit adaptive status icon #6004 (ShGKme)
  • fix(NcLoadingIcon): prevent height change from rotate transformation #7275 (Antreesy)
  • fix: 'Set operation on key "value" failed: target is readonly' #7239 (ShGKme)
  • fix(NcInputField, NcTextArea): remove placeholder on Nextcloud 32+ #7283 (susnux)
  • fix: auto-resolve focus trap stack, if was changed outside of controller #7277 (Antreesy)
  • fix: adjust color variable to work with Nextcloud 32+ #7311 (susnux)
  • fix(utils): legacy version detection #7313 (skjnldsv)

Other Changes

  • refactor(NcProgressBar): migrate component to Typescript and update docs #7138 (susnux)
  • fix: remove asterisk from filename #7215 (raimund-schluessler)
  • docs: clarify application containers and especially NcGuestContent #7160 (susnux)
  • refactor(NcAppNavigation): migrate component to Typescript and script-setup #7200 (susnux)
  • feat(NcUserStatusIcon): update status icons #7218 (Antreesy)
  • chore: work around bug in corepack blocking dependency updates #7213 (susnux)
  • fix(NcListItem): drop legacy check #7234 (Antreesy)
  • feat(NcHeaderMenu): apply alpha mask to icon slot #7242 (susnux)
  • docs: v9 will only provide visual compatibility with Nextcloud 32+ #7287 (susnux)
  • feat: change cog icon into the outline version #7299 (GretaD)
  • refactor(NcButton, NcNoteCard): use status text color for icons and text #7300 (susnux)
  • fix(utils): legacy check syntax adjust #7314 (skjnldsv)

Full Changelog: v9.0.0-rc.5...v9.0.0-rc.6

Loading

v8.29.1

19 Aug 14:58
@skjnldsv skjnldsv
v8.29.1
4bca27b
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v8.29.1

What's Changed

🐛 Fixed bugs

  • [stable8] fix(NcButton): ensure correct padding by @susnux in #7305
  • [stable8] fix: adjust color variable to work with Nextcloud 32+ by @backportbot[bot] in #7312
  • [stable8] fix(NcCheckboxRadioSwitch): ensure component has correct box sizing by @susnux in #7306
  • [stable8] fix(utils): legacy check syntax by @skjnldsv in #7315
  • [stable8] fix(NcColorPicker): fallback to zero color if no current color is set by @susnux in #7317

Other Changes

Full Changelog: v8.29.0...v8.29.1

Contributors

susnux and skjnldsv
Loading

v8.29.0

18 Aug 18:58
@susnux susnux
v8.29.0
72338ac
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v8.29.0

v8.29.0 (2025-08-18)

📝 Notes

NcColorPicker

The update:open event was undeprecated, instead proper open state handling of the component was added.
This means it is now possible to pass the open prop directly to the component,
it is implemented as two-way binding with the corresponding update:open event.
It is now discouraged to use the previous solution of relying on the shown prop of the underlying component.

Additionally for consistent event naming the close event was deprecated in favor of the closed event.
The closed event will be emitted after update:open (with payload false) was emitted and all transitions have finished.

🚀 Enhancements

  • feat(NcThemeProvider): allow to override the current theme for parts of the UI #7152
  • feat(dialogs/spawnDialog): separate spawning options from dialog props and allow Element as a container #6768
  • feat(NcColorPicker): add proper open-state handling #7214
  • feat(NcAppNavigationItem): add active as slot property to the "icon"-slot #7274
  • feat: add visual border for buttons on Nextcloud 32+ #7291
  • feat(NcUserStatusIcon): update status icons #7223
  • feat(NcHeaderMenu): apply alpha mask to icon slot #7243

🐛 Fixed bugs

  • perf(NcAvatar): ensure avatar does not add mutation observer #7168
  • perf(utils): ensure only 64px or 512px avatars are loaded #7153
  • fix(NcButton): force cursor pointer #7158 (ShGKme)
  • fix(NcInputField): remove browser injected clear button #7169
  • fix(NcModal): use --border-radius-container #7178
  • fix(useIsDarkTheme): provide default value to silence runtime warnings #7189
  • fix(NcAppSidebar): remove slot styling for buttons in the description #7190
  • fix(NcActionInput): register used NcColorPicker component #7198
  • fix(NcActionInput): lazy load large children #7197
  • fix(NcContent): flip skip action image in rtl mode #7205
  • fix(NcColorPicker): use proper directional arrow icon for submit #7219
  • fix(NcAvatar): orbital best-fit adaptive status icon #7260
  • fix(NcLoadingIcon): prevent height change from rotate transformation #7276
  • fix(NcInputField, NcTextareaField): remove placeholder on Nextcloud 32+ #7286 (susnux)
  • fix: migrate from _oc_config to initial state #7235 (Antreesy)
  • fix: auto-resolve focus trap stack, if was changed outside of controller #7304 (Antreesy)

Other Changes

  • refactor(functions): Make sure only named exports are used (usernameToColor) #7170 (susnux)
  • refactor: use secondary colors for buttons on Nextcloud 32+ #7301 (susnux)
  • chore: copy diff from stable8 changelog #7159
  • chore: align sorting of package.json #7162 (susnux)
  • docs: clarify application containers and especially NcGuestContent #7216
  • ci: update workflows from organization #7166 (susnux)
Loading