Merge pull request #658 from nextcloud-libraries/feat/vu2-and-vue3-compatibility

feat: Vue 2 and Vue 3 compatibility

Author: ShGKme

.github/workflows/node-test.yml

@@ -24,43 +24,11 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v3
 
-      - name: Read package.json node and npm engines version
-        uses: skjnldsv/[email protected]
-        id: versions
-        with:
-          fallbackNode: '^12'
-          fallbackNpm: '^6'
-
-      - name: Set up node ${{ steps.versions.outputs.nodeVersion }}
+      - name: Set up node
         uses: actions/setup-node@v3
-        with:
-          node-version: ${{ steps.versions.outputs.nodeVersion }}
-
-      - name: Set up npm ${{ steps.versions.outputs.npmVersion }}
-        run: npm i -g npm@"${{ steps.versions.outputs.npmVersion }}"
-
-      - name: Install webpack-vue-config dependencies & build lib
-        run: |
-          npm ci
-          npm pack
 
       - name: Install dependencies
-        run: |
-          cd tests
-          npm ci
-          # Manually install dependency to check for incompatibilities
-          version=$(cat ../package.json | jq --raw-output .version)
-          npm install -D ../nextcloud-webpack-vue-config-$version.tgz
-
-      - name: Build test app
-        run: |
-          # Build test app dev and production
-          cd tests
-          npm run dev
-          npm run build
+        run: npm ci
 
-      - name: Lint with eslint and stylelint
-        run: |
-          cd tests
-          npm run lint
-          npm run stylelint
+      - name: Test
+        run: npm test

.github/workflows/node.yml

@@ -32,6 +32,28 @@ module.exports = webpackConfig
 ...
 ```
 
+## Note on Vue 2 support
+
+This package supports both **Vue 2** and **Vue 3** by installing legacy `vue-loader` for Vue 2 in a `postinstall` script.
+
+In Vue 2 it may result in different `vue-loader` version in the `package-lock.json` and `node_modules`.
+
+### Troubleshooting in Vue 2 apps
+
+In case of `npm error code ENOTEMPTY` - remove `node_modules` and try again:
+
+```sh
+# In case of "npm error code ENOTEMPTY" in Vue 2
+rm -rf node_modules
+```
+
+To avoid any errors and have explicitly specified `vue-loader` - install it as dependency:
+
+```sh
+# Install legacy vue-loader for Vue 2
+npm i -D vue-loader@legacy
+```
+
 ## Hot module replacement
 
 To enjoy hot module replacement, follow those instructions:

README.md

@@ -12,7 +12,7 @@ SPDX-FileCopyrightText = "2019 Nextcloud GmbH and Nextcloud contributors"
 SPDX-License-Identifier = "AGPL-3.0-or-later"
 
 [[annotations]]
-path = ["tests/package-lock.json", "tests/package.json"]
+path = ["test-apps/vue2/package-lock.json", "test-apps/vue2/package.json", "test-apps/vue3/package-lock.json", "test-apps/vue3/package.json"]
 precedence = "aggregate"
-SPDX-FileCopyrightText = "2019 Nextcloud GmbH and Nextcloud contributors"
+SPDX-FileCopyrightText = "2025 Nextcloud GmbH and Nextcloud contributors"
 SPDX-License-Identifier = "AGPL-3.0-or-later"