Learn by Doing: Vue JS 2.0 the Right Way

Learn to build a custom Vue 2 authentication plugin that stores tokens and expiration in local storage, handles login/logout, and uses navigation guards to protect routes and redirect authenticated users.

Enhance the sidebar by fetching current user data via an API, displaying the username and avatar, implementing logout, binding input with v-model and a 320-character limit, and adding route transitions.

Send a patch request to the endpoint to update the like state of the current beep for the authenticated user, updating the UI in real time.

Set up the profile component and route, fetch data by dynamic username, show only that user’s beeps via a profile-specific endpoint, and toggle user info with a prop.

Learn how to use watchers in Vue JS 2.0 to react to route changes, fetch user data from the API endpoint, and navigate between profiles with router links.

Learn to make profiles accessible to unauthenticated users in a Vue.js 2.0 app by guarding actions like liking beeps, hiding the sidebar, and prompting login with an auth plugin.

Build the settings component in Vue.js, guard its route for logged-in users, replace the anchor with router-link, and handle file input changes to upload and update settings.

Retrieve the current user from the store via a computed property in settings, clone to detach updates, and enable local avatar preview before server update.

Publish beeps by posting to /beeps with text bound to the textarea, then display notifications and clear the input to show the beep in the news feed.

Learn to use custom events in Vue to emit and listen for new data, updating beeps in both the news feed and user profile instantly.