diff --git a/packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap b/packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap
index ca9d8ae60..652e4acb5 100644
--- a/packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap
+++ b/packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap
@@ -120,7 +120,12 @@ exports[`vue configuration for android 1`] = `
           {
             loader: 'vue-loader',
             options: {
-              compiler: 'nativescript-vue-template-compiler'
+              compiler: {
+                compile: function () { /* omitted long function */ },
+                compileToFunctions: function () { /* omitted long function */ },
+                parseComponent: function () { /* omitted long function */ },
+                registerElement: function () { /* omitted long function */ }
+              }
             }
           }
         ]
@@ -312,7 +317,12 @@ exports[`vue configuration for ios 1`] = `
           {
             loader: 'vue-loader',
             options: {
-              compiler: 'nativescript-vue-template-compiler'
+              compiler: {
+                compile: function () { /* omitted long function */ },
+                compileToFunctions: function () { /* omitted long function */ },
+                parseComponent: function () { /* omitted long function */ },
+                registerElement: function () { /* omitted long function */ }
+              }
             }
           }
         ]
diff --git a/packages/webpack5/package.json b/packages/webpack5/package.json
index f1cd652d2..7b50a757c 100644
--- a/packages/webpack5/package.json
+++ b/packages/webpack5/package.json
@@ -40,6 +40,7 @@
 		"@types/loader-utils": "^2.0.1",
 		"@types/terser-webpack-plugin": "^5.0.2",
 		"jest": "^26.6.3",
+		"nativescript-vue-template-compiler": "^2.8.2",
 		"ts-jest": "^26.4.4",
 		"typescript": "^4.1.2"
 	},
diff --git a/packages/webpack5/src/configuration/vue.ts b/packages/webpack5/src/configuration/vue.ts
index a9d34e254..726b972dd 100644
--- a/packages/webpack5/src/configuration/vue.ts
+++ b/packages/webpack5/src/configuration/vue.ts
@@ -1,8 +1,9 @@
-import base from './base';
-import Config from 'webpack-chain';
+import * as compiler from 'nativescript-vue-template-compiler';
 import { VueLoaderPlugin } from 'vue-loader';
-import { env as _env, IWebpackEnv } from '../index';
 import { merge } from 'webpack-merge';
+import Config from 'webpack-chain';
+import base from './base';
+import { env as _env, IWebpackEnv } from '../index';
 import { getPlatform } from '../helpers/project';
 
 export default function (config: Config, env: IWebpackEnv = _env): Config {
@@ -23,9 +24,7 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
 		.tap((options) => {
 			return {
 				...options,
-				// todo: should be a compiler object
-				// but we want it as an external dependency
-				compiler: 'nativescript-vue-template-compiler',
+				compiler,
 			};
 		})
 		.end();