2020-07-05 14:57:09 +02:00

54 lines
1.3 KiB
Vue

<template>
<div>
<nav>
<ul>
<li
v-for="link in links"
:key="link.name"
class="text-blue-200"
>
<nuxt-link
v-if="link.url"
:to="link.url"
class="underline"
>{{ link.name }}</nuxt-link
>
<button v-else class="underline" @click="link.action">
{{ link.name }}
</button>
</li>
</ul>
</nav>
<client-only>
<div v-if="$auth.$state.loggedIn">
User: {{ $auth.$state.user }}
</div>
</client-only>
</div>
</template>
<script>
export default {
name: 'Home',
data: () => ({
links: [
{ url: '/signin', name: 'Sign In' },
{ url: '/register', name: 'Register' },
{ url: '/notes', name: 'Notes' },
{ action: 'logout', name: 'Sign Out' },
],
}),
options: {
auth: false, // FIXME: auth: 'guest'
},
methods: {
async logout() {
this.$store.commit('notes/clear')
await this.$auth.logout()
},
},
}
</script>
<style scoped></style>