Gain insights into Vue 3 by building a Medium clone. Learn about creating login, home, and register screens, user authentication, and making API calls for dynamic data.

tarball.tar.gz

run-org

run-navbar

run-vue-router

run-footer

run-register

run-login-screen

run-home-1

run-home-2

run-home-3

run-settings

run-login-config

run-updatingUI

run-logout

run-separate-article-preview

run-fetching-article-data

run-article-feed-tabs

run-user-info

run-tabs-and-articles

This is an exciting course that will introduce you to Vue 3 along with most of its workings. 

You will create a Medium-like clone in this tutorial series learning all the basics of the latest Vue framework. You will learn how to create a login, home, and register screen, as well as how to implement user authentication in a Vue application. Lastly, you will also learn how to make API calls for a web application to fetch dynamic data.

By the end of this course, you will be able to start using Vue in your applications and you’ll have a nice new piece to add to your portfolio.

Building a Medium Clone With Vue 3

Here, we are going to implement the login functionality using the action from the `users` module. We will start by defining some variables and methods inside the **Login.vue** file as shown in the code snippet below:

# Binding state variables to login function
We have three state variables: `email`, `password`, and `error` array. We also have a function called `login`.  The `login` function uses the `dispatch` method from our instance of store to call the `loginUser` action, which is inside the `users` module. After a successful login, we redirect the user to the home page.

The next step is to bind these variables and the `login` function to the login template we created before. For that, you can check the code from the following code snippet:

Learn how to implement the login functionality with Vuex.

Getting Started

Login, Register, and Home Screen

User Authentication

Implement Dynamic Article List and Profile Page

Appendix

Login Configuration