fix: vue 2 templates

Author: NathanWalker

packages/template-blank-vue-ts/package.json

@@ -2,7 +2,7 @@
   "name": "@nativescript/template-blank-vue-ts",
   "main": "app/app.ts",
   "displayName": "Blank Vue Typescript",
-  "version": "9.0.2",
+  "version": "9.0.3",
   "description": "Blank Typescript template for NativeScript apps using Vue.",
   "author": "NativeScript Team <[email protected]>",
   "license": "Apache-2.0",
@@ -26,6 +26,7 @@
     "types",
     ".editorconfig",
     "tailwind.config.js",
+    "webpack.config.js",
     "tsconfig.json"
   ],
   "keywords": [
@@ -47,11 +48,13 @@
   },
   "devDependencies": {
     "@nativescript/types": "~9.0.0",
-    "@nativescript/webpack": "5.0.24",
+    "@nativescript/webpack": "~5.0.31",
     "@types/node": "^20.0.0",
     "nativescript-vue-template-compiler": "~2.9.3",
     "tailwindcss": "~3.4.0",
     "typescript": "~5.4.0",
-    "vue": "~2.6.12"
+    "vue": "~2.6.12",
+    "vue-loader": "^15.11.1",
+    "vue-template-compiler": "^2.7.16"
   }
 }

packages/template-blank-vue-ts/webpack.config.js

@@ -0,0 +1,34 @@
+const webpack = require("@nativescript/webpack");
+const path = require("path");
+const VueLoaderPlugin = require("vue-loader/lib/plugin");
+
+module.exports = (env) => {
+	webpack.init(env);
+
+	// Learn how to customize:
+	// https://docs.nativescript.org/webpack
+
+	webpack.chainWebpack((config) => {
+		// Use vue-loader@15 for Vue 2
+		config.resolve.alias.set(
+			"vue-loader",
+			path.resolve(__dirname, "node_modules/vue-loader")
+		);
+
+		// Remove the default VueLoaderPlugin (v17) and add v15
+		config.plugins.delete("VueLoaderPlugin");
+		config.plugin("VueLoaderPlugin").use(VueLoaderPlugin);
+
+		// Configure vue-loader for Vue 2
+		config.module
+			.rule("vue")
+			.use("vue-loader")
+			.loader(require.resolve("vue-loader"))
+			.tap((options) => ({
+				...options,
+				compiler: require("vue-template-compiler"),
+			}));
+	});
+
+	return webpack.resolveConfig();
+};

packages/template-blank-vue/package.json

@@ -2,7 +2,7 @@
   "name": "@nativescript/template-blank-vue",
   "main": "app/app.js",
   "displayName": "Blank",
-  "version": "9.0.1",
+  "version": "9.0.2",
   "description": "Blank template for NativeScript apps using Vue.",
   "author": "NativeScript Team <[email protected]>",
   "license": "Apache-2.0",
@@ -24,7 +24,8 @@
     "tools",
     "!tools/assets",
     ".editorconfig",
-    "jsconfig.json"
+    "jsconfig.json",
+    "webpack.config.js"
   ],
   "keywords": [
     "nstudio",
@@ -45,7 +46,10 @@
     "nativescript-vue": "~2.9.3"
   },
   "devDependencies": {
-    "@nativescript/webpack": "5.0.24",
-    "nativescript-vue-template-compiler": "~2.9.3"
+    "@nativescript/webpack": "~5.0.31",
+    "nativescript-vue-template-compiler": "~2.9.3",
+    "vue": "~2.6.12",
+    "vue-loader": "^15.11.1",
+    "vue-template-compiler": "^2.7.16"
   }
 }

packages/template-blank-vue/webpack.config.js

@@ -0,0 +1,34 @@
+const webpack = require("@nativescript/webpack");
+const path = require("path");
+const VueLoaderPlugin = require("vue-loader/lib/plugin");
+
+module.exports = (env) => {
+    webpack.init(env);
+
+    // Learn how to customize:
+    // https://docs.nativescript.org/webpack
+
+    webpack.chainWebpack((config) => {
+        // Use vue-loader@15 for Vue 2
+        config.resolve.alias.set(
+            "vue-loader",
+            path.resolve(__dirname, "node_modules/vue-loader")
+        );
+
+        // Remove the default VueLoaderPlugin (v17) and add v15
+        config.plugins.delete("VueLoaderPlugin");
+        config.plugin("VueLoaderPlugin").use(VueLoaderPlugin);
+
+        // Configure vue-loader for Vue 2
+        config.module
+            .rule("vue")
+            .use("vue-loader")
+            .loader(require.resolve("vue-loader"))
+            .tap((options) => ({
+                ...options,
+                compiler: require("vue-template-compiler"),
+            }));
+    });
+
+    return webpack.resolveConfig();
+};