Skip to content

fix(deps): update dependency @nextcloud/vue to v9 (main) #2077

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

Jump to bottom
Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(deps): update dependency @nextcloud/vue to v9 (main) #2077

wants to merge 1 commit into from

Conversation

@renovate
Copy link
Contributor

@renovate renovate bot commented Sep 27, 2025 •
edited
Loading

This PR contains the following updates:

Package Change Age Confidence
@nextcloud/vue ^8.31.0 -> ^9.1.0 age confidence

Warning

Some dependencies could not be looked up. Check the Dependency Dashboard for more information.

Release Notes

nextcloud-libraries/nextcloud-vue (@​nextcloud/vue)

v9.1.0

Compare Source

Full Changelog

🚀 Enhancements
  • feat(NcChip): add error, success and warning variants #​7652 (DorraJaouad)
  • feat(NcAppSettingsSection): add order prop, ensure intended order in navigation list #​7636 (Antreesy)
  • feat: add NcAppSettingsSectionShortcuts, NcHotkeyList and NcHotkey #​7633 (ShGKme)
🐛 Fixed bugs
Other Changes
  • refactor(NcAppSidebarTabs): use custom components for tab buttons #​7516 (susnux)
  • refactor(NcAppSettingsSection): migrate to <script setup lang="ts"> #​7651 (ShGKme)
  • refactor: use named export for logger #​7655 (ShGKme)

v9.0.1

Compare Source

Full Changelog

🐛 Fixed bugs
  • fix(NcAppContent): avoid double content mount #​7590 (ShGKme)
  • fix(NcAppContent): add reactivity to pane config key #​7574
Other Changes
  • Updated translations

v9.0.0

Compare Source

Full Changelog

💥 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,@&#8203;nextcloud/vue/dist/([^/]+)/([^.]+).js,@&#8203;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)
  • feat(dialogs/spawnDialogs)!: do not toRaw the result #​6760 (ShGKme)
  • feat(dialogs/spawnDialog): return promise with the result #​6758 (ShGKme)
  • feat(dialogs/spawnDialog)!: replace onClose callback with Promise #​6759 (ShGKme)
  • feat(NcChip): allow to define the actions container #​6813 (susnux)
  • feat(NcActionButton): introduce description prop #​6932 (Antreesy)
  • feat: add useFormatRelativeTime composable #​7067 (susnux)
  • feat(NcPasswordField): allow to set visibility state #​7135 (susnux)
  • feat(NcThemeProvider): allow to override the current theme for parts of the UI #​6764 (susnux)
  • 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)
  • feat: add new border design for NcInputField and NcTextArea #​7351 (susnux)
  • feat(NcCheckboxRadioSwitch): Add support for a description field #​7378 (CarlSchwan)
  • feat: add NcKbd component #​7401 (ShGKme)
  • feat(NcAssistant*): provide components for consistent integrations design #​7398 (susnux)
  • feat(NcRadioGroup): add component to group radio buttons #​7441 (susnux)
  • feat(NcColorPicker): allow to clear selected value #​7363 (susnux)
  • feat(NcPopover): replace closeOnClickOutside with noCloseOnClickOutside #​7525 (ShGKme)
🐛 Fixed bugs
Changed

Configuration

📅 Schedule: Branch creation - "every weekend" in timezone Europe/Berlin, Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

  • If you want to rebase/retry this PR, check this box

This PR was generated by Mend Renovate. View the repository job log.

@renovate renovate bot requested review from blizzz and enjeck as code owners September 27, 2025 00:30
@renovate renovate bot added 3. to review Waiting for reviews dependencies Pull requests that update a dependency file labels Sep 27, 2025
@renovate
Copy link
Contributor Author

renovate bot commented Sep 27, 2025 •
edited
Loading

⚠️ Artifact update problem

Renovate failed to update an artifact related to this branch. You probably do not want to merge this PR as-is.

♻ Renovate will retry this branch, including artifacts, only when one of the following happens:

  • any of the package files in this branch needs updating, or
  • the branch becomes conflicted, or
  • you click the rebase/retry checkbox if found above, or
  • you rename this PR's title to start with "rebase!" to trigger it manually

The artifact failure details are included below:

File name: package-lock.json
npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: @nextcloud/dialogs@6.3.2
npm error Found: @nextcloud/vue@9.1.0
npm error node_modules/@nextcloud/vue
npm error   @nextcloud/vue@"^9.1.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peer @nextcloud/vue@"^8.24.0" from @nextcloud/dialogs@6.3.2
npm error node_modules/@nextcloud/dialogs
npm error   @nextcloud/dialogs@"^6.3.2" from the root project
npm error
npm error Conflicting peer dependency: @nextcloud/vue@8.33.0
npm error node_modules/@nextcloud/vue
npm error   peer @nextcloud/vue@"^8.24.0" from @nextcloud/dialogs@6.3.2
npm error   node_modules/@nextcloud/dialogs
npm error     @nextcloud/dialogs@"^6.3.2" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /runner/cache/others/npm/_logs/2025-10-29T05_13_31_070Z-eresolve-report.txt
npm error A complete log of this run can be found in: /runner/cache/others/npm/_logs/2025-10-29T05_13_31_070Z-debug-0.log

@renovate renovate bot added the 3. to review Waiting for reviews label Sep 27, 2025
@github-actions github-actions bot enabled auto-merge September 27, 2025 00:30
@renovate renovate bot force-pushed the renovate/main-nextcloud-vue-9.x branch from e80cf40 to 6972005 Compare October 6, 2025 20:25
@enjeck enjeck force-pushed the renovate/main-nextcloud-vue-9.x branch from 6972005 to 480d9f4 Compare October 13, 2025 13:49
@renovate renovate bot force-pushed the renovate/main-nextcloud-vue-9.x branch from 480d9f4 to ff65349 Compare October 13, 2025 14:15
@enjeck enjeck force-pushed the renovate/main-nextcloud-vue-9.x branch from ff65349 to aa77a7f Compare October 13, 2025 14:27
@renovate renovate bot force-pushed the renovate/main-nextcloud-vue-9.x branch 2 times, most recently from e9a45aa to fcce074 Compare October 23, 2025 07:01
@renovate
fix(deps): update dependency @nextcloud/vue to v9
7e53827 
Signed-off-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
@renovate renovate bot force-pushed the renovate/main-nextcloud-vue-9.x branch from fcce074 to 7e53827 Compare October 29, 2025 05:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@github-actions github-actions[bot] github-actions[bot] approved these changes

@enjeck enjeck Awaiting requested review from enjeck enjeck is a code owner

@blizzz blizzz Awaiting requested review from blizzz blizzz is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

3. to review Waiting for reviews dependencies Pull requests that update a dependency file

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant