how to solve these errors my friends

[mkl17]

how to solve these errors my friends

AppLayout.vue

<template>
    <div style="width: 100%;height: 100%;">
        <div v-if="!isLoggedIn">
            <md-dialog class="auth-modal clearfix" :md-active.sync="showLoginDialog">
                <div class="left" :style="{ backgroundImage: 'url(' + require('@/assets/images/topo.png') + ')' }">
                    <div class="cover"></div>
                </div>
                <div class="right">
                    <md-dialog-title>Login</md-dialog-title>
                    <div style="padding:10px 20px" class="mt-5">
                        <md-field>
                            <label>Username</label>
                            <md-input v-model="username"></md-input>
                        </md-field>
                        <md-field>
                            <label>Password</label>
                            <md-input type="password" v-model="password"></md-input>
                        </md-field>
                    </div>
                    <md-dialog-actions>
                        <md-progress-spinner class="md-accent mr-2" v-if="loading" :md-diameter="30" :md-stroke="3" md-mode="indeterminate"></md-progress-spinner>
                        <md-button class="md-accent" @click="loginUser">Continue</md-button>
                    </md-dialog-actions>
                </div>
            </md-dialog>
            <md-dialog class="auth-modal clearfix" :md-active.sync="showSignupDialog">
                <div class="left" :style="{ backgroundImage: 'url(' + require('@/assets/images/topo.png') + ')' }">
                    <div class="cover"></div>
                </div>
                <div class="right">
                    <md-dialog-title>Signup for account</md-dialog-title>

                    <div style="padding:10px 20px">
                        <md-field>
                            <label>Full Name</label>
                            <md-input v-model="fullname"></md-input>
                        </md-field>
                        <md-field>
                            <label>Username</label>
                            <md-input v-model="username"></md-input>
                        </md-field>
                        <md-field>
                            <label>Email address</label>
                            <md-input v-model="email"></md-input>
                        </md-field>
                        <md-field>
                            <label>Password</label>
                            <md-input type="password" v-model="password"></md-input>
                        </md-field>
                    </div>
                    <md-dialog-actions>
                        <md-progress-spinner class="md-accent mr-2" v-if="loading" :md-diameter="30" :md-stroke="3" md-mode="indeterminate"></md-progress-spinner>
                        <md-button class="md-accent" @click="loginUser">Continue</md-button>
                    </md-dialog-actions>
                </div>
            </md-dialog>
        </div>
        <md-app md-waterfall md-mode="fixed">
            <md-app-toolbar class="" md-elevation="1" style="box-shadow: none !important;">
                <div class="md-toolbar-row">
                    <div class="md-toolbar-section-start">
                        <md-button class="md-icon-button  md-elevation-1"><md-icon>keyboard_arrow_left</md-icon></md-button>
                        <md-button  class="md-icon-button md-elevation-1"><md-icon>keyboard_arrow_right</md-icon></md-button>
                        <md-menu md-direction="bottom-start" class="ml-1">
                            <md-button md-menu-trigger class="md-icon-button md-primary md-elevation-1">en</md-button>
                            <md-menu-content style="background-color: #fff;">
                                <md-menu-item @click="alert('sddd')">English</md-menu-item>
                                <md-menu-item>French</md-menu-item>
                                <md-menu-item>German</md-menu-item>
                                <md-menu-item>Brazil</md-menu-item>
                                <md-menu-item>Portegues</md-menu-item>
                            </md-menu-content>
                        </md-menu>
                        <md-field class="ml-2 search-box">
                            <md-input class="ml-1" placeholder="Search for tracks, albums, artists...."></md-input>
                            <md-icon>search</md-icon>
                        </md-field>
                    </div>
                    <div class="md-toolbar-section-end">
                        <div v-if="!isLoggedIn">
                            <md-button class="md-primary" v-on:click="showSignupDialog = true">Signup</md-button>
                            <md-button class=" md-accent" v-on:click="showLoginDialog = true">Login</md-button>
                        </div>
                        <div v-else>
                            <md-badge md-content="1" md-dense>
                                <md-button class="md-icon-button">
                                    <md-icon>notifications</md-icon>
                                </md-button>
                            </md-badge>
                            <md-badge md-content="1" md-dense>
                                <md-button class="md-icon-button">
                                    <md-icon>mail</md-icon>
                                </md-button>
                            </md-badge>
                            <md-button  >
                                <img :src="user.avatar" style="width:30px;height:30px;border-radius:100px"/>
                                <span>{{user.full_name}} </span>
                            </md-button>
                            <md-menu md-direction="bottom-start">
                                <md-button class="md-icon-button" md-menu-trigger>
                                    <md-icon>more_vert</md-icon>
                                </md-button>
                                <md-menu-content>
                                    <md-menu-item>My Item 1</md-menu-item>
                                    <md-menu-item>My Item 2</md-menu-item>
                                    <md-menu-item @click="logoutUser">Logout</md-menu-item>
                                </md-menu-content>
                            </md-menu>
                        </div>
                    </div>
                </div>
            </md-app-toolbar>
            <md-app-drawer md-permanent="full"  >
                <md-toolbar class="md-blue" md-elevation="0">
                    <img class="logo" src="./../../assets/images/logo-dark.png"/>
                </md-toolbar>
                <md-list>
                    <md-subheader>{{$t('explore')}}</md-subheader>
                    <md-list-item class="active">
                        <md-icon>home</md-icon>
                        <span class="md-list-item-text">{{$t('home')}}</span>
                    </md-list-item>
                    <md-list-item>
                        <md-icon>explore</md-icon>
                        <span class="md-list-item-text">{{$t('browse')}}</span>
                    </md-list-item>
                    <md-list-item>
                        <md-icon>bar_chart</md-icon>
                        <span class="md-list-item-text">{{$t('charts')}}</span>
                    </md-list-item>
                    <md-list-item>
                        <md-icon>video_label</md-icon>
                        <span class="md-list-item-text">{{$t('videos')}}</span>
                    </md-list-item>
                    <md-list-item>
                        <md-icon>shopping_cart</md-icon>
                        <span class="md-list-item-text">{{$t('store')}}</span>
                    </md-list-item>
                    <md-subheader>{{$t('my-collection')}}</md-subheader>
                    <md-list-item>
                        <md-icon>alarm</md-icon>
                        <span class="md-list-item-text">{{$t('listen-later')}}</span>
                    </md-list-item>
                    <md-list-item>
                        <md-icon>calendar_today</md-icon>
                        <span class="md-list-item-text">{{$t('history')}}</span>
                    </md-list-item>
                    <md-list-item>
                        <md-icon>favorite_border</md-icon>
                        <span class="md-list-item-text">{{$t('likes')}}</span>
                    </md-list-item>
                    <md-list-item>
                        <md-icon>horizontal_split</md-icon>
                        <span class="md-list-item-text">{{$t('playlists')}}</span>
                    </md-list-item>
                    <md-list-item>
                        <md-icon>subject</md-icon>
                        <span class="md-list-item-text">{{$t('albums')}}</span>
                    </md-list-item>
                    <md-list-item>
                        <md-icon>alarm</md-icon>
                        <span class="md-list-item-text">{{$t('watch-later')}}</span>
                    </md-list-item>
                </md-list>
            </md-app-drawer>
            <md-app-content>
                <slot></slot>
            </md-app-content>
        </md-app>
        <md-snackbar md-position="left"  :md-active.sync="showSnackbar" md-persistent>
            <span>{{this.message}}</span>
            <md-button class="md-primary" @click="showSnackbar = false">Close</md-button>
        </md-snackbar>
    </div>
</template>
<script>
    export default {
        name: 'landing-page',
        methods: {
            logoutUser() {
                this.$storage.logout();
                this.isLoggedIn = false;
            },
            loginUser (link) {
                if (this.username === '' || this.password === '') {
                    this.message = "Provide your username and password to continue";
                    this.showSnackbar = true;
                    return false;
                }
                this.loading = true;
                this.$http.get('login', {
                    params: {
                        username: this.username,
                        password: this.password
                    }
                })
                    .then((response)  => {
                        this.loading  = false;
                        if (response.data.status === 1) {
                            this.$storage.set("userid", response.data.id);
                            this.$storage.set('access_key', response.data.key);
                            this.$storage.set("user_data", response.data);
                            this.showLoginDialog = false;
                            this.isLoggedIn = true;
                            this.username = null;
                            this.password = null;
                            this.user = this.$storage.getUser();
                        } else {
                            this.message = "Invalid login details";
                            this.showSnackbar = true;
                        }
                    })
                    .catch(function (error) {
                        this.loading  = false;
                            this.message = this.$t("something-went-wrong");
                        this.showSnackbar = true;
                    });
            }
        },
        data() {
            const user = this.$storage.getUser();
            return {
                isLoggedIn : (this.$storage.isLoggedIn()) ? true : false,
                showLoginDialog : false,
                showSignupDialog: false,
                password: '',
                username: '',
                fullname: '',
                email: '',
                user: user,
                message: '',
                loading: false,
                showSnackbar: false

            }
        }
    }
</script>

LandingPage.vue

<template>
  <AppLayout>
      <h5 class="md-headline">Featured</h5>
      <TrackList displayType="horizontal-list" type="global-spotlight" limit="20"></TrackList>
      <div class="mt-3">
          <div class="md-layout">
              <div class="md-layout-item">
                  <h5 class="md-headline">Top Tracks</h5>
                  <TrackList displayType="inline-list" type="global-spotlight" limit="10"></TrackList>
              </div>
              <div class="md-layout-item">
                  <h5 class="md-headline">Popular Albums</h5>
              </div>
          </div>
      </div>
  </AppLayout>
</template>
<script>
  import AppLayout from './../components/layouts/AppLayout';
  import TrackList from './../components/lists/TrackList';
  export default {
      name: 'landing-page',
      created() {
          console.log(this.$player);
      },
      methods: {

      },
      components: {AppLayout,TrackList},
      data: () => ({
          menuVisible: true,
          showLoginDialog: true
      }),
  }
</script>

App.vue

<template>
  <div id="app" class="">
      <router-view></router-view>
  </div>
</template>

<script>
    export default {
        name: 'dpark',

    }
</script>
<style lang="scss">
    @import "/assets/css/google.scss";
    @import "/assets/css/vue-material.min.scss";
    @import "/assets/css/default.scss";
    @import "/assets/css/app.scss";
</style>

[m4heshd]

This is not related to Electron. You should use the Vue forum for these kinds of questions.

[VerteDinde]

Thanks for reaching out and logging this issue! Because we treat our issues list as the team's backlog, we close issues that are questions since they don't represent a task needing to be completed.

This seems be a question about Vue specifically; I would recommend trying the Vue forum linked above to answer your question. There are also a bunch of helpful people in this Discord that should be willing to point you in the right direction - we have many active help channels and mentors, as well as fellow devs, who can help you out.