Vue - The Complete Guide (incl. Router & Composition API)
The course starts by introducing you to Vue.js, explaining what it is and how it compares to alternatives like Angular and React.
You’ll build your first Vue app right away, getting hands-on experience with the basics.
From there, you’ll dive deeper into core Vue concepts like data binding, event handling, computed properties, and watchers.
The course guides you through rendering conditional content and lists using directives like v-if and v-for.
You’ll also build a game project to solidify your understanding of these fundamentals.
As you progress, you’ll learn about components, which are crucial for building complex user interfaces.
The course covers component communication using props and custom events, as well as more advanced topics like slots, dynamic components, and teleporting elements.
To facilitate development, you’ll set up a better workflow with the Vue CLI and explore its features.
The course then covers important areas like forms, sending HTTP requests to a backend, routing for building multi-page applications, and adding animations and transitions.
You’ll gain experience with Vuex, Vue’s state management solution, learning how to manage application state effectively.
The course also includes a major project where you’ll build a “Find a Coach” web app, applying everything you’ve learned.
Additionally, you’ll learn about authentication in Vue apps using JSON Web Tokens, optimizing and deploying Vue apps, and the Composition API – an alternative to the Options API for writing component logic.
The course wraps up by covering reusability concepts like mixins and custom composition functions, providing you with techniques to write more efficient and maintainable code.
Build Web Apps with Vue JS 3 & Firebase
This course covers everything you need to build modern web applications with Vue.js 3 and Firebase.
You will start by learning the basics of Vue, including components, templates, data binding, events, conditional rendering, lists, and more.
The course then dives into using the Vue CLI for building larger projects, covering topics like components, props, custom events, slots, and lifecycle hooks.
Next, you’ll build your first project, a reaction timer game, to solidify your understanding of Vue fundamentals.
The course continues with forms, handling user input, data binding with forms, select fields, checkboxes, and keyboard events.
You’ll learn about routing with Vue Router, setting up routes, route parameters, navigation guards, and lazy loading components.
The course covers fetching data from APIs, including JSON Server, and building a project planner application.
One of the highlights is the introduction to the Composition API, a new way to structure components and code in Vue 3.
You’ll learn about reactivity with refs, computed values, watch and watchEffect, and using the Composition API with async code and routing.
The course extensively covers Firebase, including Firestore (the real-time database), authentication, storage for uploading images, hosting for deploying your apps, and security rules.
You’ll build several projects that integrate Vue with Firebase, such as a live chat room with authentication, a music playlist app with image uploads, and more.
Other topics covered include using Vue with Firebase 9, JavaScript concepts like modules, map/filter, spread syntax, template strings, arrow functions, fetch, promises, async/await, and more.
The course also includes a bonus section on the Vue CLI 3, covering custom presets, plugins, build targets, and the Vue GUI.
Nuxt.js 2 - Vue.js on Steroids
The course starts by introducing you to Nuxt.js, a powerful framework that enhances Vue.js development with features like server-side rendering.
You’ll quickly learn how to create your first Nuxt app and understand its folder structure.
From there, the course dives into pages, routing, and views.
You’ll learn how Nuxt automatically sets up routes based on your folder structure, making it incredibly easy to create complex routing setups.
The course covers creating dynamic routes, nested routes, and adding links for navigation.
You’ll also learn about layouts, error pages, and working with components in Nuxt apps.
One of the key aspects covered is handling data in your Nuxt app.
You’ll learn how to use asyncData to fetch data on both the client and server-side, leveraging the power of server-side rendering.
The course also guides you through integrating Vuex, the official state management library for Vue.js, into your Nuxt app.
As you progress, you’ll connect your Nuxt app to a backend using Firebase.
This involves storing and fetching data from Firebase, initializing the Vuex store with server-side data, and synchronizing changes between Vuex and the backend.
The course also covers advanced topics like configuring Nuxt projects, adding plugins and modules, and implementing middleware for authentication.
You’ll learn how to add user signup, login, and logout functionality, as well as persisting authentication across page refreshes using cookies.
Finally, you’ll explore different ways to build your Nuxt app, including as a universal app, a single-page application (SPA), or a static website.
The course guides you through the process of building, optimizing, and deploying each type of app.
Vue JS Essentials with Vuex and Vue Router
This course provides a comprehensive introduction to Vue.js, covering everything from the basics to advanced topics like state management with Vuex and routing with Vue Router.
You’ll start by building your first Vue app, learning about templates, instances, directives, and events.
The course then dives into Vue CLI, teaching you how to generate new projects and work with Vue components.
As you progress, you’ll learn how to write effective Vue apps, handling data sharing between components using props and events.
You’ll also integrate with external APIs like YouTube and Imgur, rendering lists of data and handling user input.
The course dedicates significant time to Vuex, Vue’s state management library.
You’ll learn how to design Vuex modules, handle authentication with OAuth2, and communicate across modules.
Navigation is covered in-depth with Vue Router, including browser and hash routing, programmatic navigation, and lifecycle methods.
Practical examples like image uploads with Imgur reinforce the concepts, teaching you how to accept multiple files, attach them with FormData, and handle concurrent uploads.
You’ll also learn how to style your app with CSS Grid and integrate third-party libraries like Semantic UI.
Throughout the course, you’ll gain hands-on experience with key Vue features like computed properties, prop validation, v-for and v-if directives, and handling nested component events.
The course strikes a balance between theory and practice, ensuring you understand the fundamentals while building real-world applications.
Complete Vue Developer Bootcamp (Pinia, Vitest)
The course starts with an introduction to Vue, covering fundamentals like data binding, directives, and event handling.
You’ll learn about components, which are the building blocks of Vue applications, and how to communicate between them.
The course dives into advanced topics like transitions, animations, and dynamic components.
You’ll build a quiz app to practice what you’ve learned so far.
Then, the main project begins - a music player application using the Pinia state management library.
This project covers authentication, routing, file uploads, audio playback, and more.
Along the way, you’ll learn modern tooling like Vite, Tailwind CSS, and ESLint.
The course also covers performance optimization techniques, PWAs (Progressive Web Apps), and deployment.
Testing is a major focus, with sections on unit testing with Vitest and end-to-end testing.
The Composition API, an alternative to Vue’s default Options API, is explored in-depth.
You’ll learn about component design patterns and best practices for building maintainable Vue applications.
The course wraps up with guidance on continuing your learning journey.
Vue JS 2.0 - Mastering Web Apps
This course takes you on a comprehensive journey through Vue.js, starting with the fundamentals and progressing to building five real-world applications.
You’ll begin by learning the essential Vue.js syntax, including directives like v-if and v-for, as well as components, v-model, computed properties, and lifecycle hooks.
This lays a solid foundation for working with Vue.js effectively.
From there, you’ll dive into building your first application, Notemaster, a simple note-taking app.
This hands-on project will reinforce the concepts you’ve learned and give you practical experience with Vue.js.
The course then moves on to Starbase, a more complex application that introduces you to .vue files, basic CSS styling, and working with an API.
You’ll learn how to create reusable components and structure your application effectively.
Next up is Starbase-Router, where you’ll integrate Vue Router to create a multi-page application.
You’ll learn how to link different pages, pass data between components, and create dynamic components.
The fourth application, Jokester, will teach you how to manage state using Vuex, Vue.js’s official state management library.
You’ll build a joke-sharing app, learning how to create a store, mutate the store, and act upon the store.
Finally, you’ll build Turnout, a full-stack application that incorporates Firebase for authentication and a realtime database.
You’ll learn how to sign in and out, store data with Vuex, and create a realtime database for storing and retrieving events.
Vue JS 3: Composition API (with Pinia, Firebase 9 & Vite)
You will start by learning what the Composition API is and how to set up your development environment.
The course then dives into the core concepts of the Composition API, such as refs, reactive objects, methods, computed properties, and watchers.
You will learn how to work with lifecycle hooks, directives, Vue Router, lists, teleports, template refs, and nextTick.
The course covers child components, props, emits, slots, dynamic components, and the provide/inject pattern.
The course introduces the concept of composables and teaches you how to create and use them, as well as how to incorporate composables from the popular VueUse library.
State management with Pinia is covered in-depth, including setting up state, actions, and getters, and using the store throughout your application.
The course includes a project called “Noteballs,” where you will build a note-taking application from scratch.
You will learn how to set up the router, design the application with Bulma CSS, work with data, methods, child components, computed properties, and emits.
You will also learn how to integrate Pinia for state management, create reusable components, use directives, watchers, and composables, and implement a delete modal.
The course then covers integrating Firebase 9 into the Noteballs application, including setting up Firebase, reading, adding, deleting, updating, and ordering data in Firestore.
You will also learn how to implement authentication with Firebase, handle multiple users, and secure your application with navigation guards and Firestore security rules.
Finally, you will learn how to host your application on Firebase Hosting.
Throughout the course, you will work with the latest version of Vue.js 3, the Composition API, Pinia for state management, Firebase 9 for backend services, and Vite as the build tool.
The course provides hands-on experience and practical examples to help you master these technologies.
Vue JS 2: From Beginner to Professional (includes Vuex)
This course covers everything from the fundamentals of Vue.js to advanced topics like Vuex for state management.
You’ll start by learning the basics of Vue instances, templates, directives, events, and data binding.
The course then dives into building example applications to solidify your understanding of components, forms, animations, routing, and making HTTP requests.
Along the way, you’ll learn how to set up a development environment with Vue CLI and Webpack.
The course covers important concepts like mixins, filters, and integrating with developer tools.
It also explores more advanced topics like transitions, routing for single-page applications (SPAs), and connecting to servers through HTTP.
The highlight of the course is the in-depth coverage of Vuex, a state management library for Vue.js.
You’ll learn how to set up a Vuex store, access and modify state, use getters and mutations, implement actions for asynchronous operations, and structure your application with modules and namespaces.
Throughout the course, you’ll build practical example applications like an e-commerce site and a mail application, allowing you to apply the concepts you’ve learned in a real-world context.
Complete Vue.js 3 (Inc. Composition API, Vue Router, Vuex)
This course is a comprehensive introduction to Vue.js 3, covering both the Options API and the new Composition API.
You’ll start by building your first Vue app, learning core concepts like templates, methods, control flow, loops, computed properties, class bindings, and input validation.
The course then dives into components, which are the building blocks of Vue apps.
You’ll learn how to create components, pass data with props, and communicate between parent and child components using events.
To solidify your understanding, you’ll build three projects from scratch: a user sign-up form with validation, a Pokemon evolutions viewer that fetches data from APIs, and a microblog application using the Composition API.
These projects cover advanced topics like single file components, lifecycle hooks, fetching remote data, slots, class bindings, and separating business logic from presentation.
Next, you’ll explore the Composition API in depth, learning reactivity with ref and reactive, composing computed properties, watch and watchEffect, and creating reusable composables.
The course then covers Vue Router, teaching you how to create multi-page applications with nested routes, route parameters, redirects, and navigation guards.
You’ll integrate Vue Router into the microblog project.
Vuex, Vue’s state management library, is also covered extensively.
You’ll learn about state, mutations, actions, getters, and modules, and integrate Vuex into the microblog project.
Finally, you’ll build a capstone project: a photo gallery application that fetches data from an API, uses Vuex for state management, implements advanced routing techniques, and optimizes performance with caching.
Throughout the course, you’ll gain hands-on experience with Vue.js 3’s latest features, best practices, and real-world application development techniques.
Vue Masterclass (Covers Vue 2 and 3)
You’ll start by setting up your development environment, installing essential tools like Node, Git, and VSCode with extensions like Vetur, ESLint, and Prettier.
Throughout the course, you’ll build a real-world job search application inspired by Google Careers.
This project will serve as a practical way to learn Vue’s core concepts, such as components, directives (v-bind, v-for, v-if), reactivity, and more.
You’ll also integrate popular libraries like Tailwind CSS for styling, Vue Router for client-side routing, and Pinia for state management.
The course introduces you to testing with Vitest and Vue Testing Library, emphasizing a test-driven development (TDD) approach.
You’ll write unit tests for components, Pinia stores, and even Vue’s Composition API functions.
Speaking of the Composition API, you’ll dive deep into this new way of building Vue components, complementary to the traditional Options API.
The course covers reactive primitives like ref, computed, and reactive, as well as the new script setup syntax.
As you progress, you’ll learn advanced Vue features like slots (including scoped slots), event handling, and form input binding with v-model.
You’ll also integrate a mock backend using JSON Server and fetch data from an API endpoint.
Towards the end, the course introduces TypeScript and guides you through adding type annotations to your Vue components, Pinia stores, and other parts of your application.