started implementing Vue Router; updated README.md; corrected an italian translation

src/app.js

@@ -7,6 +7,7 @@ window.vol = {
 
 import App from '@components/App.vue'
 import i18n from '@/plugins/i18n'
+// import router from '@/plugins/router'
 
 import $ from 'jquery'
 import { socket } from '@/utils/socket'
@@ -21,8 +22,8 @@ function startApp() {
 }
 
 function mountApp() {
-	// TODO Remove the App instance from the window when deemix will be a complete Vue App
 	new Vue({
+		// router,
 		i18n,
 		render: h => h(App)
 	}).$mount('#app')
@@ -148,10 +149,8 @@ socket.on('errorMessage', function(error) {
 })
 
 socket.on('queueError', function(queueItem) {
-	if (queueItem.errid)
-		toast(i18n.t(`errors.ids.${queueItem.errid}`), 'error')
-	else
-		toast(queueItem.error, 'error')
+	if (queueItem.errid) toast(i18n.t(`errors.ids.${queueItem.errid}`), 'error')
+	else toast(queueItem.error, 'error')
 })
 
 socket.on('alreadyInQueue', function(data) {

src/components/TheMainContent.vue

@@ -1,5 +1,7 @@
 <template>
 	<main id="main_content">
+		<!-- <router-link to="/tracklist/132">Go to Foo</router-link> -->
+		<!-- <router-view></router-view> -->
 		<TheMiddleSection />
 		<TheDownloadTab />
 	</main>
@@ -13,6 +15,9 @@ export default {
 	components: {
 		TheMiddleSection,
 		TheDownloadTab
+	},
+	mounted() {
+		console.log(this.$route)
 	}
 }
 </script>

src/components/TheSettingsTab.vue

@@ -26,7 +26,7 @@
 			<a href="https://codeberg.org/RemixDev/deemix/wiki/Getting-your-own-ARL" target="_blank">
 				{{ $t('settings.login.arl.question') }}
 			</a>
-			<button id="settings_btn_updateArl" @click="login" style="width:100%;">
+			<button id="settings_btn_updateArl" @click="login" style="width: 100%;">
 				{{ $t('settings.login.arl.update') }}
 			</button>
 		</div>

src/components/TracklistTab.vue

@@ -60,9 +60,9 @@
 									</i>
 									{{
 										track.title +
-											(track.title_version && track.title.indexOf(track.title_version) == -1
-												? ' ' + track.title_version
-												: '')
+										(track.title_version && track.title.indexOf(track.title_version) == -1
+											? ' ' + track.title_version
+											: '')
 									}}
 								</div>
 							</td>
@@ -131,7 +131,7 @@
 				</template>
 			</tbody>
 		</table>
-		<span v-if="label" style="opacity: 0.40;margin-top: 8px;display: inline-block;font-size: 13px;">{{ label }}</span>
+		<span v-if="label" style="opacity: 0.4; margin-top: 8px; display: inline-block; font-size: 13px;">{{ label }}</span>
 		<footer>
 			<button @contextmenu.prevent="openQualityModal" @click.stop="addToQueue" :data-link="link">
 				{{ `${$t('globals.download', [$tc(`globals.listTabs.${type}`, 1)])}` }}
@@ -289,10 +289,11 @@ export default {
 			}
 		},
 		selectRow(index, track) {
-			track.selected = !track.selected;
+			track.selected = !track.selected
 		}
 	},
 	mounted() {
+		console.log('tracklist mounted')
 		EventBus.$on('tracklistTab:reset', this.reset)
 		EventBus.$on('tracklistTab:selectRow', this.selectRow)
 

src/lang/it.js

@@ -106,7 +106,7 @@ const it = {
 		needTologin: 'Devi accedere al tuo account Deezer, fino a quel momento non potrai scaricare nulla.',
 		openSettings: 'Apri le impostazioni',
 		sections: {
-			popularPlaylists: 'Playlyst Popolari',
+			popularPlaylists: 'Playlist Popolari',
 			popularAlbums: 'Album più riprodotti'
 		}
 	},

src/plugins/router.js

@@ -0,0 +1,36 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+import TracklistTab from '@components/TracklistTab.vue'
+
+console.log(TracklistTab)
+
+Vue.use(VueRouter)
+
+const routes = [
+	{
+		path: '/tracklist/:id',
+		component: TracklistTab
+	},
+	// 404
+	{
+		path: '*',
+		component: TracklistTab
+	}
+]
+
+const router = new VueRouter({
+	mode: 'history',
+	// linkActiveClass: 'open',
+	routes,
+	scrollBehavior(to, from, savedPosition) {
+		return { x: 0, y: 0 }
+	}
+})
+
+router.beforeEach((to, from, next) => {
+	console.log({ from, to })
+	next()
+})
+
+export default router