In the UserProfileHeader component, notice there are links to view users following, user followers and user favorites, respectively. Let's start by handling users following. We'll create a UsersFollowing component which will simply display cards of users a user is following. Before we get to creating this component, let's quickly create a UserCard component.

Within src/components/User/Profile create a UserCard.vue file and paste the code below into it:

// src/components/User/Profile/UserCard.vue

<template>
    <div class="column">
        <div class="ui card">
            <div class="content">
                <img class="right floated mini ui image" src="https://www.gravatar.com/avatar/default?s=200&r=pg&d=mm">
                <div class="header">
                    <router-link :to="`/${user.username}`">{{ user.name }}</router-link>
                </div>
                <div class="meta">
                    {{ `@${user.username}` }}
                </div>
                <div class="description">
                    {{ user.bio }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'UserCard',
        props: {
            user: {
                type: Object,
                required: true
            }
        }
    }
</script>

This component takes a user as its only props. Using the user props, it renders the user's name linked to his/her profile, username and user bio.

Table of Contents

    Now, let's create the UsersFollowing component within the Profile folder and paste the code below into it:

    // src/components/User/Profile/UsersFollowing.vue
    
    <template>
        <div>
            <UserProfileHeader
                :user="user"
                :auth-user="authUser"
            />
            <div class="ui stackable grid container">
                <div class="four wide column">
                    <UserProfileSidebarDetails :user="user"/>
                </div>
                <div class="twelve wide column">
                    <div class="ui segment">
                        <div class="ui three column grid">
                            <UserCard
                                v-for="following in user.following"
                                :key="following.id"
                                :user="following"
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>
    
    <script>
        import UserProfileHeader from '@/components/User/Profile/UserProfileHeader';
        import UserCard from '@/components/User/Profile/UserCard';
        import UserProfileSidebarDetails from '@/components/User/Profile/UserProfileSidebarDetails';
        import profileMixin from '@/mixins/profileMixin';
    
        export default {
            name: 'UsersFollowing',
            mixins: [profileMixin],
            components: {
                UserProfileHeader,
                UserCard,
                UserProfileSidebarDetails
            },
            data () {
                return {
                    user: '',
                    authUser: ''
                }
            }
        }
    </script>

    Just like the UserProfile, this component uses both UserProfileHeader and UserProfileSidebarDetails components. We also import the UserCard component. This component simply render cards of users a user is following. Notice we make use of a mixin called profileMixin which we will create shortly.

    Creating profileMixin Mixin

    Since we'll have some logic that would be used across users following, user followers and user favorite. It makes sense to extract this logic into a mixin and just use the mixin in places we'd want that logic instead of having to rewrite those logic over and over again.

    Within the src folder, create a new folder called mixins. Within the mixins folder, create a new profileMixin.js file and paste the code below in it:

    // src/mixins/profileMixin.js
    
    import axios from 'axios'
    
    export default {
        created () {
            this.$_profileMixin_fetchUser(this.$route.params.username)
    
            const token = localStorage.getItem('tweetr-token')
    
            if (token) {
                this.$_profileMixin_fetchAuthenticatedUser(token)
            }
        },
        methods: {
            $_profileMixin_fetchUser (username) {
                if (username) {
                    axios.get(`/${username}`).then(response => {
                        this.user = response.data.data
                    })
                } else {
                    const token = localStorage.getItem('tweetr-token')
    
                    axios
                        .get('account/me', {
                            headers: {
                                Authorization: `Bearer ${token}`
                            }
                        })
                        .then(response => {
                            this.user = response.data.data
                        })
                }
            },
            $_profileMixin_fetchAuthenticatedUser (token) {
                axios
                    .get('account/me', {
                        headers: {
                            Authorization: `Bearer ${token}`
                        }
                    })
                    .then(response => {
                        this.authUser = response.data.data
                    })
            }
        }
    }

    First, we import axios. If there is a username parameter which signifies that a user is not viewing his/her own profile, we fetch the user's details based on the username parameter. Otherwise, we fetch the details of the authenticated user. If the user is logged in, we fetch the details of the authenticated user.

    Adding Users Following Route

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

    // src/router/index.js
    
    import UsersFollowing from '@/components/User/Profile/UsersFollowing'
    
    // add these inside the `routes` array
    // add these above the user profile route
    {
        path: '/following',
        component: UsersFollowing
    },
    {
        path: '/:username/following',
        component: UsersFollowing,
        props: true,
    },

    We should be able to see users a particular user is following now:

    Chimezie Enyinnaya

    19 posts

    Software Developer [PHP Laravel JavaScript NodeJS AdonisJS VueJS] | movie lover | run http://openlaravel.com