Learn by Doing: Vue JS 2.0 the Right Way

Register a Vue.js 2.0 form using v-model for two-way data binding, bind inputs to user data, send a POST to the API with vue-resource, and handle success and error notifications.

Learn to build a login flow in Vue.js 2.0, posting credentials to an authentication endpoint while using interceptors and environment variables for development and production.

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.

Set up dash, sidebar, and newsfeed components in a Vue.js app, configure routes with dash as a wrapper and redirect to the newsfeed for seamless navigation.

Implement route guards to prevent guest users from viewing protected pages, redirect to login, then return to the requested news feed after authentication.

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.

Retrieve beeps from an endpoint and render them in a news feed using two new components, a beep component, and directives like v-for and v-bind to pass beep objects.

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.

Learn how to use Vuex as a centralized store to manage and access the current user across components, using state, mutations, and computed properties for reactive updates.

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.