Master Vuejs from scratch (incl Vuex, Vue Router)

Set up the application structure for a currency converter in a Vue.js project, including from and to currency selectors, an amount input, a convert button, and a results area.

Learn to fetch currencies from the frequency converter API, populate a dropdown with the currency list, and display currencies in a Vue.js app using the mounted hook and axios.

Cache currencies in a Vue.js app by saving currencies to local storage after the first API call and reusing them on subsequent visits to limit API requests.

Convert the currencies object to an array using a computed property, then populate the select boxes with options. Use v-for to render each currency option and display its currency name.

Learn to bind form inputs in Vue.js using v-model for two-way data binding, capture amounts and currencies, and prepare data for the currency conversion API request.

Build a currency converter in a Vue.js app by calling a currency API, handling responses, and displaying the converted amount with three decimals.

Learn to disable the convert button conditionally in Vue by using a computed property that returns true when the amount is zero or missing, updating in real time.

Implement a loading state to disable the button during API requests, and use conditional rendering to show converting versus convert for clear user feedback.

Fix a currency conversion bug in a Vue.js app by adding a watcher to reset the result to zero when the from property changes and when rates update.

Explore how to create custom Vue components, register them with the components option, and use templates to mount reusable cards in a Vue app.

Explore how Vue props customize component behavior by registering title and contents in a props array, then pass data to cards and render the title and contents.

Learn to display a list of articles by looping through an articles array with a custom component, and bind each article's title and content to render dynamic blog cards.

Learn how a child component communicates with its parent using v-on and custom events to trigger actions like deleting an article, with payloads such as the article title.

Master stateful Vue components by using a data function that returns an object for each instance, giving unique state to each card or article and enabling individual claps.

Install Vue CLI globally via npm or yarn, then create a new project with vue create using the default preset and start the dev server with yarn serve on localhost.

Explore the Vue project structure by examining the public and source directories, rendering the up component into the element with id up, and using single-file .vue components.

Install Bootstrap and include CSS, register components, and set up the app component with a container using two columns (col-md-7 and col-md-5) for products and cart.

Create a reusable product component in Vue.js to render a list of products with name, price, and an add-to-cart button. Use a unique key for each item to track changes.

Learn to display products in a Vue component by passing a product object via props, binding it to the component, and formatting the price with toFixed(2).

Learn how to add products to the cart by listening to custom events between components, pushing items into a cart array, and disabling the add button to prevent duplicates.

Master the isInCart check in a Vue app by using array find on product id, pass the result as a prop, and disable the add-to-cart button.

Create a cart component in Vue.js that lists each item with its title and price, includes a remove button, and re-renders as items are added or removed via props.

Learn to remove items from a cart in Vue.js by emitting a custom event with the item payload, and filtering the cart to update the UI reactively.

Display the cart total with a computed property that reduces items by price to a total, updating as items change; enable pay now when items exist and reset after payment.

Discover how vue router enables single-page navigation without page refresh, install and register the router, define routes for logging and sign up, and render components with router-view.

Set up bootstrap in the project with CDN links and a bootstrap navigation bar, then clean up styles, apply the Poppins font, and finalize with a container layout.

Navigate between pages in a single-page application by mounting a router-link and wiring to paths, and style navigation with nav-link classes for login and sign-up.

design and implement a responsive login component in a vue app, including email and password inputs, form groups, bootstrap layout, and a login button, with mirrored sign‑up templates.

Bind the form inputs to a model for name, email, and password, log the data on sign up, and prepare an api request to save it to the server.

Learn how to perform API requests in a Vue app by posting a user registration payload (name, email, password) to /register, handle success with a server token, and manage errors.

Handle successful registration by fetching and persisting the authenticated user data in a shared global state, store it in local storage, and reflect it across routes for a seamless session.

Show the authenticated user's name in navigation and hide login or signup when signed in. Redirect to the home page after signup using Vue Router push.

Shows in Vue how to map server registration errors to per-field messages, display them with v-for, and use dynamic class binding for real-time validation feedback.

Enable a signup loading state by binding a loading flag to signup button, show a spinner during the API request, and navigate to the home screen on success.

Learn to implement a login flow: bind email and password, post to the api, handle errors, store the response in local storage, and redirect to the home page.

Learn how to implement a login loading state in Vue.js by toggling a loading flag, showing indicators on the login button, and disabling inputs during authentication for user experience.

Implement logout by clearing user details and resetting the store to an empty object for a permanent logout. Explain router hash handling and using router-link to the home route.

Master Vuejs from scratch demonstrates adding toast notifications with the notchy package to show success and error messages during login, signup, and logout.

Implement authentication guards in Vue.js using a before guard to check login state from localStorage and redirect unauthenticated users to login, ensuring components mount only after next is called.

Learn how to fetch articles from an API on the homepage using axios, store them in state, and render them with an Article component in a Vue.js app.

Pass unique article data via a prop named optical to the article component, render a 200-character excerpt with a read more button, and switch from moustache to a content directive.

Create a dynamic single article detail page that uses a route parameter id to fetch and display article data, and navigate from the article list via router links.

Fetch a single article's details in Vue and bind its image, title, and content to a Bootstrap card. Display a loading spinner while the API request retrieves data.

Learn to add Disqus comments to a Vue article using the discourse component, install and configure the embeddable commenting system, and pass article identifiers for production.

Implement home page pagination in a Vue.js app by adding next/previous controls, wiring props for page data, handling loading state with a loader, and fetching articles for each page.

Create an article creation page in a Vue app by adding a new route /articles/create, building a card-form for title and content, and integrating a rich text editor.

Learn to implement a Vue image uploader with a third-party input component, preview images, and upload them to cloud nine using presets, an API key, and a post request.

Use vue cli environment variables to keep credentials out of your code, configure a prefix like VUE_APP_, and manage domain and api keys securely for production deployments.

Load the categories from the database and publish them in a dropdown for article category selection. Cache categories in storage to avoid extra API requests and populate the dropdown.

Construct and send an api request to save an article with title, content, category, and image, using bearer token authorization, while showing loading states, validating inputs, and redirecting on success.

Explore how to build a production-ready Vue app, assemble optimized assets and index files, and deploy quickly using a free service, including environment variables and basic site settings.

Explore vuex from scratch, wiring a store to components and sharing data. Update state with mutations and actions, and use getters and modules to organize the store and namespaces.