diff --git a/packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap b/packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap
index d0ab8a309..895a1f62b 100644
--- a/packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap
+++ b/packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap
@@ -3,9 +3,7 @@
 exports[`vue configuration works 1`] = `
 Object {
   "entry": Object {
-    "bundle.js": Array [
-      "bundle.js",
-    ],
+    "": Array [],
   },
   "module": Object {
     "rules": Array [
@@ -20,6 +18,29 @@ Object {
           },
         ],
       },
+      Object {
+        "use": Array [
+          Object {
+            "loader": "ts-loader",
+            "options": Object {
+              "appendTsSuffixTo": Array [
+                /\\\\\\.vue\\$/,
+              ],
+            },
+          },
+        ],
+      },
+    ],
+  },
+  "plugins": Array [
+    VueLoaderPlugin {},
+  ],
+  "resolve": Object {
+    "alias": Object {
+      "vue": "nativescript-vue",
+    },
+    "extensions": Array [
+      ".vue",
     ],
   },
 }
diff --git a/packages/webpack5/package.json b/packages/webpack5/package.json
index 79894d9d5..96fa4751b 100644
--- a/packages/webpack5/package.json
+++ b/packages/webpack5/package.json
@@ -6,7 +6,7 @@
   "license": "Apache-2.0",
   "scripts": {
     "build": "echo todo",
-		"test": "jest"
+    "test": "jest"
   },
   "devDependencies": {
     "@types/jest": "^26.0.15",
@@ -16,6 +16,7 @@
     "webpack": "^5.4.0"
   },
   "dependencies": {
+    "vue-loader": "^15.9.5",
     "webpack-chain": "^6.5.1"
   }
 }
diff --git a/packages/webpack5/src/configuration/angular.ts b/packages/webpack5/src/configuration/angular.ts
index cf84269ef..96c60d249 100644
--- a/packages/webpack5/src/configuration/angular.ts
+++ b/packages/webpack5/src/configuration/angular.ts
@@ -1,8 +1,10 @@
 import base from './base';
+import { IWebpackEnv } from '@nativescript/webpack';
+import Config from 'webpack-chain';
 
 // todo: add base configuration for angular
-export default function (env) {
+export default function (env: IWebpackEnv): Config {
 	const config = base(env);
 
-	return {};
+	return config;
 }
diff --git a/packages/webpack5/src/configuration/base.ts b/packages/webpack5/src/configuration/base.ts
index 851c026b1..afe6cb4c6 100644
--- a/packages/webpack5/src/configuration/base.ts
+++ b/packages/webpack5/src/configuration/base.ts
@@ -1,13 +1,9 @@
-import { Configuration } from 'webpack';
 import Config from 'webpack-chain';
+import { IWebpackEnv } from './index';
 
 // todo: add base configuration that's shared across all flavors
-export default function (env): Configuration {
-	const config = new Config()
-	config.entry('')
-	return {
-		entry: {
-			'bundle.js': 'bundle.js',
-		},
-	};
+export default function (env: IWebpackEnv): Config {
+	const config = new Config();
+	config.entry('');
+	return config;
 }
diff --git a/packages/webpack5/src/configuration/index.ts b/packages/webpack5/src/configuration/index.ts
index 43da5349f..630a3cb7d 100644
--- a/packages/webpack5/src/configuration/index.ts
+++ b/packages/webpack5/src/configuration/index.ts
@@ -1,7 +1,25 @@
-export { default as angularConfig } from './angular';
-export { default as baseConfig } from './base';
-export { default as javascriptConfig } from './javascript';
-export { default as reactConfig } from './react';
-export { default as svelteConfig } from './svelte';
-export { default as typescriptConfig } from './typescript';
-export { default as vueConfig } from './vue';
+import base from './base';
+
+import angular from './angular';
+import javascript from './javascript';
+import react from './react';
+import svelte from './svelte';
+import typescript from './typescript';
+import vue from './vue';
+
+// export final configs
+// todo: perhaps we can export chain configs as well
+
+export const baseConfig = (env) => base(env).toConfig();
+
+export const angularConfig = (env) => angular(env).toConfig();
+export const javascriptConfig = (env) => javascript(env).toConfig();
+export const reactConfig = (env) => react(env).toConfig();
+export const svelteConfig = (env) => svelte(env).toConfig();
+export const typescriptConfig = (env) => typescript(env).toConfig();
+export const vueConfig = (env) => vue(env).toConfig();
+
+export interface IWebpackEnv {
+	hmr: boolean;
+	// todo: add others
+}
diff --git a/packages/webpack5/src/configuration/javascript.ts b/packages/webpack5/src/configuration/javascript.ts
index 480da5522..4826e2233 100644
--- a/packages/webpack5/src/configuration/javascript.ts
+++ b/packages/webpack5/src/configuration/javascript.ts
@@ -1,8 +1,10 @@
 import base from './base';
+import { IWebpackEnv } from '@nativescript/webpack';
+import Config from 'webpack-chain';
 
 // todo: add base configuration for core
-export default function (env) {
+export default function (env: IWebpackEnv): Config {
 	const config = base(env);
 
-	return {};
+	return config;
 }
diff --git a/packages/webpack5/src/configuration/react.ts b/packages/webpack5/src/configuration/react.ts
index fe5e9eaf6..7e62761fe 100644
--- a/packages/webpack5/src/configuration/react.ts
+++ b/packages/webpack5/src/configuration/react.ts
@@ -1,8 +1,10 @@
 import base from './base';
+import { IWebpackEnv } from '@nativescript/webpack';
+import Config from 'webpack-chain';
 
 // todo: add base configuration for react
-export default function (env) {
+export default function (env: IWebpackEnv): Config {
 	const config = base(env);
 
-	return {};
+	return config;
 }
diff --git a/packages/webpack5/src/configuration/svelte.ts b/packages/webpack5/src/configuration/svelte.ts
index 2c277a244..45de2976a 100644
--- a/packages/webpack5/src/configuration/svelte.ts
+++ b/packages/webpack5/src/configuration/svelte.ts
@@ -1,8 +1,10 @@
 import base from './base';
+import { IWebpackEnv } from '@nativescript/webpack';
+import Config from 'webpack-chain';
 
 // todo: add base configuration for svelte
-export default function (env) {
+export default function (env: IWebpackEnv): Config {
 	const config = base(env);
 
-	return {};
+	return config;
 }
diff --git a/packages/webpack5/src/configuration/typescript.ts b/packages/webpack5/src/configuration/typescript.ts
index 480da5522..4826e2233 100644
--- a/packages/webpack5/src/configuration/typescript.ts
+++ b/packages/webpack5/src/configuration/typescript.ts
@@ -1,8 +1,10 @@
 import base from './base';
+import { IWebpackEnv } from '@nativescript/webpack';
+import Config from 'webpack-chain';
 
 // todo: add base configuration for core
-export default function (env) {
+export default function (env: IWebpackEnv): Config {
 	const config = base(env);
 
-	return {};
+	return config;
 }
diff --git a/packages/webpack5/src/configuration/vue.ts b/packages/webpack5/src/configuration/vue.ts
index c2975c8f9..a03ceb937 100644
--- a/packages/webpack5/src/configuration/vue.ts
+++ b/packages/webpack5/src/configuration/vue.ts
@@ -1,10 +1,16 @@
 import base from './base';
-import { default as Config } from 'webpack-chain';
+import Config from 'webpack-chain';
+import { VueLoaderPlugin } from 'vue-loader';
+import { IWebpackEnv } from './index';
 
 // todo: add base configuration for vue
-export default function (env) {
-	const config = new Config().merge(base(env));
+export default function (env: IWebpackEnv): Config {
+	const config = base(env);
 
+	// resolve .vue files
+	config.resolve.extensions.prepend('.vue');
+
+	// add a rule for .vue files
 	config.module
 		.rule('vue')
 		.test(/\.vue$/)
@@ -18,14 +24,23 @@ export default function (env) {
 		})
 		.end();
 
-	// todo: we may want to use webpack-chain internally
-	// to avoid "trying to read property x of undefined" type of issues
-	/*
-		config.module.rules.push({
-			test: /.vue$/,
-			use: [],
+	// set up ts support in vue files
+	config.module
+		.rule('ts')
+		.use('ts-loader')
+		.loader('ts-loader')
+		.tap((options) => {
+			return {
+				...options,
+				appendTsSuffixTo: [/\.vue$/],
+			};
 		});
-	*/
 
-	return config.toConfig();
+	// add VueLoaderPlugin
+	config.plugin('vue-plugin').use(VueLoaderPlugin);
+
+	// add an alias for vue, since some plugins may try to import it
+	config.resolve.alias.set('vue', 'nativescript-vue');
+
+	return config;
 }