Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
ProfileButton.vue
<template>
<a href="#" class="flex-shrink-0 w-full group block">
<div class="flex items-center">
<div>
<avatar
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixqx=uNthX00zQD&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt="tom cook"
/>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-700 group-hover:text-gray-900">
{{ user.name }}
</p>
<p class="text-xs font-medium text-gray-500 group-hover:text-gray-700">
View profile
</p>
</div>
</div>
</a>
</template>
<script>
import { mapGetters } from 'vuex'
import Avatar from '../simple/Avatar.vue'
export default {
name: 'profile-button',
components: { Avatar },
computed: {
...mapGetters({
user: 'user/getUser'
})
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment