added Vue as a dependency, now will run in development mode (with logs) when running npm run dev

package-lock.json

@@ -58,6 +58,16 @@
 				"resolve": "^1.14.2"
 			}
 		},
+		"@rollup/plugin-replace": {
+			"version": "2.3.2",
+			"resolved": "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-2.3.2.tgz",
+			"integrity": "sha512-KEEL7V2tMNOsbAoNMKg91l1sNXBDoiP31GFlqXVOuV5691VQKzKBh91+OKKOG4uQWYqcFskcjFyh1d5YnZd0Zw==",
+			"dev": true,
+			"requires": {
+				"@rollup/pluginutils": "^3.0.8",
+				"magic-string": "^0.25.5"
+			}
+		},
 		"@rollup/pluginutils": {
 			"version": "3.0.10",
 			"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.0.10.tgz",
@@ -831,6 +841,11 @@
 				"spdx-expression-parse": "^3.0.0"
 			}
 		},
+		"vue": {
+			"version": "2.6.11",
+			"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz",
+			"integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
+		},
 		"which": {
 			"version": "1.3.1",
 			"resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",

package.json

@@ -9,6 +9,7 @@
 	"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"
@@ -23,6 +24,7 @@
 	"dependencies": {
 		"jquery": "^3.5.1",
 		"lodash": "^4.17.15",
-		"toastify-js": "^1.7.0"
+		"toastify-js": "^1.7.0",
+		"vue": "^2.6.11"
 	}
 }

public/index.html

@@ -1095,7 +1095,6 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
 	</div>
 </body>
 <script type="text/javascript" src="/public/js/vendor/socket.io.js"></script>
-<script type="text/javascript" src="/public/js/vendor/vue.min.js"></script>
 
 <script src="/public/js/bundle.js"></script>
 

rollup.config.js

@@ -1,9 +1,10 @@
 import resolve from '@rollup/plugin-node-resolve'
 import commonjs from '@rollup/plugin-commonjs'
+import replace from '@rollup/plugin-replace'
 import { terser } from 'rollup-plugin-terser'
 
-// `npm run watch:js` -> `production` is false
+// 'npm run watch:js' -> 'production' is false
-// `npm run build:js` -> `production` is true
+// 'npm run build:js' -> 'production' is true
 const production = !process.env.ROLLUP_WATCH
 
 export default {
@@ -16,6 +17,11 @@ 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.esm' (vue.esm is made for bundlers)
+		replace({
+			'process.env.NODE_ENV': JSON.stringify(production ? 'production' : 'development')
+		}),
 		resolve(), // Tells Rollup how to find imported modules in node_modules
 		commonjs(), // Converts imported modules to ES modules, if necessary
 		production && terser() // Minify, but only in production

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

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

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

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

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

@@ -1,3 +1,4 @@
+import Vue from 'vue/dist/vue.esm'
 import { socket } from '../socket.js'
 import { playlistView, artistView, albumView, spotifyPlaylistView } from '../tabs.js'
 import Downloads from '../downloads.js'
@@ -31,11 +32,21 @@ const FavoritesTab = new Vue({
 		openQualityModal(e) {
 			QualityModal.open(e.currentTarget.dataset.link)
 		},
-		updated_userSpotifyPlaylists(data){this.spotifyPlaylists = data},
+		updated_userSpotifyPlaylists(data) {
-		updated_userPlaylists(data){this.playlists = data},
+			this.spotifyPlaylists = data
-		updated_userAlbums(data){this.albums = data},
+		},
-		updated_userArtist(data){this.artists = data},
+		updated_userPlaylists(data) {
-		updated_userTracks(data){this.tracks = data},
+			this.playlists = data
+		},
+		updated_userAlbums(data) {
+			this.albums = data
+		},
+		updated_userArtist(data) {
+			this.artists = data
+		},
+		updated_userTracks(data) {
+			this.tracks = data
+		},
 		initFavorites(data) {
 			this.tracks = data.tracks
 			this.albums = data.albums

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

@@ -1,3 +1,4 @@
+import Vue from 'vue/dist/vue.esm'
 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,3 +1,4 @@
+import Vue from 'vue/dist/vue.esm'
 import { socket } from '../socket.js'
 import { albumView } from '../tabs.js'
 import Utils from '../utils.js'

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

@@ -1,3 +1,4 @@
+import Vue from 'vue/dist/vue.esm'
 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,3 +1,4 @@
+import Vue from 'vue/dist/vue.esm'
 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 { socket } from '../socket.js'
 import { albumView, artistView } from '../tabs.js'
 import Downloads from '../downloads.js'

src/js/modules/tabs.js

@@ -61,6 +61,7 @@ function analyzeLink(link) {
 }
 
 function linkListeners() {
+	// console.log(document.documentElement.outerHTML)
 	document.getElementById('search_tab').addEventListener('click', handleSearchTabClick)
 	document.getElementById('favorites_tab').addEventListener('click', handleFavoritesTabClick)
 	document.getElementById('sidebar').addEventListener('click', handleSidebarClick)