Vuejs Rest authentication with axios + jwt + Vuetify

Posted by Adarshreddy Adelli

Sunday, August 9, 2020

We rocked in our previous posts, where we successfully built a backend for our music streaming app using Django, Django rest framework and enhanced security using JWT. In this, we will be using vuejs to build a beautiful frontend for our music API. However, this tutorial should work for any backend you built. Let's not make this posting boring with traditional UI instead, let's try to make our music streaming app look professional. we will be using vuetify for this, a material design UI framework for vuejs.

Let's get started

vue create ronix //using vue_cli

Select manual preset and select vue router, vuex, Babel

cd ronix

vue add vuetify //adding vuetify using Vue CLI

Vuex documentation says " Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion". For us, we do not want our users to login every time. So we use vuex to manage user's state whether he/she is logged in or not according to the life cycle of jwt.
Let's create our homepage so that the user can register and login.

Now we handle our user state using vuex

Let's add beautiful navbar in views/App.vue

Let's create a signup vue in views

Now create our songs component in Components

However, this needs lots of improvement like building up a music player instead of a native media player, playlist etc.. Stay connected with this blog we will make updates.

Finally, let's make routes to pages using vue router


Yay! we have built a music streaming app entirely from scratch using Django, DRF and vuejs. Thanks for your huge support! As always proud to be a Dev 👨‍💻 .

Kindly share this post with your fellow Devs!

Adarshreddy Adelli Sunday, August 9, 2020 Nodejs python web development