Create the FavoriteTweets component within the Profile folder and paste the code below into it:

// src/components/User/Profile/FavoriteTweets.vue

        <div class="ui stackable grid container">
            <div class="four wide column">
                <UserProfileSidebarDetails :user="user"/>
            <div class="eight wide column">
                <div class="ui segment">
                    <h2 class="ui medium dividing header">Favorites</h2>

            <div class="four wide column">
                <WhoToFollow v-if="isLoggedIn"/>

    import UserProfileHeader from '@/components/User/Profile/UserProfileHeader'
    import UserProfileSidebarDetails from '@/components/User/Profile/UserProfileSidebarDetails'
    import Tweets from '@/components/Tweet/Tweets'
    import WhoToFollow from '@/components/User/WhoToFollow'
    import profileMixin from '@/mixins/profileMixin'

    export default {
        name: 'FavoriteTweets',
        mixins: [profileMixin],
        components: {
        data () {
            return {
                user: '',
                authUser: ''
        computed: {
            isLoggedIn () {
                return !!this.authUser
            onlyTweets () {
                return Array.from(this.user.favorites, favorite => favorite.tweet).reverse()

Just like the UserProfile component, this component uses the UserProfileHeader and UserProfileSidebarDetails as well as the Tweets component. It also uses the profileMixin mixin. If the user is logged in, we render the WhoToFollow component. The isLoggedIn computer property is used to determine whether a user is logged in or not. The onlyTweets return only the tweets data of the user's favorites.

Adding User Followers Routes

Open src/router/index.js, and add the code below to it just above the user followers routes:

Table of Contents

    // src/router/index.js
    import FavoriteTweets from '@/components/User/Profile/FavoriteTweets'
    // add these inside the `routes` array
        path: '/favorites',
        component: FavoriteTweets
        path: '/:username/favorites',
        component: FavoriteTweets,
        props: true

    We should be able to see a particular user's favorites now:

    Chimezie Enyinnaya

    20 posts

    Software Developer [PHP Laravel JavaScript NodeJS AdonisJS VueJS] | movie lover | run