olheem
December 11, 2023, 7:41pm
1
Hi!
I am developing my first app following the tutorial “Developing a complete app with a navigation bar and database ”. How can I upgrade to vue v8.x?
@olheem there is an issue on Github with a migration guide
opened 08:17PM - 15 Jun 23 UTC
1. to develop
technical debt
If we plan to use v8 with upcoming Nextcloud 28 then some apps and server have t… o be adjusted:
* `NcMultiselect` and `NcMultiselectTags` was removed and needs to be replaced with `NcSelect` and `NcSelectTags`
* Server is clean but apps still use it: [currently 74 files](https://github.com/search?q=org%3Anextcloud+NcMultiselect+%28language%3AJavaScript+OR+language%3AVue+OR+language%3ATypeScript%29&type=code)
* `NcPopoverMenu` was removed and needs to be replaced [\#4081](https://github.com/nextcloud/nextcloud-vue/pull/4081)
* [ ] app - [`deck`](https://github.com/nextcloud/deck/blob/4ddbf472c359533e071ac51accc2cab6881504e5/src/components/cards/AvatarList.vue#L54)
* [ ] app - [`groupfolder`](https://github.com/nextcloud/groupfolders/blob/9997d92ae0f4f4ec60385d4020c0d30aa80fc9d5/src/components/AclStateButton.vue#L66)
* [ ] app - [`social`](https://github.com/nextcloud/social/blob/c53e47cfa95d8a396bbcbf723986d32cc76974c6/src/mixins/popoverMenu.js#L23)
* [x] server - [`updatenotification`](https://github.com/nextcloud/server/blob/6cb75e8bf59e06b14734ad31e37d7707c2a2a281/apps/updatenotification/src/components/UpdateNotification.vue#L63)
* https://github.com/nextcloud/server/pull/39106
* [x] server - [`files_sharing`](https://github.com/nextcloud/server/blob/6cb75e8bf59e06b14734ad31e37d7707c2a2a281/apps/files_sharing/src/collaborationresources.js#L26)
* https://github.com/nextcloud/server/pull/39103
* [x] server - [`settings`](https://github.com/nextcloud/server/blob/6cb75e8bf59e06b14734ad31e37d7707c2a2a281/apps/settings/src/components/UserList/UserRow.vue#L270), server - [`settings`](https://github.com/nextcloud/server/blob/6cb75e8bf59e06b14734ad31e37d7707c2a2a281/apps/settings/src/components/UserList/UserRowSimple.vue#L76)
* https://github.com/nextcloud/server/pull/39073
* `NcAppNavigationCounter` was removed and needs to be replaced [\#4096](https://github.com/nextcloud/nextcloud-vue/pull/4096)
* [ ] app - [`notes`](https://github.com/nextcloud/notes/blob/4137f0be275c06049465a713871de48a95f47091/src/components/CategoriesList.vue#L9)
* [ ] app - [`deck`](https://github.com/nextcloud/deck/blob/4ddbf472c359533e071ac51accc2cab6881504e5/src/components/navigation/AppNavigationBoard.vue#L32)
* [ ] app - [`bookmarks`](https://github.com/nextcloud/bookmarks/blob/ed041f3a95216ee73615a2c1ad5f2107bb18fd88/src/components/Navigation.vue#L15)
* [x] server - [`settings`](https://github.com/nextcloud/server/blob/6cb75e8bf59e06b14734ad31e37d7707c2a2a281/apps/settings/src/views/Users.vue#L50), server - [`settings`](https://github.com/nextcloud/server/blob/6cb75e8bf59e06b14734ad31e37d7707c2a2a281/apps/settings/src/views/Apps.vue#L49)
* https://github.com/nextcloud/server/pull/39102
* `excludeClickOutsideClasses` was removed (with replacement) [\#4088](https://github.com/nextcloud/nextcloud-vue/pull/4088)
* [ ] app - [`calendar`](https://github.com/nextcloud/calendar/blob/8dff1a24f4eec3a52e5c97ee739967a43d59ea0c/src/components/AppNavigation/Settings.vue#L23)
* [x] server - [`core`](https://github.com/nextcloud/server/blob/6cb75e8bf59e06b14734ad31e37d7707c2a2a281/core/src/views/UnifiedSearch.vue#L25)
* https://github.com/nextcloud/server/pull/39038
* [x] app - [`notifications`](https://github.com/nextcloud/notifications/blob/13af8ab6f8119f0057f1be819618afe809678438/src/NotificationsApp.vue#L5)
* https://github.com/nextcloud/notifications/pull/1597
* `NcModal` internal div container layout was changed and some hacks need to be reverted
* [ ] app - [`calendar`](https://github.com/nextcloud/calendar) remove some custom modal overrides from `css/app-settings.scss` to fix scrolling
Moreover a bunch of properties got renamed
## Migration guide
- There is now a convenient css variable, `--app-navigation-padding`, to set the padding of content to the top of NcContent. Meaning e.g. for the first app navigation item, or the position of the navigation toggle. (see [\#3278](https://github.com/nextcloud-libraries/nextcloud-vue/pull/3278))
- Rename `title` prop to `name` for the following components:
- `NcActionButtonGroup`
- `NcActionCaption`
- `NcAppNavigationCaption`
- `NcAppNavigationNewItem`
- `NcAppNavigationSettings`
- `NcAppSettingsDialog`
- `NcAppSettingsSection`
- `NcAppSidebar`
- `NcEmptyContent`
- `NcIconSvgWrapper`
- `NcListItem`
- `NcListItemIcon`
- `NcLoadingIcon`
- `NcModal`
- `NcResource`
- `NcSavingIndicatorIcon`
- `NcSettingsSection`
- `NcActions`:
- Rename `force-title` prop to `force-name`
- Rename `menu-title` prop to `menu-name`
- `NcAppSidebar`:
- Rename `titleEditable` prop to `nameEditable`
- Rename `titlePlaceholder` prop to `namePlaceholder`
- Rename `subtitle` prop to `subname`
- Rename `subtitleTooltip` prop to `subtitle`
- Rename `linkifyTitle` prop to `linkifyName`
- Rename `titleTooltip` prop to `title`
- Rename `update:titleEditable` event to `update:nameEditable`
- Rename `update:title` event to `update:name`
- Rename `submit-title` event to `submit-name`
- `NcEmojiPicker`:
- Rename `previewFallbackTitle` prop to `previewFallbackName`
- `NcEmptyContent`:
- Rename `title` slot to `name`
- Add `height: 100%` or stretch parent another way
- Add `display: flex` or position `NcEmptyContent` in the middle another way
- `NcListItem`:
- Rename `subtitle` slot to `subname`
- `NcListItemIcon`:
- Rename `subtitle` prop to `subname`
- Rename `iconTitle` prop to `iconName`
- `NcModal`:
- Rename `playPauseTitle` to `playPauseName`
- `NcMentionBubble`:
- Rename `label` prop to `title`
- `NcRichContenteditable`:
- Rename `label` prop to `title`
- `NcUserBubble`:
- Rename `title` slot to `name`
Apart from that (the dependencies and breaking changes to consider), you can use npm i
to update the packages.
olheem
December 13, 2023, 2:14pm
4
I have changed title to name in my in NcListItem and i have run npm i
. Unfortunately I no longer see the text of the NclistItem.
Have you built the app yet? (like npm run dev
or npm run build
or npm run serve
)
olheem
December 13, 2023, 3:08pm
6
npm run dev
and npm run build
have the same result: I do not see the text.
npm run serve
results in the following error message:
[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration.entry[0] should be a non-empty string.
-> A module that is loaded upon startup. Only the last one is exported.