Conversation
Bump app version from 1.0.0 to 32.0.6 to align with nc-server v32.0.6. Replace custom-npm file: references with upstream registry versions compatible with IONOS nc-server v32.0.6: - @mdi/js 7.4.47 - @nextcloud/vue 8.35.3 - vue-material-design-icons 5.3.1 Also add vue-loader ^15.11.1 as explicit devDependency to ensure Vue 2 compatible loader is selected (over the Vue 3 compatible v17). Ref: https://github.com/IONOS-Productivity/nc-server/blob/v32.0.6/package.json Part of HDNEXT-1764 / HDNEXT-1719 (drop FA Pro icon mapping).
- Replace webpack.js and @nextcloud/webpack-vue-config with vite.config.ts using @nextcloud/vite-config - Rename .eslintrc.js and stylelint.config.js to .cjs to keep CommonJS module format compatible with ESM projects - Update tsconfig.json: switch moduleResolution to Bundler, enable allowImportingTsExtensions, set noEmit to true - Update Makefile: point clean target at js/* instead of dist/*, swap excluded build artefacts for vite equivalents - Update .gitignore: track /css/ output directory (vite emits CSS separately alongside js/) - Update templates/index.php: load vite-emitted asset names ($APP_ID-main) and explicitly add the generated stylesheet
Runtime: - vue: ^2.7.16 -> ^3.4.0 - @nextcloud/vue: 8.35.3 -> ^9.7.0 (Vue 3 build) - @chenfengyuan/vue-qrcode: ^1.0.2 -> ^2.0.0 (Vue 3 build) - @nextcloud/dialogs: ^6.3.0 -> ^7.3.0 - @nextcloud/initial-state: ^2.2.0 -> ^3.0.0 - @nextcloud/password-confirmation: ^5.3.1 -> ^6.1.0 Dev / build tooling: - Replace @nextcloud/webpack-vue-config with @nextcloud/vite-config ^2.5.2 - Replace webpack, vue-loader, vue-template-compiler, eslint-webpack-plugin, stylelint-webpack-plugin with vite ^7.1.10 - Remove @babel/eslint-parser (not needed with vite)
main.ts:
- Switch from `new Vue()` to `createApp()` + `app.mount()`
- Replace PiniaVuePlugin/Vue.use() with createPinia() + app.use()
- Register t()/n() via app.config.globalProperties instead of
Vue.mixin({ methods })
shims-vue.d.ts:
- Update module declaration to use Vue 3 DefineComponent type
Components – API/template changes:
- Replace all `.sync` modifier with `v-model:` (Vue 3 syntax)
- Replace `<Foo slot="icon">` with `<template #icon><Foo>` named
slot syntax across Navigation.vue
@nextcloud/vue imports – all components:
- Replace old `@nextcloud/vue/dist/Components/Nc*.js` deep imports
with the new `@nextcloud/vue/components/Nc*` path (tree-shakeable
named exports in @nextcloud/vue v9)
- Remove now-unnecessary `@ts-expect-error` suppressions
App.vue:
- Add `:global(#simplesettings)` height/width to fix root-element
sizing under vite's CSS scoping
- Change `.settings` from fixed `width: 85%` to `flex: 1` and add
`height: 100%` for proper flex layout
- Change `.navigation` from `width: 15%` to `flex: 0 0 15%`
PersonalInfoService.js:
- Update @nextcloud/password-confirmation CSS import path from
`dist/style.css` to `style.css` (package export map changed in v6)
minimatch 9.0.0 - 9.0.6 is affected by three ReDoS CVEs: - GHSA-3ppc-4f35-3m26 - GHSA-7r86-cg39-jmmj - GHSA-23c5-xmqv-rm74 These are pulled in transitively by @typescript-eslint/typescript-estree and related packages (6 high-severity hits). Pin the transitive dep to ^9.0.9 via npm overrides until the direct consumers are updated. Remaining unfixable vulns (dev-only, no runtime impact): - elliptic (*): no upstream fix in @nextcloud/vite-config transitive chain (vite-plugin-node-polyfills -> node-stdlib-browser -> crypto-browserify) - fast-xml-parser (<5.7.0): affects @nextcloud/eslint-plugin's XMLBuilder; the plugin only uses XMLParser so not reachable in practice, and the v4->v5 API break rules out a blind override
There was a problem hiding this comment.
Pull request overview
This PR ports the Simple Settings frontend build and runtime from Webpack + Vue 2 to Vite + Vue 3, aligning with the modern Nextcloud app frontend tooling stack.
Changes:
- Replaces the Webpack build pipeline with
@nextcloud/vite-configand updates build scripts accordingly. - Upgrades key frontend dependencies to Vue 3 /
@nextcloud/vuev9 and adapts components for Vue 3 syntax (v-model:*, slots, component imports). - Adjusts server-side asset loading to include Vite-generated JS/CSS bundles and updates packaging/build housekeeping.
Reviewed changes
Copilot reviewed 19 out of 24 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| webpack.js | Removes the legacy Webpack configuration. |
| vite.config.ts | Adds Vite app configuration via @nextcloud/vite-config. |
| tsconfig.json | Updates TS settings for bundler-style module resolution and no-emit typechecking. |
| templates/index.php | Loads Vite-built JS and CSS bundles using Util::addScript/addStyle. |
| stylelint.config.cjs | Adds Stylelint config for Vue styling. |
| src/shims-vue.d.ts | Updates Vue shim typing for Vue 3 component types. |
| src/service/PersonalInfo/PersonalInfoService.js | Updates password-confirmation stylesheet import path. |
| src/main.ts | Migrates app bootstrap from Vue 2 to Vue 3 + Pinia. |
| src/components/security/AuthTokenSetupDialog.vue | Vue 3 dialog binding and updated @nextcloud/vue component imports. |
| src/components/security/AuthTokenSetup.vue | Migrates .sync to Vue 3 v-model and updates imports. |
| src/components/security/AuthToken.vue | Updates v-model usage and NcActions open binding for Vue 3. |
| src/components/navigation/Navigation.vue | Migrates slot syntax and updates emitted event naming/typing for Vue 3. |
| src/components/help/Software.vue | Updates @nextcloud/vue component import path. |
| src/components/files/WebDavUrl.vue | Updates input binding to model-value and import path. |
| src/components/account/Quota.vue | Updates @nextcloud/vue component import path. |
| src/components/account/LanguageSection.vue | Updates language binding to Vue 3 v-model:* and hardens initial-state destructuring defaults. |
| src/components/account/Language.vue | Updates select binding and adds update:language emit for Vue 3 v-model. |
| src/App.vue | Tweaks layout CSS to better fit full-height Vue 3 root mounting container. |
| package.json | Switches scripts to Vite, upgrades dependencies to Vue 3 ecosystem, and sets ESM module type. |
| Makefile | Updates build cleanup and appstore exclude list for the new Vite-based setup. |
| appinfo/info.xml | Bumps app version to match the new release version. |
| .gitignore | Adds css/ as a build output directory to ignore. |
| .eslintrc.cjs | Switches ESLint config preset to the Vue 3 configuration. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| # Avoid eslint/tsc accidentally complaining about files in dist | ||
| rm -rf dist/* | ||
| # Avoid eslint/tsc accidentally complaining about compiled files | ||
| rm -rf js/* |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.