diff --git a/package.json b/package.json
index cc04f6c6e4..fb5209f820 100644
--- a/package.json
+++ b/package.json
@@ -290,6 +290,7 @@
     "vue-loader": "^15.9.2",
     "vue-prism-editor": "^0.6.1",
     "vue-router": "^3.3.2",
+    "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "^2.6.11",
     "vuedraggable": "^2.23.2",
     "vuex": "^3.4.0",
diff --git a/src/renderer/_vue/assets/css/app.scss b/src/renderer/_vue/assets/css/app.scss
index f3b5dc4d66..6a9e6c94f3 100644
--- a/src/renderer/_vue/assets/css/app.scss
+++ b/src/renderer/_vue/assets/css/app.scss
@@ -1,8 +1,8 @@
-
 @import 'custom';
-@import 'fonts';
-@import '../../../../../node_modules/bootstrap/scss/bootstrap';
-@import '../../../../../node_modules/bootstrap-vue/src/index';
+@import "~typeface-roboto/index.css";
+@import "~material-design-icons/iconfont/material-icons.css";
+@import '~bootstrap/scss/bootstrap';
+@import '~bootstrap-vue/src/index';
 
 html, body {
   margin: 0;
diff --git a/src/renderer/_vue/assets/css/fonts.scss b/src/renderer/_vue/assets/css/fonts.scss
deleted file mode 100644
index 562869bb57..0000000000
--- a/src/renderer/_vue/assets/css/fonts.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "../../../../../node_modules/typeface-roboto/index.css";
-@import "../../../../../node_modules/material-design-icons/iconfont/material-icons.css";
diff --git a/src/renderer/components/fonts.scss b/src/renderer/components/fonts.scss
index fb539cb235..76f2199e0a 100644
--- a/src/renderer/components/fonts.scss
+++ b/src/renderer/components/fonts.scss
@@ -1,6 +1,6 @@
 // Custom fonts
-@import "../../../node_modules/material-design-icons/iconfont/material-icons.css";
-@import "../../../node_modules/typeface-roboto/index.css";
+@import "~material-design-icons/iconfont/material-icons.css";
+@import "~typeface-roboto/index.css";
 
 // Patched RobotoMono font with icons
 // RobotoMono Windows Compatible for using in terminal
diff --git a/src/renderer/components/media.scss b/src/renderer/components/media.scss
index 50f0795422..2066ca9f8e 100755
--- a/src/renderer/components/media.scss
+++ b/src/renderer/components/media.scss
@@ -1,5 +1,5 @@
 //-- Mixins for adaptive layout (media queries)
-@import "../../../node_modules/include-media/dist/include-media";
+@import "~include-media/dist/include-media";
 
 @mixin mobile {
   @include media("<=desktop") {
diff --git a/src/renderer/index.tsx b/src/renderer/index.tsx
index e098d865b8..873d58ecd3 100644
--- a/src/renderer/index.tsx
+++ b/src/renderer/index.tsx
@@ -1,6 +1,6 @@
 // Renderer process
 
 import "../common/system-ca"
-import { App } from "./components/app";
+import { appInitVue } from "./_vue";
 
-App.init();
+appInitVue();
\ No newline at end of file
diff --git a/webpack.renderer.ts b/webpack.renderer.ts
index 28541575de..ce173ee339 100755
--- a/webpack.renderer.ts
+++ b/webpack.renderer.ts
@@ -7,6 +7,7 @@ import { isDevelopment, isProduction, outDir, rendererDir } from "./src/common/v
 import { libraryTarget, manifestPath } from "./webpack.dll";
 
 export default function (): webpack.Configuration {
+  const VueLoaderPlugin = require("vue-loader/lib/plugin");
   const htmlTemplate = path.resolve(rendererDir, "index.html");
   const sassCommonVars = path.resolve(rendererDir, "components/vars.scss");
   const tsConfigFile = path.resolve("tsconfig.json");
@@ -26,9 +27,13 @@ export default function (): webpack.Configuration {
       chunkFilename: 'chunks/[name].js',
     },
     resolve: {
+      alias: {
+        "@": rendererDir,
+      },
       extensions: [
         '.js', '.jsx', '.json',
-        '.ts', '.tsx', '.vue'
+        '.ts', '.tsx',
+        '.vue',
       ]
     },
     optimization: {
@@ -54,15 +59,20 @@ export default function (): webpack.Configuration {
           test: /\.node$/,
           use: "node-loader"
         },
+        {
+          test: /\.jsx?$/,
+          use: "babel-loader"
+        },
         {
           test: /\.tsx?$/,
+          exclude: /node_modules/,
           use: [
             "babel-loader",
             {
               loader: "ts-loader",
               options: {
                 // transpileOnly: false,
-                // appendTsSuffixTo: [/\.vue$/], // todo: remove after migration vue parts
+                // appendTsSuffixTo: [/\.vue$/],
                 configFile: tsConfigFile,
                 compilerOptions: {
                   // localization support
@@ -74,6 +84,19 @@ export default function (): webpack.Configuration {
             }
           ]
         },
+        {
+          test: /\.vue$/,
+          use: {
+            loader: "vue-loader",
+            options: {
+              shadowMode: false,
+              loaders: {
+                sass: "vue-style-loader!css-loader!sass-loader?indentedSyntax=1",
+                scss: "vue-style-loader!css-loader!sass-loader",
+              }
+            }
+          }
+        },
         {
           test: /\.(jpg|png|svg|map|ico)$/,
           use: 'file-loader?name=assets/[name]-[hash:6].[ext]'
@@ -110,6 +133,8 @@ export default function (): webpack.Configuration {
     },
 
     plugins: [
+      new VueLoaderPlugin(), // todo: remove with _"vue/*"
+
       // todo: check if this actually works in mode=production files
       new webpack.DllReferencePlugin({
         context: process.cwd(),
diff --git a/yarn.lock b/yarn.lock
index 9ed622f144..15308d9aab 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11249,7 +11249,7 @@ vue-router@^3.3.2:
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.3.2.tgz#0099de402edb2fe92f9711053ab5a2156f239cad"
   integrity sha512-5sEbcfb7MW8mY8lbUVbF4kgcipGXsagkM/X+pb6n0MhjP+RorWIUTPAPSqgPaiPOxVCXgAItBl8Vwz8vq78faA==
 
-vue-style-loader@^4.1.0:
+vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"
   integrity sha512-0ip8ge6Gzz/Bk0iHovU9XAUQaFt/G2B61bnWa2tCcqqdgfHs1lF9xXorFbE55Gmy92okFT+8bfmySuUOu13vxQ==