How to implement the Twilio Vue.js tutorial

Question

I tried following this Twilio tutorial: https://www.twilio.com/blog/create-video-conference-app-laravel-php-vue-js

Since it is based on Laravel 6, I encountered some bugs in 2022. I've fixed the routing by adding the full namespace of AccessTokenController

But in the tutorial I was asked to "Replace the code in welcome.blade.php with the following:"

...
<script>
export default {
    name: 'video-chat',
    data: function () {
        return {
            accessToken: ''
        }
    },
    methods : {
        getAccessToken : function () {

            const _this = this
            const axios = require('axios')
            
            // Request a new token
            axios.get('/api/access_token')
                .then(function (response) {
                    _this.accessToken = response.data
                })
                .catch(function (error) {
                    console.log(error);
                })
                .then(function () {
                    console.log( _this.accessToken )
                });
        }
    },
    mounted : function () {
        console.log('Video chat room loading...')

        this.getAccessToken()
    }
}
</script>

But I think the author made a mistake and actually meant the VideoChat.vue file content.

But the pasted code doesn't work. I don't even get the console log. Since I'm new to vue.js, I wanted to ask the community about possible errors.

Thank you for your reply in advance.

Answer 1

I think you are right, the code you pasted should go into VideoChat.vue.

In welcome.blade.php, make sure you have replaced <example-component></example-component> with <video-chat> ;</video-chat>. You should then see some logs in the console and the application gets the access token.