Learn Vue Js From Scratch

Download and install the required softwares to begin learning Vue Js from scratch.

Set up GitHub in VS Code by creating and initializing a private repository, configuring user details, committing changes, and pushing to GitHub for your Vue.js project.

Explore VS Code extensions that improve Vue Js development from scratch. Use these useful tools to support Vue Js work in VS Code.

Create your first Vue project by installing tools with a package manager and initializing the project using the vue create command, then install plugins and run locally.

Explore the Vue project file structure, including node_modules, public, source, assets (fonts and images), components, app.vue, main.js, index.html, gitignore, dist, npm run build, babel config, package.json, and README.

Master Vue syntax by creating a new component, naming it, defining data and methods and life cycles, and importing it to see how the component works in the app.

Learn the Vue lifecycle hooks from creation to unmount, exploring before create, created, before mount, mounted, before update, updated, and before unmount with diagrams and examples.

Explore lifecycle hooks in Vue.js, from before to after, including mounted, and observe how data updates render templates and alerts in the user interface.

Explore conditional rendering in Vue by implementing if/else logic to show or hide elements based on conditions, and apply these conditions to components and UI updates.

Learn how to render lists in Vue.js using a for loop, bind data to templates, and display dynamic content in the browser with responsive tables.

Learn what a component is in Vue.js, a reusable element accessible via routing without page refresh, with examples of main, pattern, and child components.

Learn to build dynamic components in Vue.js by importing dynamic components, rendering a chosen dynamic component, and switching between components with a button click.

Explore routing in Vue Router using Vue.js to navigate between views without page refresh, with links updating the active view in sync.

Learn to work with the router in Vue.js from scratch by building components, handling imports, and implementing routing anchors to create a navigable app.

Json server helps you access an API, create endpoints, and work with data for Vue.js projects.

Learn how faker.js creates large datasets by generating realistic fake profiles with random names and emails, importing the library, and building a data generator function.

Master how to fetch data in Vue using Axios, building a component to call an API, handle responses, and display results within the app.

Show how to fetch api data in a vue component and render it in a table by binding axios response to a data property, with fields name, username, and email.

Explore how a datatable library provides export options, mobile-friendly design, and interactive features like searching and sortable columns to work with data.

Create a vue datatable by creating and importing a table component, wiring a get data method, and enabling sorting and searching with default configuration and a node tables extension.

Learn to fetch data from an API using axios, populate a datatable with dynamic data in a Vue.js project, and define columns to display API results.