installed succesfully rollup alias plugin. Now Vue can be imported like a normal npm package

package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "deemix",
-	"version": "0.1.0-alpha",
+	"version": "0.1.6",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
@@ -30,6 +30,15 @@
 				"js-tokens": "^4.0.0"
 			}
 		},
+		"@rollup/plugin-alias": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-3.1.0.tgz",
+			"integrity": "sha512-IzoejtAqdfwAvx4D0bztAJFoL5Js36kJgnbO00zfI1B9jf9G80vWysyG0C4+E6w5uG5hz0EeetPpoBWKdNktCQ==",
+			"dev": true,
+			"requires": {
+				"slash": "^3.0.0"
+			}
+		},
 		"@rollup/plugin-commonjs": {
 			"version": "11.1.0",
 			"resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-11.1.0.tgz",
@@ -694,6 +703,12 @@
 			"integrity": "sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==",
 			"dev": true
 		},
+		"slash": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+			"integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+			"dev": true
+		},
 		"source-map": {
 			"version": "0.6.1",
 			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",

package.json

@@ -6,14 +6,6 @@
 		"type": "git",
 		"url": "https://notabug.org/RemixDev/deemix"
 	},
-	"devDependencies": {
-		"@rollup/plugin-commonjs": "^11.0.1",
-		"@rollup/plugin-node-resolve": "^7.0.0",
-		"@rollup/plugin-replace": "^2.3.2",
-		"npm-run-all": "^4.1.5",
-		"rollup": "^1.27.0",
-		"rollup-plugin-terser": "^5.0.0"
-	},
 	"scripts": {
 		"build:js": "rollup -c",
 		"watch:js": "rollup -c -w",
@@ -26,5 +18,14 @@
 		"lodash": "^4.17.15",
 		"toastify-js": "^1.7.0",
 		"vue": "^2.6.11"
+	},
+	"devDependencies": {
+		"@rollup/plugin-alias": "^3.1.0",
+		"@rollup/plugin-commonjs": "^11.0.1",
+		"@rollup/plugin-node-resolve": "^7.0.0",
+		"@rollup/plugin-replace": "^2.3.2",
+		"npm-run-all": "^4.1.5",
+		"rollup": "^1.27.0",
+		"rollup-plugin-terser": "^5.0.0"
 	}
 }

public/js/bundle.js

@@ -41863,7 +41863,6 @@ function handleSidebarClick(event) {
 			changeTab(sidebarEl, 'main', 'search_tab');
 			break
 		case 'main_home_tablink':
-			console.log('al laod', sidebarEl);
 			changeTab(sidebarEl, 'main', 'home_tab');
 			break
 		case 'main_charts_tablink':

rollup.config.js

@@ -1,6 +1,7 @@
 import resolve from '@rollup/plugin-node-resolve'
 import commonjs from '@rollup/plugin-commonjs'
 import replace from '@rollup/plugin-replace'
+import alias from '@rollup/plugin-alias'
 import { terser } from 'rollup-plugin-terser'
 
 // 'npm run watch:js' -> 'production' is false
@@ -17,8 +18,15 @@ export default {
 		}
 	],
 	plugins: [
-		// Needed for Vue imports, could use alias plugin but they're not working with resolve plugin
-		// Assuming all the Vue imports are made like: import Vue from 'vue/dist/vue.esm' (vue.esm is made for bundlers)
+		alias({
+			entries: [
+				{
+					find: 'vue',
+					replacement: 'vue/dist/vue.esm'
+				}
+			]
+		}),
+		// Needed for Vue imports
 		replace({
 			'process.env.NODE_ENV': JSON.stringify(production ? 'production' : 'development')
 		}),

src/js/modules/components/artist-tab.js

@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import Vue from 'vue/dist/vue.esm'
+import Vue from 'vue'
 import { socket } from '../socket.js'
 import Downloads from '../downloads.js'
 import QualityModal from '../quality-modal.js'

src/js/modules/components/charts-tab.js

@@ -1,4 +1,4 @@
-import Vue from 'vue/dist/vue.esm'
+import Vue from 'vue'
 import { socket } from '../socket.js'
 import { artistView, albumView } from '../tabs.js'
 import Downloads from '../downloads.js'

src/js/modules/components/favorites-tab.js

@@ -1,4 +1,4 @@
-import Vue from 'vue/dist/vue.esm'
+import Vue from 'vue'
 import { socket } from '../socket.js'
 import { playlistView, artistView, albumView, spotifyPlaylistView } from '../tabs.js'
 import Downloads from '../downloads.js'

src/js/modules/components/home-tab.js

@@ -1,4 +1,4 @@
-import Vue from 'vue/dist/vue.esm'
+import Vue from 'vue'
 import { socket } from '../socket.js'
 import { artistView, albumView, playlistView } from '../tabs.js'
 import Downloads from '../downloads.js'

src/js/modules/components/link-analyzer-tab.js

@@ -1,4 +1,4 @@
-import Vue from 'vue/dist/vue.esm'
+import Vue from 'vue'
 import { socket } from '../socket.js'
 import { albumView, artistView } from '../tabs.js'
 import Utils from '../utils.js'

src/js/modules/components/main-search.js

@@ -1,4 +1,4 @@
-import Vue from 'vue/dist/vue.esm'
+import Vue from 'vue'
 import { socket } from '../socket.js'
 import { artistView, albumView, playlistView } from '../tabs.js'
 import Downloads from '../downloads.js'

src/js/modules/components/settings-tab.js

@@ -1,4 +1,4 @@
-import Vue from 'vue/dist/vue.esm'
+import Vue from 'vue'
 import { toast } from '../toasts.js'
 import { socket } from '../socket.js'
 

src/js/modules/components/tracklist-tab.js

@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import Vue from 'vue/dist/vue.esm'
+import Vue from 'vue'
 import { socket } from '../socket.js'
 import { albumView, artistView } from '../tabs.js'
 import Downloads from '../downloads.js'

src/js/modules/tabs.js

@@ -101,7 +101,6 @@ function handleSidebarClick(event) {
 			changeTab(sidebarEl, 'main', 'search_tab')
 			break
 		case 'main_home_tablink':
-			console.log('al laod', sidebarEl)
 			changeTab(sidebarEl, 'main', 'home_tab')
 			break
 		case 'main_charts_tablink':