Learn Vue.js

In this course you'll learn all there is to know about Vuex by creating a shopping cart from scratch. We will start off by creating a shopping cart with Vue and then progressively dive into Vuex features as we need them. Piece by piece we'll replace parts of our application with mutations, getters, and actions. You'll also learn how to break your Vuex store into modules. After this course, you will know when and how to use getters, mutations, actions and, how to split your Store with modules. If you want to learn how you can put your new Vuex skills to use in a real-world application, you can check out [The Vue.js Master Class](https://vueschool.io/the-vuejs-master-class).

Discover how to write a Vuex app by doing Test driven development. Learn how to unit test mutations, getters and actions, by mocking when necessary, as well as testing components that rely on the store. We’ll start by focusing on the Vuex part and then we will add some components to create a simple application. All of these, in a test driven development fashion.

This course is our signature course. It is probably the most thorough Vue.js course available online. The Vue.js Master Class is so comprehensive that we **cannot cover everything on this page**. Thus we’ve created a [separate page](https://vueschool.io/the-vuejs-master-class) where you can learn more about it. In our Master Class you'll learn Vue.js by building a real-world application. Together we’ll create a complete forum from scratch using exciting technologies that synergize with Vue. The goal of the Master Class is to teach you Vue.js along with Best Practices, Modern Javascript, and other exciting technologies, by building a Real World application - a forum. ### We cover the fundamentals, like: - Vue cli, router and State management with Vuex - Modern Javascript (ES6/7/8) - User permissions & protected routes - Third party authentication - Firebase Realtime Database & Cloud functions - Automatic code review with ESLint - Deployment - Application architecture and best practices ### We also dive into harder topics, like: - Higher Order Functions - Creating Vue Plugins - Code Splitting - Support for older Browsers - Webpack configuration - SEO and pre-rendering - Reactive programming with RxJS By completing the Vue.js Master Class, you will be able to land any Vue related job or optimize/improve your own projects! **Please note**: This course is in the making. New lessons and modules (sub-courses) are added frequently.

We've put together a course that will teach you how to use Firebase Realtime Database in your vue.js and JavaScript apps. Realtime databases differ from traditional databases and allow us to keep all online users up to date without having to refresh the website. A realtime database opens up exciting opportunities for vue.js applications, and in this course, we will show how, by building a realtime chat room. #### The Vue.js + Firebase Realtime Database course covers: - How to set up and connect to a new Firebase Realtime Database - How to read, write, update and delete data - What it means that Firebase Realtime Database is event-driven - How to update a website when changes take place - How to implement notifications when other users make changes If you want to learn how you can put your new Firebase skills to use in a real-world application, you can check out [The Vue.js Master Class](https://vueschool.io/courses/the-vuejs-master-class).

This course will teach you how to use Firebase Authentication in your Vue.js and JavaScript apps. Firebase Authentication is a fantastic (free) product from the Firebase Suite which offers the possibility to authenticate a user through different providers (Twitter, Github, Facebook, etc.), beyond email and password, without writing any server-side code. Firebase Authentication is a great fit for applications built with JavaScript or Vue.js because of what mentioned above, and it can easily be integrated into any backend or database. ### The Vue.js + Firebase Authentication course covers: - How to set up and connect to Firebase Authentication - How to sign users up, in and out - How to catch Firebase auth errors - How to authenticate a user via 3rd party providers - How to update a Firebase user’s profile, email, and password - How to link multiple authentication providers to one user account - How we can store additional user data in our backend - How to protect routes in a Single Page Application, using Vue Router, Vuex, and Firebase Authentication If you want to learn how you can put your new Firebase skills to use in a real-world application, you can check out [The Vue.js Master Class](https://vueschool.io/the-vuejs-master-class).

--- **NOTE** If you are just starting with Vue it is recommended to watch the latest version of this course [Vue.js 3 Fundamentals](https://vueschool.io/courses/vuejs-3-fundamentals) instead. --- Vue.js is a fantastic JavaScript framework, that is performant, progressive, and remarkably easy to start using. This is our course on the very basics of Vue.js - The Vue.js Fundamentals. In this course, we will teach you the fundamental concepts of Vue.js and create a solid foundation for your Vue journey. ### The Vue.js Fundamentals course covers: - Introduction to two-way data binding - Template syntax and expressions - Vue directives, loops and conditional rendering - Vue Devtools - Handling user Inputs - Handling Events - Vue.js Methods and Computed Properties - Attribute Bindings and dynamic classes The course is suitable for developers who do not yet know about Vue.js or are just getting started with Vue. If you're looking for an advanced, thorough Vue.js course where you learn by building a real-world application we recommend you to check out [The Vue.js Master Class](https://vueschool.io/the-vuejs-master-class). Vue School’s teacher Nick Basile presents the course.

This course will teach you how to be a Vue.js Form Validation Master. Learn how to provide your users with a delightful experience when they fill out your forms by validating your forms with modern best-practices and by reporting specific error messages. The course starts by going through how you would validate forms without any help from third-party libraries or plugins. Then we’ll dive into [vuelidate](https://vuelidate.netlify.com/) and learn how to validate forms like a pro. You’ll learn the difference between input states (dirty, invalid, error, touched, etc.) and how you can use them to validate your input fields when you want to. For instance. while a user is typing, after the user has left the input field or before the entire form is submitted. The course also covers theory and best practices about validators responsibilities and asynchronous validation. If you want to learn how you can put your new Vue.js Form skills to use in a real-world application, you can check out [The Vue.js Master Class](https://vueschool.io/the-vuejs-master-class)

Learn how to create badass dynamic forms with Vue.js in this course. Dynamic forms are forms with multiple steps. They are also often called form wizards, where you go through a series of steps before you can complete the main form.  The assignment of the course is to complete the signup and order process of our fictional Coffee Box Subscription Service. We’ve prepared the markup and the CSS, so you can dive straight into the fun part. A user should be able to: - Pick a Coffee plan - Login or create an account - Enter her delivery details - Select additional monthly treats - Confirm her monthly coffee order During this course, you’ll learn how you can structure your dynamic forms, what to look out for and what works in certain situations. We cover two different communication methods (events and promises) between the mama form and the steps. This unique course covers a variety of tips and tricks you can implement in many Vue.js applications. We validate our forms in this course, but we do not go through form validation in detail. Please check out our course on [Form Validation](https://vueschool.io/courses/vuejs-form-validation) if you want to learn more about the topic before you watch this course.

This course is created to introduce you to software testing. More specifically testing your JavaScript code. In this course, you'll learn how testing will improve your daily life as a developer. We touch base on why testing is important, what you should test and what you do not need to test directly. We introduce you to different types of tests (Unit, Integration and Acceptance tests) and teach you the testing jargon you need to know to start your testing journey. This course is not only for beginners in testing but also for those who are not sure about what the difference is between Mocks, Spies, and Stubs. By the end of this course, you'll be equipped with knowledge about testing, jargon, and terminologies and thus be ready to tackle our testing courses.

Vue.js Directives are special HTML attributes that allow us to manipulate the DOM. Directives are very powerful and we use them every day. Common directives are `v-if`, `v-for` and `v-model`. The course covers all you need to know to be able to create your own, custom vue.js directives. In the course, we create three different directives to showcase the possibilities and power of custom vue.js directives. ### The Directives `v-color` allows us to easily add a CSS color to an HTML element. `v-switching-color` changes the CSS color of the element every 500 milliseconds. `v-click-outside` allows us to attach an event handler to when a user clicks outside an element. Perfect for modals and pop-over menus, toolboxes etc. While the two first might seem silly, the possibilities with these patterns are very powerful. The course also teaches you what you need to know about directive modifiers and hooks. ### Important! This course uses Vue 2. While the directives API has changed slightly in Vue 3 many of the concepts taught in this course are the same. [View what's changed in the Vue 3 Docs Migartion Guide](https://v3.vuejs.org/guide/migration/custom-directives.html#overview). Also you can see [Vue 3 directives in action in the Vue.js 3 Master Class](https://vueschool.io/lessons/closing-dropdown-on-click-outside).

Nuxt.js is a framework for creating Vue.js applications. Its goal is to help Vue developers take advantage of top-notch technologies and features in a fast, easy and organized way. **It is easy to get started with Nuxt.js!** The course covers the fundamentals of Nuxt.js and serves as a platform for everyone who wants to get started with Nuxt. You **do not need to know Nuxt.js** to take this course, but you **should know [Vue.js](https://vueschool.io/courses)**. After this course, you will be familiar with: - What Nuxt.js is and how it can help you and your projects - How to scaffold new Projects with their `create-nuxt-app` tool - The structure of a Nuxt application - Creating and navigating between pages - Setting up meta tags for improved SEO - Building and deploying a Nuxt.js App - How to deploy your apps to Heroku and Netlify This course is made **together** with Nuxt.js core member **Alexander Lichter**.

In this course, you'll learn how to test with [Jest](https://jestjs.io/). Jest is a magnificent testing suite for JavaScript. Many big players rely on Jest today. Some of them are Facebook, New York Times, Twitter, Spotify, Instagram, and Airbnb. Jest is extremely powerful and easy to work with. By the end of this course, you'll know how to install Jest in your projects and be ready to test your code with support for modern JavaScript. ### You'll learn: - how to write tests, also called specs (short for specifications). - How to group your tests, for organizational purposes. - How to take advantage of the powerful Snapshot feature - Workflow tips & tricks This course assumes that you know the fundamentals of JavaScript Testing. If you do not, we recommend that you take our [JavaScript Testing Fundamentals](https://vueschool.io/courses/javascript-testing-fundamentals) course beforehand.

It can be difficult and cumbersome to set up a custom system to fetch asynchronous data before you serve your application to your users and render everything on the server-side. Since JavaScript was designed to mainly run client-side, it comes with a few unwanted traits. Nuxt.js has made it breathtakingly easy to fetch asynchronous data and render our entire application on the server-side before we serve it to our users. In this course, you will learn a few different methods to fetch asynchronous data and what to be careful with. Secondly, you'll learn how to fetch asynchronous data and render your Nuxt applications server-side. **Server-side rendering brings invaluable performance and SEO benefits.** Even though it is impressively smooth to fetch and render async data server-side with Nuxt.js, you need to know the basics of Nuxt. If you do not, we recommend our [Nuxt.js Fundamanetals](https://vueschool.io/courses/nuxtjs-fundamentals) course. After this course, you will be familiar with: - How to best fetch asynchronous data according to your applications needs - The caveats of the `fetch` method when it comes to server-side rendering - The benefits of using Nuxt modules - How to extend the Nuxt.js framework with plugins - Fetching async data and render your Vuex store server-side - Impressed with how easy it is to squeeze out extra performance and SEO of your JavaScript applications with Nuxt.js This course is made **together** with Nuxt.js core member **Alexander Lichter**.

Prerendering or static site generation is an invaluable technique that every front-end developer should know. Compiling your application into static HTML files is a process that improves both performance and SEO. It can also drastically reduce your hosting cost. Nuxt.js has made it easy for us to generate static sites of both static routes and dynamic routes, even with data loaded asynchronously. After this course, you'll be familiar with: - What static site generation is - The difference between server-Side rendering and prerendering - How to prerender static routes - How to prerender dynamic routes - How to cache asynchronous data when generating dynamic routes Prerendering is not the same as server-side rendering. If you want to learn about server-side rendering and Nuxt, check out our [Async Data with Nuxt.js](https://vueschool.io/courses/async-data-with-nuxtjs) course. If you do not have experience with Nuxt.js yet, we recommend our [Nuxt.js Fundamentals](https://vueschool.io/courses/nuxtjs-fundamentals) course. This course is made **together** with Nuxt.js core member **Alexander Lichter**.

Learn everything you need to know to get started with Vue.js components. Web components are custom developer defined HTML elements, like `<p>`,`<body>`, or `<button>`, that allows us to encapsulate some functionality of our applications. Components are the puzzle pieces of a Vue.js website. Components combine blocks of HTML, JavaScript, and CSS. And as a result, they allow us to easily encapsulate and reuse functionality in our applications. **After this course, you'll be familiar with:** - The idea behind components and how Vue.js components work - Component's template, and multiple ways to define your template - Communication between components with props and custom events - What is the true difference between global and local component registration - The lifecycle hooks of a component - Component composition with nested components and slots - Component's best practices and common pitfalls We've also prepared exercises for the course, so you can practice what you learn. **Vue.js Component Exercises:** - Build a GitHub user profile component - Create a Notification Message component You need a basic understanding of Vue.js to enjoy this course. We recommend watching [Vue.js Fundamentals](https://vueschool.io/courses/vuejs-fundamentals) if you're not already familiar with Vue.js

Learn how to test your Vue.js components with Jest and the official unit testing library for Vue.js - Vue Test Utils In this course, you’ll learn everything you need to know to write proper unit tests for your Vue components. **By the end of this testing course you will know** - Which tools are required for an efficient testing workflow - How to mount and render your Vue components - How to programmatically interact with your components through Vue Test Utils - How to test computed properties and watchers - How to test Vue.js lifecycle methods - How to traverse the DOM and test … - How to stub child components - How to test that a Vuex Store is injected properly If you’re not familiar with Jest, the testing framework. We recommend checking out our [Test with Jest](https://vueschool.io/courses/test-with-jest) course before you tackle **Testing Vue.js Components**.

Learning how to work with Single File Components is a vital step in mastering Vue.js. In this course you’ll learn everything you need to know about Vue’s Single File Components, so you can start using them in your projects today and speed up your development. **By the end of this course you will know** - How to scaffold a new Vue.js project with Vue CLI 3 - What the drawbacks of global components are - How to take advantage of the build step and Pre-Processors like Jade, Pug, Stylus, and Sass - How to reuse your Single File Components by exporting and importing them - How to organize your Single File Components according to the official style guide - What CSS Modules are and how to use scoped styles in your Single File Components You need a basic understanding of Vue.js Components to enjoy this course. We recommend watching [Vue.js Components Fundamentals](https://vueschool.io/courses/vuejs-components-fundamentals) if you're not already familiar with Vue.js components.

This is the supercharged, remastered Vue.js 3 Masterclass. We’ve taken all the feedback we got from [The Vue.js 2 Masterclass](https://vueschool.io/courses/the-vuejs-master-class), and supercharged The Vue.js Masterclass with all the new goodies from Vue.js 3 and the ecosystem. This is our signature course. It is probably the most thorough Vue.js course available online. The Vue.js Masterclass is so comprehensive that we **can not cover everything on this page**. Thus we’ve created a [separate page](https://vueschool.io/the-vuejs-master-class) where you can learn more about it. In our Masterclass you'll learn Vue.js by building a real-world application. Together we’ll create a complete forum from scratch using exciting technologies that synergize with Vue. The goal of the Masterclass is to teach you Vue.js along with Best Practices, Modern Javascript, and other exciting technologies, by building a Real World application - a forum. ### We cover the fundamentals, like: - Vue cli, router, and State management with Vuex - Modern Javascript (ES6/7/8) - User permissions & Route Guards - Third party authentication - Google Cloud Firestore - Automatic code review with ESLint - Consuming REST API - Application architecture and best practices ### We also dive into harder topics, like: - Higher Order Functions - Creating Vue Plugins - Code Splitting - Support for older Browsers - Webpack configuration - Deployments By completing the Vue.js Masterclass, you will be able to land any Vue related job or optimize/improve your own projects! **Requirements** You should be familiar with JavaScript, basic ES6 like arrow functions and import statements, and have fundamental knowledge of Vue.js. If you are just starting out with Vue.js, we suggest that you watch our free course Vue.js Fundamentals and browse around our other [beginner courses](https://vueschool.io/courses?skill=beginner) before diving into the Vue Masterclass. If you are looking to brush up your ES6 skills, watch our course [Modern JavaScript: ES6 and beyond](https://vueschool.io/courses/modern-javascript-es6-and-beyond).

The Web is fundamentally designed to work for all people, regardless of their hardware, software, language, location, or ability. Accessibility is essential for developers and organizations that want to create high-quality websites and web tools, and not exclude people from using their products and services. In this accessibility course, you’ll learn everything you need to know to be able to create accessible websites. We'll also show you tools and techniques to simulate different impairments. Which allows us to analyze our sites to effectively making sure our websites stay accessible. Making accessible websites is not just an ethical thing to do, it also increases the worldwide market with over 1 billion people. **By the end of this course you'll be familiar with** - The Web Content Accessibility Guidelines - Accessible Design - Good Content Structure - Accessibility Testing with Chrome Devtools - Assistive Technologies - How people with permanent and temporary disabilities use the web Remember, accessibility is important to both your users and your business!

Mastering JavaScript is a fundamental prerequisite to creating good and efficient applications with the Vue.js framework. In this course, you'll learn how to master the new and essential features in what we call modern JavaScript. Modern JavaScript includes the new features and syntaxes introduced to JavaScript in ES6, ES7, ES8 and beyond. **By the end of this course, you will strengthen your core JavaScript skills and learn** - What does ES6, ES7, etc. mean? - What is the difference between var, let and const - How to master arrow functions - What promises are and how to work with them - Essential Array and Object functions that will improve your daily life - And much, much more (see the lesson list) What are you waiting for? Level up your JavaScript skills by learning ES6 and beyond from this course thought by the brilliant Lydia Hallie.

Learn how to create powerful Vue.js Single Page Applications (SPA’s) with the Vue Router in this course. Single Page Applications are web apps or sites that interact with the user by dynamically rewriting the current page rather than loading entire new pages from the server. This approach allows us to only fetch the data/section of our page that is needed when a user interacts with our app. By dynamically rewriting smaller chunks of our site, it prevents us from re-downloading already loaded resources such as the images, scripts, CSS, etc. As a result SPA’s tend to improve the user experience due to its impressive page load speed performance and behave more like desktop applications. In this course, you’ll learn everything you need to know about the Vue Router to either create rapid prototypes or ımpressive, full-blown Vue.js SPA’s. **By the end of this course you will master** - How to scaffold a new Vue.js project, including the Vue Router with Vue CLI GUI - How to create routes, including named routes - Learn how to lazy load your routes - Learn how to work with Vue Router Params and pass them as props to components - How to create dynamic and nested routes - Learn what the HTML5 History Mode is and how to enable it - Learn how to create impressive route transitions - How to create a 404 page with the Vue Router - Learn what navigation guards are and how to create an authentication middleware for your app - And much much more. You need a basic understanding of Vue.js to enjoy this course. We recommend watching [Vue.js Fundamentals](https://vueschool.io/courses/vuejs-fundamentals) and [Vue.js Components Fundamentals](https://vueschool.io/courses/vuejs-components-fundamentals) if you’re not already familiar with Vue.js and components.

GraphQL is a query language for APIs and a runtime to execute said queries. GraphQL lets us fetch nested resources and only the data fields we need from one endpoint. Thus, making it more performant and superior to traditional REST APIs where we often over-fetch data, and use multiple endpoints to get what we need. During the course, we'll use the SpaceX GraphQL API to learn the essential fundamentals of GraphQL. The course is framework agnostic. It focuses purely on GraphQL, so it does not matter which JavaScript framework you use in your projects. You will learn the following in the GraphQL Fundamentals course: - What GraphQL is and what makes it special - How to use the excellent GraphiQL IDE to explore and debug GraphQL queries and API data - How to write GraphQL Queries to get data efficiently from the API - How to write GraphQL mutations to add or change your data After learning the essentials about GraphQL, what many argue is the next generation API technology. You will be ready to dive into how to use GrapQL with Vue.js or your favorite frameworks.

Learn how to create multilingual websites and Vue.js applications with Vue i18n. Vue i18n is the official internationalization library from Vue.js that integrates nicely with any new or existing Vue.js application. At first glance, internationalization can be quite daunting and challenging. That is if you don’t have a proper tool to help you. With Vue i18n, we can automatically detect and set languages based on the user’s browser or URL. We can easily translate and transform text, numbers, dates, currencies, and so much more. In this course, you’ll learn how to manage your translations with Vue CLI GUI, even if you didn’t use Vue CLI to scaffold your project. **By the end of this course you’ll master** - How to create multilingual websites with Vue.js - How to organize your translation files - How to use variables with your translated text - How to work with translated text and pluralization - How to handle different date and currency formatting for different languages and regions - How to change the locale programmatically - How to change the locale through the user interface - How to persist the locale change - And so much more You need a basic understanding of Vue.js to enjoy this course. We recommend watching [Vue.js Fundamentals](https://vueschool.io/courses/vuejs-fundamentals) and [Vue.js Components Fundamentals](https://vueschool.io/courses/vuejs-components-fundamentals) if you’re not already familiar with Vue.js and components. ### Important! This course uses Vue 2 and Vue i18n 8. While Vue i18n 9 has changed slightly for Vue 3 many of the concepts taught in this course are the same and you can still follow along using Vue 2. [View what's changed in the Vue i18n Docs](https://vue-i18n.intlify.dev/guide/migration/breaking.html)

Learn all the exciting new features, improvements, and breaking changes that Vue 3 introduces. **By the end of this course, you’ll know:** - How to leverage the Teleport and Suspense features - How to use multiple v-models - How to use fragments to have multiple root elements in a component - The fundamentals of Composition API - The new automatic change detection and how it eliminates known reactivity caveats of Vue 2 - How to make transparent wrapper components easier with Vue 3 - What `<script setup>` and `<style vars>` are and when/how to use them - And much more **Important** Vue 3 does not introduce many breaking changes. The breaking changes are covered in this course, and we provide you with solutions for your upgrade process and workarounds where needed. This means that it doesn’t require a lot of effort from Vue 2 developers to learn Vue 3, or to upgrade existing applications and websites. **Prerequisites** In this course, you will not learn Vue.js from scratch. If you are looking to get started with Vue.js, please check out our [Vue.js Fundamentals course](https://vueschool.io/courses/vuejs-fundamentals). **Next Steps** Once you complete this course, we recommend you to expand your Composition API knowledge by diving into our [In-depth Vue 3 Composition API course](https://vueschool.io/courses/vue-3-composition-api).

Learn how to improve your Vue.js applications by utilizing the full power of functional components. Functional components are "slimmer" than classic Vue.js components. Thus they perform better. Functional components are a great tool to have in your Vue.js toolbelt. They are especially handy if you render hundreds or thousands of component instances in one page, where each component is responsible for displaying data. In this course, you'll learn everything you need to know about functional components, including when to use them, when not to use them, and their caveats. We will also cover render functions and how to use functional components with slots.

Storybook lets us create a visual component library and playground, where we can document, showcase, and interact with our Vue.js components in an isolated environment. In this Storybook course, you will learn how to install and configure Storybook in any Vue.js project with Vue CLI. You will also learn how to organize and write stories to showcase different states of your Vue.js components. The great thing with Storybook is that it is decoupled from our project, which gives us the ability to quickly prototype or demo features and progress. Imagine being able to demonstrate a date picker component in its different states quickly (open, closed, selected, disabled, etc.), in a separate (local or online) website. A well put-together Storybook suite can benefit anyone from individuals and freelancers to larger multi-disciplinary teams. Since every Vue.js project is not installed with Vue CLI, we'll have a dedicated chapter where we cover how to install Storybook in a custom Vue.js project that does not use Vue CLI. We will also cover how to configure Storybook with TailwindCSS and Vuetify. This is the ultimate course if you want to begin using Storybook in your Vue.js projects, regardless if you're using the Vue CLI or not.

Vue 3 introduced the Composition API as an alternative method to the Options API for writing component state and logic. In this course, we cover everything you need to know: from the basics to real world scenarios. Learn the Vue.js 3 Composition API from top to bottom including topics like: * How to start using the Composition API * What is a ref? * What's the difference between ref and reactive? * Accessing props, attrs, slots, and the emit function * Watching data and reacting to changes * Using lifecycle hooks * Using provide/inject * Eliminating boilerplate with the setup attribute * Using async/await in setup * Writing reusable composables * Using composables for global state management * and more! **Requirements** You should be familiar with JavaScript, basic ES6 like arrow functions and import statements, and have fundamental knowledge of Vue.js and the options API. If you are just starting out with Vue.js, we suggest that you watch our free course Vue.js 3 Fundamentals and browse around our other beginner courses before diving into the Vue Composition API. If you are looking to brush up your ES6 skills, watch our course Modern JavaScript: ES6 and beyond.

In this course, you'll learn how to use Vue-Apollo and GraphQL APIs in your Vue.js applications. GraphQL is a query language for APIs and a runtime to execute said queries. The Apollo client is a complete state management library that takes care of caching data, refetching queries, and much more. Vue Apollo and GraphQL allow us to build robust and performant user interfaces efficiently. During the course, we'll be working with the SpaceX GraphQL API. You'll learn best practices and workflow tips that enhance productivity and improves the developer experience. This course assumes that you know the fundamentals of GraphQL. If you do not, we recommend that you take our [GraphQL Fundamentals course](https://vueschool.io/courses/learn-graphql-fundamentals) beforehand.

In this course, you'll learn how to use slots and scoped slots to create flexible and reusable Vue.js components. Slots allow us to pass components and HTML to components, giving us greater control of the appearance than what we get with props. Slots do not replace props. The two features have different purposes. **During the course, you'll learn:** - When and how to use slots - What scoped slots are - How to work with dynamic named components - How to compose components with reusable component patterns ### Important! This course uses Vue 2. While the slots API has changed slightly in Vue 3 many of the concepts taught in this course are the same. View what's changed in the Vue 3 Docs Migartion Guide [here](https://v3.vuejs.org/guide/migration/slots-unification.html) and [here](https://v3.vuejs.org/guide/migration/listeners-removed.html#overview).

Vue.js is a fantastic JavaScript framework, that is performant, progressive, and remarkably easy to start using. This is our course on the very basics of Vue.js - The Vue.js Fundamentals. Vue.js 3 provides 2 different API options for interacting with it's core functionality. In this course, we will teach you the fundamental concepts of Vue.js 3 using it's more traditional API: **the Options API**. Once completed, you'll have a solid foundation for your Vue journey. ### The Vue.js 3 Fundamentals course covers: - Introduction to two-way data binding - Template syntax and expressions - Vue directives, loops and conditional rendering - Vue Devtools - Handling user Inputs - Handling Events - Vue.js Methods and Computed Properties - Attribute Bindings and dynamic classes The course is suitable for developers who do not yet know about Vue.js or are just getting started with Vue. If you're looking for an advanced, thorough Vue.js 3 course where you learn by building a real-world application we recommend you to check out [The Vue.js 3 Master Class](https://vueschool.io/courses/the-vuejs-3-master-class).

In this course, learn how to create powerful Vue 3 Single Page Applications (SPA’s) with the Vue Router. Single Page Applications are web apps or sites that interact with the user by dynamically rewriting the current page rather than loading entire new pages from the server. This approach allows us to only fetch the data/section of our page that is needed when a user interacts with our app. By dynamically rewriting smaller chunks of our site, it prevents us from re-downloading already loaded resources such as the images, scripts, CSS, etc. As a result SPA’s tend to improve the user experience by: 1. Providing faster load times between page navigations 2. Behaving more like traditional desktop applications In this course, you’ll learn everything you need to know about the Vue Router to either create rapid prototypes or ımpressive, full-blown Vue.js SPA’s. **By the end of this course you will master** - How to scaffold a new Vue 3 project, including the Vue Router with Vue CLI - How to create routes, including named routes - Learn how to lazy load your routes - Learn how to work with Vue Router Params and pass them as props to components - How to create dynamic and nested routes - Learn how to create impressive route transitions - How to create a 404 page with the Vue Router - Learn what navigation guards are and how to create an authentication middleware for your app - How to work with Vue router in tandem with the Vue Composition API - And much much more. You need a basic understanding of Vue.js to enjoy this course. We recommend watching [Vue.js 3 Fundamentals](https://vueschool.io/courses/vuejs-3-fundamentals) and [Vue.js 3 Components Fundamentals](https://vueschool.io/courses/vue-js-3-components-fundamentals) if you’re not already familiar with Vue.js and components.

Learn everything you need to know to get started with Vue.js components. Web components are custom developer defined HTML elements, like `<p>`,`<body>`, or `<button>`, that allows us to encapsulate some functionality of our applications. Components are the puzzle pieces of a Vue.js website. Components combine blocks of HTML, JavaScript, and CSS. And as a result, they allow us to easily encapsulate and reuse functionality in our applications. **After this course, you'll be familiar with:** - The idea behind components and how Vue.js components work - Component's template, and multiple ways to define your template - Communication between components with props and custom events - The difference between global and local component registration - The lifecycle hooks of a component - Component composition with nested components and slots - Component's best practices and common pitfalls We've also prepared exercises for the course, so you can practice what you learn. **Vue.js Component Exercises:** - Build a GitHub user profile component - Create a Notification Message component You need a basic understanding of Vue.js to enjoy this course. We recommend watching [Vue.js 3 Fundamentals](https://vueschool.io/courses/vuejs-3-fundamentals) if you're not already familiar with Vue.js

Learning how to work with Single File Components is a vital step in mastering Vue.js. In this course you’ll learn everything you need to know about Vue’s Single File Components, so you can start using them in your projects today and speed up your development. **By the end of this course you will know** - How to scaffold a new Vue.js project with Vue CLI 4 - What the drawbacks of global components are - How to take advantage of the build step and Pre-Processors like Jade, Pug, Stylus, and Sass - How to reuse your Single File Components by exporting and importing them - How to organize your Single File Components according to the official style guide - What CSS Modules are and how to use scoped styles in your Single File Components You need a basic understanding of Vue.js Components to enjoy this course. We recommend watching [Vue.js Components Fundamentals](https://vueschool.io/courses/vue-js-3-components-fundamentals) if you're not already familiar with Vue.js components.

TypeScript is a super set of the JavaScript language that introduces static typing. In recent years, it's taken the JavaScript community by storm due to it's ability to create more maintainable and scalable code. In this course, we'll learn about the benefits of TypeScript, the ins and outs of it's syntax, and best practices around using it to make professional quality JavaScript code. Topics included in the course include: * Implicit and Explicit Types * Functions and Types * Union Types * Literal Types * Type Aliases * Interfaces * Type Assertions * Typescript and Classes * Enums * Generics * and more! **Requirements** You should be familiar with JavaScript concepts and syntax like declaring variables, functions, etc, as well as ES6 fundamentals like modules and the arrow syntax. You do NOT have to familiar with Vue.js as this is a more generic course. If you are looking to brush up your ES6 skills, watch our course [Modern JavaScript: ES6 and beyond](https://vueschool.io/courses/modern-javascript-es6-and-beyond).

As of winter 2021, Pinia is the officially recommended state management solution for Vue.js. Use it to provide a central data store that works with both the Options API and the Composition API. Pinia is a great choice for statemanagement because it: * has an intuitive API * is Type Safe for accurate auto completion * includes support for Vue.js Devtools * has a plugin system that makes it easily extended * is modular by design making for better organized code and automatic treeshaking * is extremely lightweight, at ~1kb In this course, learn everything that you need to know to be proficient with Pinia as a state management solution in your Vue.js applications.

Vite is a first-in-class build tool that aims to provide a faster and leaner development experience for modern web projects. In this course, we cover everything you need to know in order to get a Vue.js project up and running with Vite. From understanding how Vite works under the hood, to starting your new Vue projects with Vite, to the wealth of Vite features, to migrating from Vue CLI to Vite, we cover it all! Topics include: * starting a project using `npm init vite`, the create-vue tool, or a community provided vite template. * writing styles in vue components, in seperate stylesheets, with your favorite pre-processor, or even with CSS modules * working with images and static assets in Vite * using Vite to bundle your application for production * migrating an existing Vue CLI project to Vite * creating Vite templates * and using and creating Vite plugins

Unfortunately, none of us has ever written a 100% perfect application at scale. With every new line of code comes new opportunities for bugs to creep in and cause unexpected behavior and poor customer experiences. That's why [Sentry](https://sentry.io?utm_medium=partner&utm_source=vueschool&utm_campaign=evergreen-vue-school-course-2022) exists. Sentry is the missing link that let's you peak over the shoulders of real life site visitors and get a detailed look at the real issues they're having. This is especially important with Vue.js powered Single Page Applications as all the code runs on the client side, meaning the server logs some might be used to, simply don't exist. Don't be fooled though, application monitoring with Sentry is light years beyond server logs. [Sentry](https://sentry.io?utm_medium=partner&utm_source=vueschool&utm_campaign=evergreen-vue-school-course-2022) provides a wealth of data in order to help you understand the scope of your issues and the overall health of your application, as well as provides valuable information on how to remedy the issues at hand. Features include: * Easy to read stack traces * Breadcrumbs of events * Seeing issues in relation to releases * Customizable rules for directing issues to the right team/person that can resolve it * Helpful charts and graphs of overall application health * Performance monitoring

Vue.js is a fantastic JavaScript framework, that is performant, progressive, and remarkably easy to start using. This is our course on the very basics of Vue.js - The Vue.js Fundamentals. In this course, we will teach you the fundamental concepts of Vue.js 3 and create a solid foundation for your Vue journey. **NOTE** : This course uses the Composition API. If you'd prefer to start with the Options API then checkout the course: [Vue.js 3 Fundamentals](https://vueschool.io/courses/vuejs-3-fundamentals). If you aren't sure about this, know that starting with this course and the Composition API is the recommended path. ### The Vue.js Fundamentals with the Composition API course covers: - Introduction to two-way data binding - Template syntax and expressions - Vue directives, loops and conditional rendering - Vue Devtools - Handling user Inputs - Handling Events - Vue.js Methods and Computed Properties - Attribute Bindings and dynamic classes The course is suitable for developers who do not yet know about Vue.js or are just getting started with Vue. If you're looking for an advanced, thorough Vue.js 3 course where you learn by building a real-world application we recommend you to check out [The Vue.js Master Class](https://vueschool.io/the-vuejs-master-class).

TypeScript is a super set of the JavaScript language that introduces static typing. In recent years, it's taken the JavaScript community by storm due to it's ability to create more maintainable and scalable code. In this course, we'll learn about: * the benefits of using TypeScript with Vue * how to setup a TypeScript and Vue project * how to setup VS Code to work with TypeScript and Vue * how to type all things Vue related such as * Typing reactive data * Typing props * Typing events * Typing templates refs * Plus much more! As we go through the course, we'll build a working journal application together. This will give you the hands on experience and the know-how of working with TypeScript in a real Vue project, providing a more comprehensive understanding than one off examples and counter components.

VueUse is a collection of hundreds of essential Vue Composition Utilities for interacting with various browser, sensor, animation, and state apis, plus more! In this course, we’ll sample some hand picked functions from each category to give you an idea of what’s possible with VueUse. Along the way we'll examine not only how they work but some practical applications for how you might use them. By the end of the course, hopefully we'll have equipped you with a pretty awesome tool set and wet your appetite to utilize VueUse in your own Vue.js projects. With VueUse you can quickly implement features such as: * copy to clipboard * dark mode/light mode * infinite scroll * sprite animations * drawing on a canvas * local backups for bad connections * dynamic favicons and page titles * keyboard shortcuts * and so much more!

As a Vue.js developer, one of the tools you'll use most often is your code editor (IDE). In this course, learn how to make the most out of the officially recommended IDE for Vue.js development: Visual Studio Code. Visual Studio Code (aka. VS Code), is a free and open source IDE that runs on Mac, Windows, and Linux. It's created by Microsoft, is super popular in the front-end development world, and has a ton of features for making work with HTML, CSS, JavaScript/TypeScript, and of course Vue.js, a pleasure. During the course, we'll cover essential topics like using the official Volar extension for syntax highlighting and other Vue.js 3 feature support inside of `.vue` files. We'll also cover using popular Vue.js snippet extensions and even how to create your own, when existing snippets don't fit your needs. Since Vue obviously lives inside the larger ecosystem of front end development we'll also explore a wealth of other features, extensions, keyboard shortucts, and settings to streamline your daily workflow. Perhaps one of the most important being how to setup and use ESLint for code linting and Prettier for code formatting. These tools save you so much time on what should be trival issues. If you're looking to improve your workflow for speed and enjoyability, then this course is a must watch!

In the early days of the web, html files served from static servers were the basis of most websites. Today, many websites are generated on demand by powerful backends, as pages are requested. The latter approach has led to many benefits but also led to issues with security, performance, complexity, and cost. What if you could have the best of both worlds? That’s where the Jamstack enters the picture. The Jamstack architecture is a modern approach that capitalizes on the power of JavaScript in the client and powerful site generators that output static html. The approach keeps sites dynamic and feature rich, while making them cheap, simple, and performant to host and serve. Perhaps, best of all, if you’re interested in working with the Jamstack, you have a wealth of options available as far as frameworks, static site generators, and programming languages are concerned. In this course, dive into the Jamstack with Nuxt.js. This powerful meta-framework built on top of Vue.js, means working with technologies you’re already familiar with and getting static site generation support for free. We’ll also utilize the top ranked CMS Storyblok, to act as a headless CMS for the statically generated site. It includes features such as: - an intuitive developer API - live site previews that update as content creators type - and support for draft and published content By the end of the course, you’ll have hands on experience building a site for the Jamstack that clearly doesn’t skimp on features and content management while still being simple, cheap, performant, and secure.

Vue.js Directives are special HTML attributes that allow us to manipulate the DOM. Directives are very powerful and we use them every day. Common directives are `v-if`, `v-for` and `v-model`. The course covers all you need to know to be able to create your own, custom vue.js directives. In the course, we create a couple different directives to showcase the possibilities and power of custom vue.js directives. **This is the updated Vue.js 3 Version of our original [Custom Vue Directives course](https://vueschool.io/courses/custom-vuejs-directives).** ### The Directives `v-color` changes the CSS color of the element every 500 milliseconds. `v-click-outside` allows us to attach an event handler to when a user clicks outside an element. Perfect for modals and pop-over menus, toolboxes etc. While the first might seem silly, it's a great demonstration of the directives API and how you create a Vue.js directive. The possibilities with these patterns are very powerful. The course also teaches you what you need to know about directive modifiers and hooks.

Plugins allow you to quickly install advanced functionality to your Vue.js applications. Officially maintained plugins include [Pinia](https://pinia.vuejs.org/) for global state management and [Vue Router](https://router.vuejs.org/) for single page app route support. Plugins are often provided by 3rd parties on npm to support a large variety of plug-and-play functionality. [Floating Vue](https://floating-vue.starpad.dev/) is a fast way to implement tooltips and other floating UI elements. Full UI libraries like [Prime Vue](https://www.primefaces.org/primevue/) and [Vuetify](https://vuetifyjs.com) are also Vue.js plugins. Interested in building your own custom plugins? Look no further! In this course you'll learn everything you need to know! Build a **custom tooltip plugin** and learn how to define a plugin, register components, provide global properties and methods, use provide/inject, accept plugin options, and more!

Nuxt is meta-framework built on top of Vue. It is the go-to way for creating server rendered apps for Vue and the latest version (v3) includes a huge number of new features for end users and devs alike. In this course learn: * how to create a new Nuxt 3 project from scratch * how to quickly creates routes with file-based routing * how to work with async data * and more! Plus, get a first hand look at how well Nuxt integrates with TypeScript and the auto-complete options in your IDE!

In this course, we’ll create a functional and dynamic UI for managing tasks via a Trello style task board. We’ll start from nothing and end with a simple yet fully functional app. Create new tasks and columns. Drag and drop tasks to different columns. Drag and drop to re-order columns. Alt (or Option) drag to clone tasks and more! This course focuses on teaching how to use the Vue draggable library but also gives you great insight into the workflow of all the facets of front-end dev, from marking up content, to styling it with Tailwind CSS, to advanced behavior with Vue and VueUse, and typing with TypeScript.

In this course the creator of Vitest, [Anthony Fu](https://twitter.com/antfu7), will get you up and running with the fastest testing framework around. Learn the basics of how to do unit testing, why it's important, and how to be more confident shipping to production. Even if you are brand new to unit testing, don't worry! Anthony will start with the fundamentals and work up to more advanced topics such as mocking and spying. Learn the benefits of TDD (Test Driven Development) and practice using the approach to build a simple deep merge function. In the process, get familiar with Vitest syntax and best practices. Test both expected functionalities and that unexpected input throws the proper errors. Finally, experience the blazing fast feedback loop testing with Vitest provides and get **hot tips** from an avid open source developer who uses Vitest in a variety of real worl projects including: [Vite](https://vitejs.dev), [Slidedev](https://github.com/slidevjs/slidev), [UnoCSS](https://github.com/unocss/unocss), and even Vitest is tested with Vitest!

Forms are the core of interactive and dynamic web pages. They accept user input and must respond to that input often in real time and in a variety of ways. [FormKit](https://formkit.com/) is a plugin for Vue.js that addresses common form needs like validation, de-bouncing, and schema support all with an intuitive and easy to use component API. In this course, learn how to let FormKit handle the tedious parts of form development so you can focus on business requirements and shipping robust forms!

Vue has held a special place in the front-end for Laravel developers since 2015. It started when the Laravel creator Taylor Otwell tweeted: "Learning @vuejs because it looks easy and has pretty website." Since then, many companies have paired the two technologies to create powerful and flexible web applications. Over time, there have been many approaches to pairing the 2. It's possible to sprinkle in Vue.js just on the front-end with the bulk of the work done in blade templates. [Inertia.js](https://inertiajs.com/) enables creating modern single-page Vue apps using classic server-side routing (dubbed "the modern monolith"). It's also common to use Laravel to power a REST API that a completely seperate Vue.js application can utilze as the backend. In this course, we'll take the last approach. We'll provide a fully functional Laravel backend for you to startup locally and then together we'll build out a front-end to interact with it. Along the way, you'll learn not only how to interact with the REST API from Vue but we'll also peak behind the curtain of how the server side Laravel application assembles it's responses. They'll be plenty of tips and tricks throughout the course, specific to working with Vue.js with a Laravel backend. Things like: setting up auth, handling form validation errors, efficiently and elegantly fetching data, handling with pagination, and more! This course is perfect for: * the full stack dev who wants to pair Vue.js 3 with Laravel * the front end dev who works with a Laravel backend maintained by his/her colleagues * even for someone who is relatively new to Laravel and wants a high level overview of how it can power a REST API

Graphs are a common part of modern day dashboards. They are a great way to show analytics for all kinds of things in a easy to digest format. Learn to support robust graphs for your app with ChartsJS for Vue.

AI is a powerful tool of the future. With Open AI's Chat Completions API (GPT-3.5 Turbo and GPT-4), adopting it in your applications is as easy as a REST request. Learn how to interact with this powerful API in the context of a Vue 3 application by building: * A Vue.js powered ChatGPT clone * A trained Custom Support Chat Bot * An app that automatically generates Social Media Posts when given an article URL

When developing a Vue application, you may occasionally need to expose a component's internal state. This allows the component consumer to finely control it. One common scenario where this is useful is with modal overlays. Although a modal typically has its own trigger, there may be situations where you need to toggle the same modal with a trigger external to the component. Throughout this course, we will explore various techniques for exposing a component's internal state in Vue, as well as ways to achieve the same result using Vue's utilities without explicitly exposing the state.

If you’re just getting started with Vue, here’s where to get going. We cover all the basics and give you challenges so you can learn by doing.

Discover the full functionality of Vue components with Gregg Pollack & Evan You, the creator of Vue.

Past the basics, we’ll show you more techniques that are needed to ship Vue applications. Topics include Vue CLI, Vue Router, Single File Components, and API calls.

Once you are comfortable with Vue, learning a framework like Nuxt.js allows you to create production-ready web apps which follow best practices.

Learn how to handle state in a production-level application with Vuex, Vue's own state management pattern and library.

Learn more advanced real-world practices on routing, component loading, code reuse, and forms.

Learn how to control access to certain parts of your app by implementing user authentication with JWT.

Core team member Damian Dulisz joins Gregg Pollack to build a Trello clone in Vue.js together. We build the app using Vuex, local storage, the browser drag and drop API, and lots of component refactoring.

Learn how to create beautifully styled and structured web apps using Vuetify, a material design component framework.

Bring your web interface to life and improve your user experience with Vue animations.

Learn Vue 3's new Composition API, an alternative way to compose components for scalable Vue applications.

Learn about the benefits of unit testing, and what you should and shouldn't be testing in your Vue apps.

The way Vue 3 does reactivity is entirely different from Vue 2. Learn how it works under the hood throughout this advanced course.

Build your best components by understanding the best practices and pros and cons of various design patterns.

Put theory into practice by building a feature-rich email app that makes use of the core new features of Vue 3.

Create simpler and more powerful reusable forms with Vue 3.

Understand Vue 3 from the inside out through the perspective of the creator himself, Evan You.

Learn the fundamentals of Vue 3 in this course that starts with the very basics.

Bring yourself up to speed on new features and breaking changes when migrating from Vue 2 to Vue 3

Learn the fundamentals of building a production-level single page application with Vue 3.

With Vue 3's enhanced TypeScript support, using it just got easier. Learn how to strengthen your Vue apps with this popular technology.

Explore how Vue Router gives your Vue 3 app the navigation features it needs to scale.

Explore how to thoroughly test a production-level Vue app

Learn how state management with Vuex can handle your app's data needs.

Learn about the benefits of unit testing, and what you should and shouldn't be testing in your Vue apps.

In this course, you’ll learn how to get started with building a web app that’s offline-ready with Vue 3 and Progressive Web Apps.

Use GraphQL to modernize how your Vue app queries, manipulates, and stores data.

Learn how to validate any type and size of form in Vue 3 by leveraging the power of Vee-Validate.

Learn about Vite, the lightning-fast and lean build tool and dev server, billed as the next generation of front end tooling. Taught by its creator, Evan You.

Seeking a better developer experience when using TypeScript in your Vue 3 apps? This course demonstrates how the script setup syntax is your new best friend.

Learn Vue 3’s new elegant state management library built upon the composition API.

Learn this intuitive framework that includes built-in tools and structure to build Vue apps that can scale.