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

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'
@@ -9,13 +10,13 @@ const ChartsTab = new Vue({
 	data() {
 		return {
 			country: '',
-      id: 0,
-      countries: [],
-      chart: []
+			id: 0,
+			countries: [],
+			chart: []
 		}
 	},
 	methods: {
-    artistView,
+		artistView,
 		albumView,
 		playPausePreview: TrackPreview.playPausePreview,
 		previewMouseEnter: TrackPreview.previewMouseEnter,
@@ -28,38 +29,38 @@ const ChartsTab = new Vue({
 		openQualityModal(e) {
 			QualityModal.open(e.currentTarget.dataset.link)
 		},
-    getTrackList(e){
-      this.country = e.currentTarget.dataset.title
-      localStorage.setItem('chart', this.country)
-      this.id = e.currentTarget.dataset.id
-      socket.emit('getChartTracks', this.id)
-    },
-    setTracklist(data){
-      this.chart = data
-    },
-    changeCountry(){
-      this.country = ''
-      this.id = 0
-    },
+		getTrackList(e) {
+			this.country = e.currentTarget.dataset.title
+			localStorage.setItem('chart', this.country)
+			this.id = e.currentTarget.dataset.id
+			socket.emit('getChartTracks', this.id)
+		},
+		setTracklist(data) {
+			this.chart = data
+		},
+		changeCountry() {
+			this.country = ''
+			this.id = 0
+		},
 		initCharts(data) {
-      this.countries = data
-      this.country = localStorage.getItem('chart') || ''
-      if (this.country){
-        let i = 0
-        for (i; i < this.countries.length; i++) if (this.countries[i].title == this.country) break
-        if (i != this.countries.length){
-          this.id = this.countries[i].id
-          socket.emit('getChartTracks', this.id)
-        }else{
-          this.country = ''
-          localStorage.setItem('chart', this.country)
-        }
-      }
+			this.countries = data
+			this.country = localStorage.getItem('chart') || ''
+			if (this.country) {
+				let i = 0
+				for (i; i < this.countries.length; i++) if (this.countries[i].title == this.country) break
+				if (i != this.countries.length) {
+					this.id = this.countries[i].id
+					socket.emit('getChartTracks', this.id)
+				} else {
+					this.country = ''
+					localStorage.setItem('chart', this.country)
+				}
+			}
 		}
 	},
 	mounted() {
 		socket.on('init_charts', this.initCharts)
-    socket.on('setChartTracks', this.setTracklist)
+		socket.on('setChartTracks', this.setTracklist)
 	}
 }).$mount('#charts_tab')
 

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_userPlaylists(data){this.playlists = data},
-		updated_userAlbums(data){this.albums = data},
-		updated_userArtist(data){this.artists = data},
-		updated_userTracks(data){this.tracks = data},
+		updated_userSpotifyPlaylists(data) {
+			this.spotifyPlaylists = data
+		},
+		updated_userPlaylists(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)