Users should be able to view their profile as well as that of other users. Create a UserProfile component within the Profile folder and paste the code below into it:

// src/components/User/Profile/UserProfile.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="eight wide column">
                <div class="ui segment">
                    <h2 class="ui medium dividing header">Tweets</h2>

                    <Tweets
                        :tweets.sync="tweets"
                        :auth-user="authUser"
                    />
                </div>
            </div>
            <div class="four wide column">
                <WhoToFollow v-if="isLoggedIn"/>
            </div>
        </div>
    </div>
</template>

This component makes use of UserProfileHeader, UserProfileSidebarDetails, Tweets and WhoToFollow components. The WhoToFollow component is only rendered when the user viewing the profile is logged in.

Next, let's add the corresponding JavaScript to the component. Still within src/components/User/Profile/UserProfileHeader.vue, add the code below just after the template section:

Table of Contents

    // src/components/User/Profile/UserProfile.vue
    
    <script>
        import UserProfileHeader from '@/components/User/Profile/UserProfileHeader'
        import UserProfileSidebarDetails from '@/components/User/Profile/UserProfileSidebarDetails'
        import WhoToFollow from '@/components/User/WhoToFollow'
        import Tweets from '@/components/Tweet/Tweets'
    
        export default {
            name: 'UserProfile',
            components: {
                UserProfileSidebarDetails,
                UserProfileHeader,
                WhoToFollow,
                Tweets
            },
            data () {
                return {
                    user: '',
                    authUser: '',
                    tweets: []
                }
            },
            beforeRouteUpdate (to, from, next) {
                this.fetchUser(to.params.username)
    
                next()
            },
            computed: {
                isLoggedIn () {
                    return !!this.authUser
                }
            },
            created () {
                this.fetchUser(this.$route.params.username)
    
                const token = localStorage.getItem('tweetr-token')
    
                if (token) {
                    this.fetchAuthenticatedUser(token)
                }
            },
            methods: {
                fetchUser (username) {
                    axios.get(`/${username}`).then(response => {
                        this.user = response.data.data
                        this.tweets = response.data.data.tweets.reverse()
                    })
                },
                fetchAuthenticatedUser (token) {
                    axios
                        .get('account/me', {
                            headers: {
                                Authorization: `Bearer ${token}`
                            }
                        })
                        .then(response => {
                            this.authUser = response.data.data
                        })
                }
            }
        }
    </script>

    We import the components then define the needed data. We define a isLoggedIn computed property that checks whether a user is logged in or not. Then we define a fetchUser method that fetch the details of a user by the supplied username along with the user's tweets. This username is passed as route parameter. Notice we called the fetchUser method twice, first in the created method and in the beforeRouteUpdate method. Since this component will be used to render different users profile and because we are fetching user's details based on the username route parameter passed, we need a way to update the component when we immediately switch from one user's profile to another. That's where the beforeRouteUpdate method comes in, once the username parameter changes, this method is called. So we are simply fetching the user details based of the changed username parameter then calling next() for execution to continue on as normal. If the user is logged in, we fetch the details of the authenticated user.

    Adding View Profile Route

    Open src/router/index.js, and add the code below to it:

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

    Click on a user to view the user's profile, and we should have something similar to the image below:

    Chimezie Enyinnaya

    20 posts

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