Vue JS Portfolio Project - Vue Training for Beginners

Build a Vue register page by creating a register view, wiring a route, and implementing a three-field sign-up form (username, email, password) with login navigation.

Discover how Redux and Vuex provide a single global state container, where components trigger actions and mutations to update state, and subscribe to changes to reflect updated counts.

Learn to structure Vuex with an authentication module to namespace state and mutations, implement isSubmitting, and bind the register form to commit register start on submit.

Master Vuex actions by distinguishing them from mutations, implementing asynchronous api calls in actions, and dispatching actions from components to manage loading states and commit mutations.

Learn to implement a production-ready register API request in Vue by building an API wrapper, posting credentials, and handling success or backend validation errors in Vuex.

Bind data properties for username, email, and password with v-model to the register dispatch; track current user, is logged in, and validation errors, and handle start, success, and failure.

Save the access token to local storage after registration, use a persistence storage helper to handle json data, and include the token in authorized backend requests.

Implement a shared validation errors component in a Vue.js register page to render backend validation messages. Normalize errors with a computed property and display readable messages.

Refactor naming in Vuex by introducing mutation and action types with module prefixes, switching to typed keys, and using dynamic keys to avoid global collisions.

Learn to add a login page in a Vue.js app by extending the register page with login mutations and actions, wiring the login API, and sharing state for validation.

Create a reusable Vue top bar that adapts to authentication via map state, showing home, profile, and settings for signed-in users, or sign in and sign up for guests.

Learn how to create and use Vuex getters to derive computed state, map getters, and access current user and anonymous status across components.

Fetch the current user on every page using the access token from local storage, attach it to all requests with an Axios interceptor, and update state with get current user.

Bind the feed component to Vuex data with mapState and computed properties. Render article previews (author, image, read more) and wire routes for profiles and articles.

Build a reusable Vue pagination component for a feed, computing pages from total and limit, generating links from a base url, and syncing the current page in the url.

Bind real data to the pagination, compute current page and limit and offset with computed properties, and merge parameters with a query-string library for the articles api.

Implement a reusable popular tags component in Vue.js, fetch and render popular tags via a Vuex module, and display them in the sidebar across feeds.

Create three small helper components: a banner, a loading indicator, and an error message, to reduce duplication across the global feed and popular texts, enabling easy maintenance and reuse.

create your feed and tag feed using a shared, efficient architecture in a vue project, reusing components to fetch articles from /articles and /articles/feed, with tag-based queries and pagination.

Build a reusable feed toggle component in the Vue.js portfolio project to switch between global feed, your feed, and tag feeds (tech name), showing login-based links and active routing state.

Render a single article page by fetching article data from an API, wire a Vuex article module, and bind title, author, tags, and body to the view.

Implement article delete by wiring the button to a Vuex action, adding an API delete by slug, and redirecting to the home page on success.

Create a reusable tag list component in Vue that takes a tags array and renders each tag with a v-for loop, then integrate it into feed and article views.

Build a shareable, stateless article form component for creating and editing articles in a Vue JS project, including initial values, validation errors, and submit handling.

Bind a create article form to a dedicated Vuex module and handle validation errors. Submit article input to the API, then redirect to the article page using the slug.

Build an edit article page by fetching the article by slug, prefill the form with initial values, and submit updates via a put request, reusing the create article module.

Implement a settings page in a Vuex-backed app by sharing update current user mutations across modules, building a form for username, biography, image, email, and password, and adding logout flow.

Explore how namespaced Vuex modules prefix mutations, actions, and getters, compare global versus local scope, and learn why the instructor avoids namespaces for clarity and global access.

Learn how to implement an add to favorites feature in a Vue.js app, including a reusable component, optimistic updates, and API integration for favoriting articles.

Create a Vue.js user profile page that reuses a feed component to display either a user’s posts or favorites, using slug-based API requests and route watching.

Extend your Vue.js portfolio by implementing article actions—edit, delete, follow, favorite, and comments via an API. Build engaging personal projects like blogs or catalogs.