freezerpc/app/client/src/views/Library.vue

<template>
<div>
    <h1>{{$t("Library")}}</h1>

    <v-tabs v-model='tab'>
        <v-tab key='tracks'>
            {{$t("Tracks")}}
        </v-tab>
        <v-tab key='albums'>
            {{$t("Albums")}}
        </v-tab>
        <v-tab key='artists'>
            {{$t("Artists")}}
        </v-tab>
        <v-tab key='playlists'>
            {{$t("Playlists")}}
        </v-tab>
        <v-tab key='history'>
            {{$t("History")}}
        </v-tab>
    </v-tabs>

    <v-tabs-items v-model='tab'>
        <!-- Tracks -->
        <v-tab-item key='tracks'>
            <LibraryTracks height='calc(100vh - 290px)'></LibraryTracks>
        </v-tab-item>

        <!-- Albums -->
        <v-tab-item key='albums'>
            <LibraryAlbums></LibraryAlbums>
        </v-tab-item>

        <!-- Artists -->
        <v-tab-item key='artists'>
            <LibraryArtists></LibraryArtists>
        </v-tab-item>

        <!-- Playlists -->
        <v-tab-item key='playlists'>
            <LibraryPlaylists></LibraryPlaylists>
        </v-tab-item>

        <!-- History -->
        <v-tab-item key='history'>
            <LibraryHistory></LibraryHistory>
        </v-tab-item>
    </v-tabs-items>

</div>
</template>

<script>
import LibraryTracks from '@/components/LibraryTracks.vue';
import LibraryAlbums from '@/components/LibraryAlbums.vue';
import LibraryArtists from '@/components/LibraryArtists.vue';
import LibraryPlaylists from '@/components/LibraryPlaylists.vue';
import LibraryHistory from '@/components/LibraryHistory.vue';

export default {
    name: 'Library',
    components: {
        LibraryTracks, LibraryAlbums, LibraryArtists, LibraryPlaylists, LibraryHistory
    },
        props: {
        routeTab: {
            default: 'tracks',
            type: String
        }
    },
    data() {
        return {
            tab: null,
            tabs: ['tracks', 'albums', 'artists', 'playlists'],

        }
    },
    methods: {

    },
    mounted() {
        //Make mutable
        this.tab = this.tabs.indexOf(this.routeTab);
    },
    watch: {
        //Update when navigating from drawer
        routeTab() {
            this.tab = this.tabs.indexOf(this.routeTab);
        }
    }
}
</script>