Build a Twitter Clone With Adonis and Vue

Displaying a Single Tweet

Create a Tweet/SingleTweet.vue file inside src/components/Tweet and paste the code below in it:

// src/components/Tweet/SingleTweet.vue

    <div class="ui stackable two column centered vertically padded grid container">
        <div class="column">
            <a class="ui button mini primary" @click="back">Back</a>
            <div class="ui feed">
                <div class="event">
                    <div class="label">
                        <img src="">
                    <div class="content">
                        <div class="summary">
                            <router-link :to="`/${tweet.user.username}`">
                                {{ }}
                                <small>{{ `@${tweet.user.username}` }}</small>
                        <div class="extra text">
                            {{ tweet.tweet }}

            <div class="ui divider"></div>

    export default {
        name: 'SingleTweet',
        data () {
            return {
                tweet: ''
        created () {
        methods: {
            fetchTweet () {
                axios.get(`/tweets/${this.$}`).then(response => {
                    this.tweet =
            back () {

The component is pretty straightforward. It fetches and displays a tweet. The fetchTweet method makes a GET request to the /tweets/:id endpoint of our API, where :id is the ID of the tweet we want to fetch. The route parameters are available in this.$route.params. So, to get the id parameter we do this.$ Also, we implement a back method using Vue router's go method to take users back to the previous page.

Adding View Tweet Route

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

// src/router/index.js

import SingleTweet from '@/components/Tweet/SingleTweet'

// add these inside the `routes` array
    path: '/:username/status/:id',
    component: SingleTweet,
    props: true

By adding props: true, we want the route paramters (username and id) to be used as component props.

Tips: This route should be the very last in the list of routes due to the fact that it a wildcard route. Subsequent routes will be added above it.

We should be able to click on a tweet to view it now:

Like this article? Follow @ammezie on Twitter