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 2 course available online. The Vue.js 2 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!

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** [Vue 2 has reached its end-of-life (EOL)](https://v2.vuejs.org/eol/) and is no longer actively maintained. For a modern, future-proof experience, we recommend using the latest version, [Vue 3](https://vuejs.org/guide/introduction.html). If you're new to Vue, start with the [Vue.js 3 Fundamentals with the Composition API](https://vueschool.io/courses/vue-js-fundamentals-with-the-composition-api) course for a comprehensive introduction to Vue 3 and its Composition API. Prefer the **Options API**? Check out the [Vue.js 3 Fundamentals with the Options API](https://vueschool.io/courses/vuejs-3-fundamentals) course. To better understand the differences between the Composition API and the Options API, read our article: [Vue Options API vs Composition API](https://vueschool.io/articles/vue-options-api-vs-composition-api). --- 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 2 and create a solid foundation for your Vue journey. ### The Vue.js 2 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 2024 Edition (https://vueschool.io/courses/the-vuejs-3-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**. --- > ⚠️ This course uses Nuxt version 2. [Visit this course for our latest material on Nuxt 3.](https://vueschool.io/courses/nuxt-js-3-fundamentals)

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**. --- > ⚠️ This course uses Nuxt version 2. [Visit this course for our latest material on Nuxt 3.](https://vueschool.io/courses/nuxt-js-3-fundamentals)

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**. --- > ⚠️ This course uses Nuxt version 2. [Visit this course for our latest material on Nuxt 3.](https://vueschool.io/courses/nuxt-js-3-fundamentals)

Learn everything you need to know to get started with Vue.js 2 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. ### You Will Learn 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 ## Exercises 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 2 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.

⚠️ This course is taught using an outdated version of Vue Router. For the latest and greatest see our newer course [Vue Router 4 for Everyone](https://vueschool.io/courses/vue-router-4-for-everyone). ⚠️ 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. 📝 NOTE: This course is created for story writing in Vue 2. For more up to date information on writing component stories in Vue 3 checkout our course [Crafting a Custom Component Library with Vue and Daisy UI](https://vueschool.io/courses/crafting-a-custom-component-library-with-vue-and-daisy-ui). In it, we utilize [Histoire to write component stories](https://histoire.dev/) while building a component library [styled with DaisyUI](https://daisyui.com/). 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. NOTE: This course is best suited for those already familiar with the Options API. If you are just starting out with Vue.js, we suggest that you watch our free course [Vue.js Fundamentals with the Composition API](https://vueschool.io/courses/vue-js-fundamentals-with-the-composition-api) and browse around our other beginner courses before diving into the Vue Composition API.

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. NOTE: If you are just getting started with Vue, it is recommended use the Composition API instead of the Options API. We've got you covered 👇 [Watch Vue.js 3 Fundamentals with the Composition API now!](https://vueschool.io/courses/vue-js-fundamentals-with-the-composition-api) ### 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).

Creating fast and smooth **Single Page Applications** (SPAs) is the trend in today’s web development world. **Vue Router 4** is the perfect tool to manage routing in **Vue.js 3** apps, enabling you to build highly interactive, efficient SPAs that users love. In this course, you'll dive into everything you need to know to make your Vue apps dynamic, performant, and easy to navigate. ### Why SPAs? SPAs are web apps that dynamically update the web page's content instead of reloading entire pages. This results in: - **Faster load times**: Only the needed data is fetched, not the whole page. - **Smoother experience**: No more full page reloads—users get a seamless, app-like feel. [Vue Router](https://router.vuejs.org/) 4 makes it all happen, allowing you to build fast, efficient [Vue.js](https://vuejs.org/) SPAs that users will appreciate. ### What Will You Learn in This Course? In this course, you’ll master the ins and outs of **Vue Router 4** and learn how to integrate it with your **Vue 3** projects: - **Set up a Vue 3 project** with **Vue Router 4** using both [Vue CLI and Vite](https://vueschool.io/articles/vuejs-tutorials/how-to-migrate-from-vue-cli-to-vite/). - **Add and manage routes**: Learn how to create routes, including **named routes** for better navigation. - **Lazy load routes**: Improve your app’s performance by loading routes on demand. - **Work with dynamic and nested routes**: Build multi-level navigation for more Vue complex apps. - **Use Vue Router params**: Pass dynamic data between components and manage state. - **Create smooth route transitions**: Make your app feel polished with impressive page transitions using [Vue Transition](https://vueschool.io/courses/vue-js-transitions-and-animations). - **Handle 404 pages**: Build a custom 404 page for unmatched routes. - **Implement navigation guards**: Add authentication and route protection to your app. - **Integrate Vue Router with the Vue Composition API**: Learn how to use Vue Router with the [Vue Composition API](https://vueschool.io/articles/vuejs-tutorials/options-api-vs-composition-api/) for a modern development approach. ### Prerequisites To get the most out of this course, you’ll need some basic understanding of **Vue.js**. If you’re not familiar with Vue, we recommend checking out these courses first: - [**Vue.js 3 Fundamentals with the Composition API**](https://vueschool.io/courses/vue-js-fundamentals-with-the-composition-api) - [**Vue Component Fundamentals with the Composition API**](https://vueschool.io/courses/vue-component-fundamentals-with-the-composition-api) If you prefer the Vue Options API: - [**Vue.js 3 Fundamentals with the Options API**](https://vueschool.io/courses/vuejs-3-fundamentals) - [**Vue.js 3 Components Fundamentals With the Options API**](https://vueschool.io/courses/vue-js-3-components-fundamentals) These will give you the foundational knowledge to jump into **Vue Router 4** with confidence. ### Why Take This Course? - **Comprehensive, step-by-step learning**: From setting up your project to advanced Vue Router techniques, we've got it all covered. - **Hands-on experience**: You’ll apply what you learn by building a real Vue app with Vue Router. - **Modern, SEO-friendly apps**: Master **Vue Router 4** and **Vue Composition API** to build scalable, high-performance SPAs. - **Master the Vue ecosystem**: Understand how **Vue Router 4** fits into the larger Vue.js world and how to use it to create professional-grade apps. ### Who Is This Course For? This course is perfect for: - **Vue.js developers** looking to deepen their understanding of routing in modern apps. - **Beginner and intermediate developers** eager to build fast, dynamic SPAs with Vue.js. - **Anyone who wants to master Vue Router 4** and build better, more interactive web apps. By the end of this course, you'll be equipped with the skills to build powerful, efficient SPAs with **Vue Router 4**, and create a seamless user experience every time.

**Unlock the power of Vue.js 3 components** and learn how to build dynamic, reusable, and maintainable applications using Vue’s **Options API**. This course is designed to introduce you to the fundamentals of **Vue components**, focusing on how Vue components function, how to communicate between Vue components, and how to optimize Vue components performance in your Vue projects. *If you're also interested in the **Composition API**, be sure to check out our [Vue Component Fundamentals with the Composition API course](https://vueschool.io/courses/vue-component-fundamentals-with-the-composition-api). The Composition API is the recommended component design style.* ### What Are Components? In software development, **components** are modular, reusable units that represent a distinct piece of functionality or a user interface element. Components allow you to break down complex applications into smaller, manageable parts. These units can range from simple UI elements like buttons or forms to more complex features like navigation bars or user profile sections. A component can encapsulate behavior (JavaScript), styling (CSS), and structure (HTML), but this is not always the case in every framework or library. ### What Are Vue Components? In [Vue.js](https://vuejs.org/), **components** are a core concept that allows you to build a Vue application using reusable blocks. Each **Vue component** can represent a part of the user interface (like a button or form), encapsulating its own logic and template. Vue components enable: - **Reusable code**: Write modular code that can be reused across your application. - **Dynamic UI**: Bind data to components, making it easy to reflect changes in your application. - **Event handling**: Communicate between components using events, props, and custom events. - **Scalability**: Break down large, complex UIs into smaller, more manageable parts. Vue components help you structure your application in a maintainable way, allowing you to build large, dynamic applications with ease. ### What You’ll Learn in This Course: By the end of this course, you’ll have a solid understanding of how to create, manage, and optimize Vue components using the **Options API**: - **Vue.js components**: What they are, why they are important, and how to define them using the **Options API**. - How to structure a **component’s template**, bind data, and use **dynamic rendering**. - **Component communication** using **props**, **custom events**, and **v-model** for two-way data binding. - How to register components globally and locally, and understand when to use each approach. - Vue component **lifecycle hooks** such as `created()`, `mounted()`, and others to control component behavior at various stages. - **Best practices** for Vue components, including performance optimization and avoiding common pitfalls. ### Hands-On Vue.js Component Exercises: To help reinforce your learning, we’ve included practical exercises: - **Build a GitHub user profile component**: Use **props** and **custom events** to dynamically fetch and display user data. - **Create a Notification Message component**: Develop a reusable notification component with **conditional rendering** and **custom events**. ### Prerequisites: This course assumes you have a basic understanding of **Vue.js**. If you are new to Vue.js or need to brush up on the fundamentals, we recommend starting with our course: [Vue.js 3 Fundamentals](https://vueschool.io/courses/vuejs-3-fundamentals). By the end of this course, you’ll be able to build efficient, reusable, and scalable Vue components using the **Options API** to enhance your Vue.js applications. **Start mastering Vue components today and elevate your Vue.js development skills to the next level for free!**

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.

Ready to level up your JavaScript skills? **TypeScript** is the key to writing more maintainable, scalable, and error-free code. Whether you're building a small project or a massive application, TypeScript adds power to JavaScript by introducing **static typing** and improving the development experience. In this course, we’ll dive deep into **TypeScript 101** — perfect for anyone looking to **learn TypeScript** from scratch. We’ll explore everything from basic TypeScript syntax to advanced concepts like **generics** and **enums**, with hands-on examples and practical tips to help you write clean, professional-quality code. ### What You'll Learn - **What is TypeScript?** Learn the basics and understand the fundamentals of [TypeScript](https://www.typescriptlang.org/) and how it enhances JavaScript. - **Static Typing**: Get comfortable with **implicit** and **explicit types**, and see how they help catch errors early. - **Working with Functions**: Learn how to define **functions with types** and ensure your code is robust and maintainable. - **Union & Literal Types**: Master how to use **union types** and **literal types** to write flexible yet type-safe code. - **Interfaces & Type Aliases**: Discover how **interfaces** and **type aliases** let you define complex data structures. - **Type Assertions**: Understand how to use **type assertions** to tell TypeScript exactly what type of data you’re working with. - **Classes in TypeScript**: Explore **TypeScript and classes** to bring object-oriented principles into your codebase. - **Enums**: Learn how to use **enums** to define sets of named constants that can be used throughout your code. - **Generics**: Take on **generics** and create reusable components with flexible, type-safe code. - And much more! By the end of this course, you’ll have a solid grasp of TypeScript’s core features, enabling you to **write better JavaScript code** and build scalable applications with confidence. ### Who is This Course For? This course is perfect for developers who are already familiar with JavaScript and want to **get started with TypeScript**. Whether you're new to **TypeScript** or just need a refresher, this course will guide you through all the essential concepts and get you up to speed. ### Why Learn TypeScript? TypeScript is quickly becoming the standard for large-scale JavaScript development, and for good reason. Here’s why you should add it to your toolkit: - **Improved Maintainability**: With static typing, your code becomes easier to maintain and less error-prone. - **Better Developer Experience**: TypeScript’s tooling offers autocompletion, error checking, and documentation, making coding faster and more efficient. - **Scalable Code**: TypeScript helps you write code that scales, perfect for building robust, production-grade applications. - **Community Support**: TypeScript’s growing community means tons of resources, libraries, and tools to help you get the job done. ### Course Prerequisites To get the most out of this course, you should have a basic understanding of JavaScript—especially concepts like variables, functions, and ES6 features (such as modules and arrow functions). If you’re looking to brush up on your JavaScript skills before diving into TypeScript, check out our [Modern JavaScript: ES6 and Beyond](https://vueschool.io/courses/modern-javascript-es6-and-beyond) course. No prior experience with Vue.js or other frameworks is required, as this is a **TypeScript-focused course** that applies to any JavaScript project. **Are you ready to master TypeScript and take your JavaScript skills to the next level? Enroll now and start coding with TypeScript today!**

Pinia is the **officially recommended state management solution for Vue.js**. It’s designed to provide a **centralized store** that works smoothly with both the Vue **Options API** and the **Composition API**, making it versatile for all Vue.js and Nuxt projects. ### Why Pinia Is the Go-To State Management Solution [Pinia](https://pinia.vuejs.org/) brings many features that set it apart: - **Intuitive API**: Simplifies managing app state, making it beginner-friendly. - **TypeScript Support**: Offers type safety and accurate auto-completion for efficient coding. - **Devtools Integration**: Debug and inspect state easily with Vue.js Devtools. - **Extensible**: Customize and enhance functionality using its plugin system. - **Modular by Design**: Encourages better organization and supports automatic treeshaking. - **Lightweight**: At just ~1kb, Pinia ensures your app remains fast and efficient. ## What You’ll Learn in This Course This course equips you with the skills to master **Pinia** as your state management solution in [Vue.js](https://vuejs.org/) and [Nuxt](https://nuxt.com/) applications. Here’s what we cover: - Learn Vue state management concept. - Setting up Pinia for your Vue.js projects. - Managing application state using the Vue **Options API** and the **Composition API**. - Creating and utilizing stores to handle app data effectively. - Structuring scalable and modular stores for maintainable codebases. - Leveraging TypeScript for error-free and type-safe development. - Extending functionality with Pinia plugins. - Debugging and optimizing state management using Vue Devtools. By the end, you’ll confidently use Pinia to build **scalable**, **maintainable**, and **high-performance** Vue.js applications. ## Who Should Take This Course? This course is perfect for: - **Beginner Vue.js Developers**: Learn state management in Vue from scratch. - **Intermediate to Advanced Developers**: [Transition from Vuex](https://vueschool.io/articles/vuejs-tutorials/how-to-migrate-from-vuex-to-pinia/) or other solutions and refine your skills. - **Team Leads**: Establish modern and consistent state management practices for your Vue projects. ## Why Learn Pinia Now? With its **developer-friendly design** and **official Vue.js recommendation**, Pinia has become the leading choice for state management. Learning it now ensures your Vue.js skills remain relevant and future-proof. Take the next step in mastering Vue.js with **Pinia: The Enjoyable Vue Store** and elevate your applications to the next level!

Speed, simplicity, and a development experience that just flows — that’s what Vite is all about. In this course, Rapid Development with Vite, you’ll learn how to harness this game-changing build tool to create lightning-fast Vue.js projects. Whether you’re starting a brand-new project or upgrading from Vue CLI, this course will guide you every step of the way, making modern web development faster, smarter, and more enjoyable. ### What is Vite? [Vite](https://vitejs.dev/) (that’s “veet”, like wheat) is a next-gen build tool designed to make modern web development ridiculously fast. Unlike the old-school bundlers that drag their feet, Vite leverages modern browser capabilities to keep things snappy during development. Think [instant hot module replacement (HMR)](https://vite.dev/guide/features.html#hot-module-replacement), near-zero startup time, and builds so fast you’ll double-check they actually ran. Spoiler: they did. Here’s what makes Vite awesome: - **Superfast Feedback Loop:** You make a change, and it’s live before you can say “refresh”. - **Zero Hassle for Static Assets:** Images, CSS, JSON — you name it, Vite handles it with zero fuss. - **Customizable to the Core:** From plugins to configuration, you can customize Vite to your project needs. ### Why Take This Course? Because you’re tired of wasting time on slow builds, clunky tools, and outdated workflows. This course is your ticket to mastering Vite, whether you’re starting a new Vue.js project or upgrading an existing one. Here’s what you’ll learn: - How to kickstart projects with tools like `npm create vite@latest`, **Create Vue**, or community templates. - The best ways to style your app — whether you’re using scoped styles in Vue components, CSS Modules, or pre-processors. - Effortlessly handling static assets, from images to JSON files, while keeping your app lightweight. - Building for production with confidence — Vite ensures your code is optimized and ready for prime time. - Migrating step-by-step [from Vue CLI to Vite](https://vueschool.io/articles/vuejs-tutorials/how-to-migrate-from-vue-cli-to-vite/) without losing your mind. - Going pro with custom plugins and reusable templates to take your projects to the next level. ### What Makes Vite a Game-Changer? Vite doesn’t just shave time off your builds — it transforms the way you approach development. Imagine spending less time waiting and more time building. With Vite, you’re in the driver’s seat, cruising through your workflow at top speed. And with a growing community of developers sharing tips, templates, and plugins, you’ll always have backup when you need it. ### Let’s Build Better, Faster, and Smarter By the end of this course, you’ll not only know how to wield Vite like a pro, but you’ll also wonder how you ever managed without it. Whether you’re a seasoned Vue.js developer or just getting started, this course is packed with practical insights and hands-on projects to help you build apps that are both powerful and fun to create. It’s time to ditch the slow lane and step into the future of web development. Let’s get started!

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 progressive and approachable JavaScript framework that makes building dynamic web applications enjoyable and efficient. With the **Vue 3 Composition API**, you unlock cleaner, reusable code structures, perfect for modern development. This free course is your ultimate starting point, offering a fun and practical introduction to Vue.js fundamentals while leveraging the power of the Composition API. ### Why Learn Vue.js with the Composition API? The Vue 3 Composition API isn’t just a feature — it’s a game-changer. It simplifies complex logic, enhances reusability, and makes your code more scalable. By starting with the [Composition API](https://vuejs.org/guide/extras/composition-api-faq.html), you'll be on the recommended path for mastering [Vue.js 3](https://vuejs.org/) and building modern, maintainable applications. ### What You’ll Learn in This Course This course covers everything you need to confidently start building with Vue: - **Two-Way Data Binding:** Seamlessly sync your UI and data for interactive applications. - **Template Syntax and Expressions:** Write dynamic, intuitive templates with ease. - **Vue Directives:** Master loops, conditional rendering, and other essential directives. - **Vue Devtools:** Debug smarter and improve your workflow with powerful tools. - **Handling User Inputs:** Capture and manage user data effortlessly. - **Event Handling:** React to user interactions with clean, maintainable logic. - **Methods and Computed Properties:** Simplify your application logic for better performance. - **Dynamic Attribute Bindings:** Style your applications with dynamic classes and bindings. ### Who Is This Course For? This course is perfect for developers who are: - New to Vue.js and eager to learn the basics. - Looking to transition from the Options API to the Composition API. - Beginning their journey into JavaScript frameworks. It’s beginner-friendly but comprehensive, making it the perfect launchpad for your Vue.js expertise. ### Composition API vs. Options API If you’re wondering whether to start with the [**Composition API** or the **Options API**,](https://vueschool.io/articles/vuejs-tutorials/options-api-vs-composition-api/) know this: the Composition API is the recommended approach for modern Vue.js development. But if you prefer the Options API, check out our [Vue.js 3 Fundamentals course](https://vueschool.io/courses/vuejs-3-fundamentals). ### Ready for the Next Level? Once you’ve nailed the basics, dive into our advanced [Vue.js Master Class 2024 Edition](https://vueschool.io/courses/masterclass-2024-edition). Build a real-world application and deepen your understanding of Vue.js 3 in this hands-on course.

Ready to take your Vue.js skills to the next level? **TypeScript with Vue.js 3** course is the perfect combination for building scalable, maintainable Vue applications. TypeScript introduces **static typing** to JavaScript, improving your development experience by catching errors early and providing better tooling support. In this course, you’ll get hands-on experience with TypeScript in Vue, and learn how to integrate these two technologies for a smoother, more efficient development process. ### Why Learn TypeScript with Vue.js? [TypeScript](https://www.typescriptlang.org/) brings a new level of type safety and maintainability to [Vue.js projects](https://vuejs.org/). Here’s why you should [integrate TypeScript into your Vue development workflow](https://vuejs.org/guide/typescript/overview): - **Error Prevention**: TypeScript’s static typing helps catch errors early, preventing common bugs and improving code quality. - **Better Developer Experience**: With features like **autocompletion**, **inline documentation**, and **refactoring tools**, TypeScript enhances productivity and reduces debugging time. - **Scalable Code**: TypeScript makes managing large codebases easier, making it perfect for growing projects that require maintainability and scalability. - **Tighter Integration with Vue**: Learn how to fully utilize [**Vue’s Composition API**, **Options API**](https://vueschool.io/articles/vuejs-tutorials/options-api-vs-composition-api/), and other core features in a type-safe manner. ### What You’ll Learn - **Benefits of TypeScript with Vue**: Why using TypeScript with Vue.js is a game-changer for building modern applications. - **Setting Up TypeScript and Vue**: Step-by-step instructions for setting up a **TypeScript**-powered Vue.js project, including configuring **VS Code** for TypeScript development. - **Typing Vue Components**: Master how to **type reactive data**, **props**, **events**, and **template refs** to improve code reliability and maintainability. - **Composition API with TypeScript**: Learn how to use TypeScript effectively with the **Composition API** to create flexible and type-safe components. - **Options API and TypeScript**: Understand how to use TypeScript with Vue's **Options API**, including augmenting global properties and custom options. - **Working with Vue’s Provide/Inject**: Learn how to type data injected via Vue’s **Provide/Inject** system for better type safety across components. - **Refactoring with TypeScript**: Discover best practices for **refactoring** Vue.js components in TypeScript to keep your codebase clean and scalable. Throughout the course, you’ll build a **real-world journal application** to put your new TypeScript skills to the test. This hands-on approach ensures you gain practical experience working with TypeScript in a **Vue.js project**, helping you go beyond isolated examples and truly master the integration of TypeScript with Vue. ### Who Is This Course For? This course is ideal for **Vue developers** who want to integrate TypeScript into their workflow and leverage its powerful features for building scalable applications. ### Prerequisites To get the most out of this course, you should have a basic understanding of **JavaScript**, **Vue.js**, the Composition API, and TypeScript. If you're new to Vue.js, we recommend watching our course: [Vue.js 3 Fundamentals with the Composition API](https://vueschool.io/courses/vue-js-fundamentals-with-the-composition-api) If you’d like to refresh your JavaScript knowledge, check out our course [Modern JavaScript: ES6 and beyond!](https://vueschool.io/courses/modern-javascript-es6-and-beyond). If you're new to TypeScript or want to brush up on the fundamentals, we recommend completing our [TypeScript Fundamentals: Learn TypeScript from Scratch](https://vueschool.io/courses/typescript-fundamentals) course before diving into this one. **Start the TypeScript with Vue.js 3 course today and start building better, more scalable Vue apps with TypeScript!**

[VueUse](https://vueuse.org/) is a treasure trove of over 200 expertly crafted [Vue.js](https://vuejs.org/) Composition API utilities. This comprehensive course will equip you with the knowledge and skills to harness the power of VueUse and significantly enhance your Vue.js development workflow. ### Course Objectives: 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 this course, you'll be proficient in utilizing VueUse to: * Implement smooth animations and interactive user interfaces. * Integrate seamlessly with browser APIs for enhanced functionality. * Create robust and responsive Vue applications with ease. * Streamline state management and improve application performance. ### Key Features & Benefits: Unlock a World of Possibilities with VueUse and effortlessly implement features like: * **Copy to Clipboard**: Allow users to easily copy text to their clipboard. * **Dark Mode/Light Mode**: Create visually appealing and user-friendly dark/light mode options. * **Infinite Scroll**: Seamlessly load content as users scroll, enhancing user experience. * **Sprite Animations**: Create visually stunning and performant animations using sprite sheets. * **Canvas Drawing**: Enable interactive drawing experiences within your applications. * **Local Backups**: Ensure data integrity and user satisfaction with local backups for unreliable connections. * **Dynamic Favicons & Page Titles**: Create a more engaging user experience with dynamic favicons and page titles. * **Keyboard Shortcuts**: Enhance user productivity with intuitive keyboard shortcuts. **Start Learning VueUse Now and Unleash the Power of Vue.js Composition!**

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 Vue 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 are one of the most powerful tools in Vue.js, enabling you to add advanced functionality to your applications with ease. From state management with Pinia to seamless routing with Vue Router, plugins are integral to modern Vue development. But why stop at using existing plugins? With this course, you’ll learn how to create your own custom Vue.js 3 plugins tailored to your unique needs. ## What Are Vue.js Plugins? [Vue.js plugins](https://vuejs.org/guide/reusability/plugins) extend the capabilities of your applications by injecting reusable functionality. Popular examples include [**Pinia** for state management](https://pinia.vuejs.org/introduction.html) and [**Vue Router** for routing](https://router.vuejs.org/guide/). Plugins can also come from third-party libraries, such as [**Floating Vue** for tooltips](https://floating-vue.starpad.dev/guide/) or full UI frameworks like [**PrimeVue**](https://primevue.org/introduction/) and [**Vuetify**](https://vuetifyjs.com/en/introduction/why-vuetify/#what-is-vuetify3f). They offer a plug-and-play experience, making it easy to add robust features without starting from scratch. By mastering custom plugins, you’ll gain the ability to build specialized tools for your projects, provide reusable solutions for your team, or even share your work with the broader Vue.js community via [npm](https://www.npmjs.com/). ## Why Take This Course? This course is your ultimate guide to crafting custom Vue.js 3 plugins. You’ll start with the basics, like understanding how plugins work and how to define and install them. Then, you’ll dive into building a **custom tooltip plugin**, exploring essential concepts such as: - Registering components via a plugin. - Defining global properties and instance methods. - Wrapping vanilla JavaScript libraries as a Vue plugin for better DX. - Adding plugin options with sensible defaults. - Using Vue’s `provide/inject` API for providing plugin options to components. Finally, you’ll advance to topics like bundling plugins for distribution, generating type declarations with [TypeScript](https://www.typescriptlang.org/), and publishing your plugin on npm. ## What You’ll Learn In this **Custom Vue.js 3 Plugins course**, you’ll gain hands-on experience in: 1. **Understanding Vue.js Plugin Basics** - Learn what plugins are and how they work. - Define and organize plugin code effectively. 2. **Building a Custom Tooltip Plugin** - Create a Vue tooltip component [using **Tippy.js**.](https://atomiks.github.io/tippyjs/) - Ensure reactivity with lifecycle hooks like `onUpdated` and `onUnmounted`. - Add plugin options and defaults for flexibility. - Define global instance methods for enhanced usability. 3. **Exploring Advanced Plugin Techniques** - Make plugin options typesafe with TypeScript. - Bundle plugins for distribution with Vite. - Test your plugin locally and prepare it for npm publishing. ## Practical Projects to Reinforce Learning This course isn’t just about theory—you’ll apply your knowledge by creating a fully functional tooltip plugin. From registering components to handling plugin options, every lesson builds toward a complete, polished plugin ready for real-world use. By the end of this course, you’ll not only understand how Vue.js plugins work but also have the skills to design, build, and distribute your own custom plugins. Whether you’re looking to enhance your apps or contribute to the Vue.js ecosystem, this course equips you with the tools you need.

Nuxt 3 is the ideal framework for building fast, modern web applications. With features like file-based routing, server-side rendering, and powerful Nuxt Modules, Nuxt.js 3 redefines how developers approach full-stack application development. In this course, **Nuxt 3 Fundamentals**, you’ll gain the skills to harness Nuxt 3’s capabilities and build scalable, high-performance applications with ease. ### What is Nuxt 3? [Nuxt 3](https://nuxt.com/) is a cutting-edge **meta-framework for [Vue.js](https://vuejs.org/)** designed to enhance the development process. It provides a robust, modular architecture and a wide array of built-in features to handle everything from **routing** and **state management** to **data fetching** and **API integration**. Key features of Nuxt 3 include: - **File-based routing** for effortless navigation setup. - **Server-side rendering (SSR)** and **static site generation (SSG)** for enhanced performance and SEO. - **Nuxt Modules** for extending functionality. - **Nuxt Image** to optimize images and improve site performance. Whether you’re working on a small project or a large-scale application, Nuxt 3 offers the tools to create dynamic, efficient, and SEO-friendly web applications. ### What Will You Learn? #### Build Your First Nuxt 3 Project Set up a Nuxt 3 project from scratch, understand its structure, and get familiar with its core concepts like **file-based routing**. #### Simplify Routing Learn how Nuxt 3's **file-based routing system** works. Create dynamic routes, use **NuxtLink** for seamless navigation, and automate route generation to save time. #### Master Async Data Handling Work with `$fetch`, `useAsyncData`, and `useFetch` to efficiently handle async data. Discover how to optimize server-side and client-side data handling for better performance. #### Optimize with Nuxt Image Boost performance by using the **Nuxt Image module** to handle responsive images, lazy loading, and advanced image optimization techniques. #### Explore Advanced Nuxt 3 Features Explore more advanced topics, including: - Designing **custom layouts** for scalable applications. - Leveraging **middleware** to manage navigation and access control. - Using [Pinia](.vuejs.org) and [useState built-in composable](https://nuxt.com/docs/api/composables/use-state) for global state management. - Creating and handling **server API routes** for smooth backend integration. ### Why Take This Course? - **Beginner-friendly yet comprehensive**: Perfect for developers starting with Nuxt or upgrading to version 3. - **Practical and hands-on**: Apply Nuxt 3’s features in real-world scenarios to solidify your skills. - **Stay ahead**: Master the latest updates and tools, including seamless TypeScript integration. - **Learn scalable practices**: Build apps optimized for performance, SEO, and maintainability. ### Who Is This Course For? This course is tailored for: - **Vue.js developers** looking to expand their skills with Nuxt 3. - **Web developers** aiming to build SEO-friendly, scalable, and full-stack applications. - **Nuxt beginners and intermediate developers** eager to explore its advanced features. By the end of this course, you’ll confidently create modern, efficient, and scalable applications with Nuxt 3. ### Prerequisites Before diving into **Nuxt 3 Fundamentals**, it's recommended that you have a basic understanding of **Vue.js**. If you're new to Vue or need a refresher, we recommend starting with one of the following courses: - [Vue.js 3 Fundamentals with the Composition API](https://vueschool.io/courses/vue-js-fundamentals-with-the-composition-api). - If you prefer the **Options API**, we recommend [Vue.js 3 Fundamentals with the Options API](https://vueschool.io/courses/vuejs-3-fundamentals) but Nuxt 3 is really built with the Composition API in mind. You'll also need to have a firm grasp on Vue Components. You can learn all about them in the course: [Vue Component Fundamentals with the Composition API](https://vueschool.io/courses/vue-component-fundamentals-with-the-composition-api) or in the [options API version](https://vueschool.io/courses/vue-js-3-components-fundamentals). These courses will provide you with a solid foundation in Vue.js, ensuring you're well-prepared to tackle the **Nuxt 3** course.

Creating interactive, dynamic applications is a crucial skill for modern web developers. In this course, **Build a Drag and Drop Trello Board with Vue.js & Vue Draggable**, you’ll learn how to build a fully functional, Trello-style task management board using **Vue.js** and the powerful **Vue Draggable** library. From creating tasks to organizing columns and reordering them with drag and drop functionality, this course covers it all. By the end of this course, you’ll have a complete app that allows you to: - Create new tasks and columns. - Reorder tasks and columns with drag-and-drop functionality. - Clone tasks with an Alt (or Option) drag. - Manage tasks efficiently and much more! ### What You'll Learn This course is designed to teach you more than just drag and drop functionality in [Vue.js](https://vuejs.org/). You'll also dive into the workflow of front-end development, gaining hands-on experience with several powerful tools and libraries: - **Vue.js**: Learn how to build dynamic user interfaces with the [Vue.js JavaScript framework](https://vueschool.io/courses/vue-js-fundamentals-with-the-composition-api), including task management features. - **Vue Draggable**: Master drag and drop behavior, from sorting columns to dragging tasks between them with ease using [Vue Draggable](https://github.com/SortableJS/Vue.Draggable). - **Tailwind CSS**: Style your board with [Tailwind CSS](https://tailwindcss.com/), ensuring a responsive and modern UI. - **VueUse**: [Leverage VueUse](https://vueschool.io/courses/vueuse-for-everyone) for advanced behavior and interactivity in your Vue.js app. - **TypeScript**: [Enhance your development process with TypeScript](https://vueschool.io/courses/typescript-with-vue-js-3), ensuring type safety and better code quality. ### Why Take This Course? - **Hands-on learning**: You’ll build a functional app from scratch and gain valuable practical skills. - **Complete Vue.js experience**: Learn to use Vue.js alongside **Vue Draggable** and **Tailwind CSS** to create polished, dynamic UIs. - **Great for all levels**: Whether you're a beginner looking to learn Vue.js or an intermediate developer aiming to improve your front-end skills, this course will enhance your development toolkit. ### Who Is This Course For? This course is ideal for: - **Vue.js developers** looking to expand their skills with **Vue Draggable** and create interactive applications. - **Front-end developers** interested in building dynamic, user-friendly interfaces with **Vue.js** and **Tailwind CSS**. - **Anyone interested in drag and drop functionality** who wants to build applications like Trello-style boards. By the end of this course, you’ll have the confidence to build dynamic, drag-and-drop interfaces using **Vue.js**, **Vue Draggable**, and more.

Ready to level up your testing game? In this course, [Anthony Fu](https://x.com/antfu7), the creator of [**Vitest**](https://vitest.dev/), takes you on a journey through the fastest testing framework out there. Whether you're completely new to testing or want to sharpen your skills, this course is your perfect starting point. Vitest is designed to offer lightning-fast feedback, making it easier than ever to test your code and ship reliable software. Built to integrate seamlessly with [Vite (the ultra-fast build tool)](https://vite.dev/guide/why.html), Vitest brings rapid testing capabilities that can significantly improve your development workflow. We’ll cover everything you need to know—from the basics of unit testing to advanced topics like mocking, spying, and [testing with Vue.js 3](https://vuejs.org/guide/scaling-up/testing). ### Why Unit Testing Matters [Unit testing](https://aws.amazon.com/what-is/unit-testing/) is key to building maintainable and reliable applications. By writing tests for your code, you can catch issues early, boost your confidence when deploying to production, and save time in the long run. [With **Vitest**](https://vueschool.io/articles/vuejs-tutorials/start-testing-with-vitest-beginners-guide/), testing becomes an incredibly fast, enjoyable process that fits naturally into your development workflow. In this course, we’ll teach you how to: - **Master Unit Testing with Vitest**: Understand the importance of unit tests and learn how to write and organize them for your projects. - **Get Started with Test-Driven Development (TDD)**: We’ll guide you through **TDD** as you write a **deep merge function** from scratch. You’ll get comfortable with writing tests first and building your code around them. - **Mocking and Spying Techniques**: Learn how to mock modules, spy on side effects, and mock network requests and timers to ensure your tests cover all use cases. - **Snapshooting with Vitest**: Understand how to use snapshots for testing large or complex objects. Learn to update and manage snapshots easily. - **Test Vue Components**: If you're working with **Vue 3**, we’ll show you how to test [**Vue components**](https://vueschool.io/courses/vue-component-fundamentals-with-the-composition-api), [**Vue composables**](https://vueschool.io/courses/vue-composables), and set up a DOM environment to test your app in real scenarios. ### Key Features of This Course: - **Rapid Feedback with Vitest**: Discover how Vitest’s super-fast feedback loop transforms your testing experience. It’s designed to minimize waiting time, so you can focus on coding. - **Practical, Hands-On Learning**: This course isn’t just theory. You’ll get your hands dirty with real-world examples and learn how to write tests that actually matter. - **Testing Vue 3 with Vitest**: If you’re a Vue developer, you’ll appreciate the deep dive into **testing Vue 3 components** and **Vue composables** using Vitest, making it the perfect fit for anyone building with Vue. ### Why Choose This Course? - **From the Creator of Vitest**: Learn from [**Anthony Fu**](https://antfu.me/), the creator of [Vitest](https://github.com/vitest-dev/vitest), who uses it in production for big projects like [**Vite**](https://vitejs.dev/), [**UnoCSS**](https://unocss.dev/), and [**Slidedev**](https://sli.dev/guide/why). - **Master TDD**: Get hands-on with **Test-Driven Development (TDD)** by writing and testing a deep merge function, giving you a solid foundation for writing tests before code. - **Mocking and Spying with Vitest**: Learn how to mock modules, timers, and network requests—essential tools for creating robust, isolated tests. - **Faster Testing Feedback**: Experience how Vitest’s fast feedback loop makes testing fun and efficient, improving your development speed and confidence. ### Course Prerequisites Before starting this course, it’s helpful to have a basic understanding of **JavaScript**. If you’re new to **JavaScript**, you can get up to speed by watching our **[Modern JavaScript: ES6 and Beyond](https://vueschool.io/courses/modern-javascript-es6-and-beyond)** course. If you haven’t worked with **TypeScript** before, you can also check out **[TypeScript Fundamentals: Learn TypeScript from Scratch](https://vueschool.io/courses/typescript-fundamentals)** to get the basics. This course is perfect if you're looking to: - **Learn Vitest**: Understand Vitest’s core features and how it fits into modern JavaScript and TypeScript workflows. - **Speed Up Your Testing**: Reduce test execution times and get feedback faster than ever before with Vitest’s fast testing environment. - **Test Like a Pro**: Learn best practices for unit testing, mocking, and testing Vue components to ensure your code is clean, reliable, and ready for production. **Start learning Vitest now and build reliable, battle-tested, and scalable apps!**

Forms are the backbone of interactive Vue.js applications, enabling user input for tasks like registrations, feedback, and purchases. In this [FormKit](https://formkit.com/) course, you'll learn how to build dynamic, user-friendly forms with Vue that are both robust and scalable. With FormKit, managing features like real-time validations, submission states, schema-based form generation, and custom styling becomes intuitive and efficient, allowing you to focus on delivering exceptional user experiences. ### Why FormKit? [FormKit](https://formkit.com/) revolutionizes form building in [Vue.js](https://vuejs.org/) by addressing common pain points with a powerful, intuitive component API. It simplifies complex features such as: - **Intuitive API:** Create inputs with a seamless and intuitive component API - **Real-time validation**: Ensure accurate user input with built-in and custom validation rules - **Debouncing**: Optimize performance for real-time form updates. - **Schema-based form generation**: Dynamically create forms from a serializable data format with minimal effort. ### About This Course In this comprehensive course, you’ll learn how to use FormKit to streamline form development in Vue.js. Instead of worrying about repetitive tasks like manual validation handling and custom field components, you'll focus on building forms that meet your project’s unique business requirements. ### What You’ll Learn This course is packed with practical lessons and real-world examples, including: - **Building Simple and Advanced Forms**: From basic form fields to complex schema-based forms. - **Validation Mastery**: Handle input validation with custom rules, hints, and error messages. - **Customization and Theming**: Tailor forms to your project’s style using props, plugins, and Tailwind CSS themes. - **Dynamic and Pro Features**: Unlock advanced functionality with FormKit Pro Inputs and integrations like Zod. ### Why Take This Course? This course is ideal for developers at any level who want to create powerful, scalable forms in Vue.js. Whether you’re building forms for a simple website or a complex application, FormKit’s features will save you time and effort while delivering exceptional results.

Vue.js has been a favorite among Laravel developers since 2015, when Laravel creator Taylor Otwell tweeted: "Learning @vuejs because it looks easy and has a pretty website." Over the years, the synergy between Laravel and Vue has powered countless dynamic web applications, and with Nuxt.js, that partnership is even more versatile. Combining Laravel with Vue.js and Nuxt.js gives developers the ultimate toolkit for creating robust backends and seamless front-ends. Whether you’re building a small feature or a full-scale Single Page Application (SPA), this stack empowers you to deliver modern, high-performing web apps. ### Why Use Laravel, Vue.js, and Nuxt Together? The [flexibility of Laravel](https://laravel.com/), the [reactive power of Vue.js](https://vuejs.org/) and the [Server-Side Rendering (SSR) magic of Nuxt](https://nuxt.com/docs/getting-started/introduction) make them a match made in developer heaven. There are [multiple ways to integrate Vue.js with Laravel](https://vueschool.io/articles/vuejs-tutorials/the-ultimate-guide-for-using-vue-js-with-laravel/): - **Sprinkle Vue.js** into your [Laravel Blade templates](https://laravel.com/docs/11.x/blade) for interactive components. - Use [**Inertia.js**](https://inertiajs.com/) to create modern, single-page apps while sticking with server-side routing. - Build **standalone Vue applications** that connect to a Laravel REST API as their backend. In this course, we focus on the third approach, diving into how you can use Laravel as the backend for both Vue and Nuxt apps. Together, we’ll build a full-stack application, combining the backend power of Laravel 10 with the modern front-end capabilities of Vue.js 3 and Nuxt 3. ### What You’ll Learn This course is packed with practical lessons and real-world techniques. Here’s what you’ll master: - **Setting Up Your Environment**: Get Laravel, Vue, and Nuxt configured and working seamlessly together. - **Authentication**: Implement secure user authentication with Laravel Sanctum and Fortify, handling everything from registration to logout. - **REST API Integration**: Use Axios to consume a Laravel REST API from your Vue and Nuxt front-ends. Handle pagination, data fetching, and error management with ease. - **Form Validation**: Learn to manage validation errors manually or with tools like FormKit. Simplify your workflow with reusable utilities. - **CRUD Operations**: Build essential features like creating, reading, updating, and deleting resources. Dive into advanced techniques like filtering, sorting, and debouncing search inputs to deliver a polished user experience. - **Server-Side Rendering (SSR) with Nuxt**: Harness the power of Nuxt.js to render pages on the server for faster load times and better SEO. - **Reusable Composables**: Write scalable, reusable logic using Vue’s Composition API to streamline your codebase. - **Middleware and Axios Interceptors**: Protect your app routes, handle 401 errors gracefully, and manage API interactions effectively. ### Who Is This Course For? Whether you’re new to Laravel, an experienced full-stack dev, or a front-end developer collaborating with Laravel teams, this course has something for you. It’s ideal for: - **Full-stack developers**: Build modern, full-stack applications with Laravel, Vue.js, and Nuxt.js. - **Front-end developers**: Learn how to connect Vue and Nuxt front-ends to a Laravel backend and collaborate seamlessly with back-end teams. - **Laravel beginners**: Get a high-level overview of how Laravel powers REST APIs and works with front-end frameworks like Vue and Nuxt. ### Why Take This Course? This course is a step-by-step guide where we’ll work together to build a real-world application. You’ll not only write code but also understand *why* certain decisions are made. What makes this course stand out: - **Hands-On Approach**: Build a fully functional Laravel backend and integrate it with Vue and Nuxt front-ends. - **Real-World Skills**: Learn to solve common development challenges, from authentication to data management and beyond. - **Reusable Knowledge**: The techniques you’ll learn—like working with REST APIs, handling CRUD operations, and setting up SSR with Nuxt—can be applied to countless future projects. By the end of the course, you’ll have the skills to build full-stack applications that are secure, performant, and a joy to maintain. **If you’re ready to combine the power of Laravel, Vue.js, and Nuxt.js to build something amazing, let’s get started!**

**Mistakes are inevitable, but repeating them doesn't have to be.** In this course, we'll uncover the most frequent mistakes made by Vue.js developers and gain practical solutions to avoid them, helping you build cleaner and more efficient Vue applications. [Vue.js](https://vuejs.org/) offers incredible flexibility and power, but that can sometimes lead to common pitfalls, especially for beginners or developers transitioning from other frameworks. This course is your guide to mastering Vue by learning from real-world mistakes and implementing best practices. ### What You'll Learn - **Master Key Directives:** Understand why `v-for` requires a `key` and how to use it to prevent rendering issues. - **Solve Prop Drilling Challenges:** Learn techniques to simplify data flow and improve component communication. - **Handle Reactive State Like a Pro:** Avoid common traps when managing reactive data and watching arrays. - **Prevent Common Bugs:** Stop unintentional prop mutations and other issues before they happen. - **Streamline Event Listener Management:** Learn to clean up event listeners to ensure smooth, bug-free applications. - **Enhance Reactivity Understanding:** Properly handle non-reactive dependencies and avoid update issues. - **Adopt TypeScript Best Practices:** Leverage TypeScript to catch errors early and improve code quality. - **Avoid Security Risks:** Safely use `v-html` without exposing your application to vulnerabilities. ### Why Take This Course? This course is perfect for: - **Beginners:** Avoid costly mistakes as you learn the ins and outs of Vue.js. - **Intermediate Developers:** Gain insights to fine-tune your skills and write more maintainable code. - **Team Leads:** Establish consistent, production-ready patterns for your projects. By the end of this course, you'll have a deep understanding of common Vue.js mistakes and the confidence to avoid them, enabling you to write efficient, secure, and scalable code. Start your journey to mastering Vue.js today and build applications that stand the test of time.

Data visualization is at the heart of effective communication in today's data-driven world. Whether you're tracking analytics, monitoring performance, or presenting insights, charts turn raw data into meaningful visuals. For Vue.js 3 developers, incorporating interactive charts into applications enhances user engagement and decision-making. In this course, you’ll learn to build stunning, interactive charts in Vue.js 3 using the popular ChartJS library. This course is designed to help you create professional data visualizations for dashboards, reports, and more. ### What You’ll Learn By the end of this course, you’ll have mastered: - **Getting Started with ChartJS in Vue.js 3**: Set up your first chart with ease. - **Dynamic and Async Data Handling**: Build responsive charts that update in real-time. - **Customizing Chart Types**: Create bar, line, and pie charts tailored to your needs. - **ChartJS Plugins**: Extend functionality and register ChartJS dependencies. - **Styling and Defaults**: Fine-tune your charts for a polished, professional look. ### Why Choose This Course? This course is perfect for developers of all experience levels. Whether you're new to data visualization or looking to enhance your Vue.js 3 skills, you’ll gain practical knowledge to integrate robust, interactive charts into any application.

AI is revolutionizing how we build software, making it easier than ever to create intelligent, interactive applications. With OpenAI’s Chat Completions API (GPT-3.5 Turbo and GPT-4) and the power of Vue.js, you can build apps that chat naturally, generate personalized responses, and even automate tasks like creating social media posts. In this course, you’ll gain hands-on experience building cutting-edge AI-powered apps, from a ChatGPT clone to a custom support chat bot and a social media post generator. ### Why Use AI in Your Applications? [Artificial intelligence](https://cloud.google.com/learn/what-is-artificial-intelligence) isn’t just for massive tech companies anymore — it’s for everyone. AI can make your apps smarter, more engaging, and more user-friendly. From automating mundane tasks to delivering personalized user experiences, AI lets you build applications that users love to interact with. With [OpenAI’s Chat](https://chatgpt.com/) Completions API, integrating these capabilities into your [Vue](https://vuejs.org/guide/introduction.html) projects is straightforward and highly rewarding. ### What is ChatGPT and How Can It Help You? [ChatGPT (powered by GPT-3.5 Turbo and GPT-4)](https://openai.com/chatgpt/overview/) is a state-of-the-art language model capable of understanding and generating human-like text. Whether it’s answering questions, assisting users, or generating creative content, ChatGPT makes AI interaction intuitive and powerful. In this course, you’ll learn how to tap into the AI model programmatically to enhance your Vue.js applications with magical AI functionality. ### Why Combine Vue.js with GPT? [Vue.js is known for its simplicity](https://vueschool.io/articles/vuejs-tutorials/why-vue-js-is-a-great-starting-point-for-new-coders/), flexibility, and developer-friendly ecosystem—making it the perfect choice to build [AI-powered apps](https://vueschool.io/articles/vuejs-tutorials/unlocking-the-power-of-ai-in-your-vue-coding-workflow/). When you pair Vue with Generative Pre-trained Transformers (GPT), you get the best of both worlds: Vue’s fast, reactive UI and [GPT’s intelligent backend capabilities](https://platform.openai.com/docs/quickstart). Together, they enable you to create dynamic, interactive apps that feel seamless and modern. ### What You’ll Build This course is all about learning by doing. You’ll build three exciting projects, each designed to teach you key concepts while providing hands-on experience: - **ChatGPT Clone**: Build a fully functional chatbot using Vue.js and Chat GPT. Learn how to handle API requests, secure your tokens, and train your AI with conversational context. - **Custom Support Chat Bot**: Train your Chat bot to handle real-world support scenarios, delivering fast and accurate responses. - **Social Media Post Generator**: Automate social media content creation. Train the AI to generate engaging posts from article URLs, saving time and effort. ### What You’ll Learn By taking this course, you’ll master key skills for integrating AI into Vue projects: - Setting up and securing API endpoints in [Nuxt](https://nuxt.com/docs/getting-started/introduction) for smooth backend communication. - Creating responsive and interactive UI components with Vue.js. - Training your AI bot to respond intelligently with contextual awareness. - Leveraging Markdown, placeholders, and other advanced techniques to customize AI responses. - Exploring creative uses of AI, like social media automation, and adapting those ideas to your projects. ### Using OpenAI Node Client v3 This course uses [OpenAI SDK for TypeScript and JavaScript](https://github.com/openai/openai-node) v3 as it was the latest stable version during development. The latest version is v4, which includes several syntax changes but all the concepts are the same. We recommend installing v3 (`npm install openai^3`) to best follow along but you are also welcome to update to v4, just know you will have to make small adjustments. ### Migrating to OpenAI Node Client v4 To help you stay ahead, we’ve included a bonus lesson on migrating from OpenAI Node Client v3 to v4. In this lesson, you’ll explore the key syntax differences and learn how to update your projects. With this added guidance, you can confidently transition your AI apps to the latest version while keeping your skills sharp and projects current. ### Why Take This Course? AI is no longer a luxury — it’s becoming a necessity for modern apps. This course demystifies the process of integrating AI with Vue.js, enabling you to: - Build smarter applications with less effort. - Impress clients and employers with cutting-edge AI features. - Stay ahead in the rapidly evolving tech landscape. With practical projects, insightful tips, and guidance from experts, you’ll walk away with the confidence to add AI to your development toolkit.

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.

Animations aren’t just for decoration—they’re a key part of creating engaging and intuitive user experiences. A well-placed transition or animation can guide users, improve interactions, and add a layer of polish to your web applications. In this course, you’ll dive deep into Vue.js robust support for transitions and animations. Learn how to use built-in Vue features to create custom animation effects, and discover third-party plugins to make your animations even more dynamic and versatile. ### What Are Vue.js Transitions and Animations? [Vue.js](https://vuejs.org/) makes it incredibly simple to add smooth, visually pleasing animations to your apps. With the `Transition` and `TransitionGroup` components, you can animate elements as they enter, leave, or change state in the DOM. Beyond built-in capabilities, Vue’s rich ecosystem includes plugins like [AutoAnimate](https://auto-animate.formkit.com/) and [@vueuse/motion](https://motion.vueuse.org/), which expand your animation toolkit with minimal setup. ### Why Vue.js Transitions Matter Vue’s animation system is beginner-friendly yet powerful enough for advanced use cases. Transition is helpful for many reasons: - **Engage Users:** Keep your audience hooked with polished visual effects. - **Improve Navigation:** Guide users intuitively through your app. - **Add Professionalism:** Elevate your designs with subtle, thoughtful animations. ### Why Take This Course? Whether you’re building sleek single-page applications or interactive components, this course will help you: - **Master Native Features:** Use Vue’s built-in capabilities to create professional-grade animations. - **Enhance User Experience:** Add subtle transitions that improve navigation and usability. - **Level Up with Plugins:** Explore third-party tools to create animations with minimal effort. If you’ve ever felt your apps could use a touch of elegance, this course will help you deliver! ### What You’ll Learn In this course, you’ll learn: **1. Built-in Transition and Animation Support** Vue.js offers a powerful system for animating elements. Learn how to: - Use native `Transition` components. - Customize transitions with JavaScript hooks. - Combine CSS frameworks like Tailwind for styling your animations. - Use the native `TransitionGroup` component for lists - Build advanced effects like staggered list transitions and reusable components. **2. Stellar Vue Plugins for Transitions and Animations** Take your animations to the next level with plugins. You’ll discover: - **AutoAnimate:** Add transitions with zero configuration. - **@vueuse/motion:** Animate on scroll and build interactive effects. - How to combine libraries like [Animate.css](https://animate.style/) and [Greensock](https://gsap.com/) with Vue for stunning visuals. ### Ready to Animate Like a Pro? By the end of this course, you’ll not only have the technical skills to implement transitions and animations but also the creative confidence to make your apps stand out.

Deskree is a backend development solution for creating enterprise-grade APIs, databases, auth, integrations and more in minutes. In this course, learn how to build a simple e-learning platform that offers video courses with this easy-to-use BaaS.

Looking to build a fast and efficient content site? This course teaches you how to use **Astro** and **Vue.js** together to create high-performance content sites, such as blogs, documentation websites, and landing pages. By combining **Astro's zero-JS approach** with the interactive power of **Vue.js**, you can build a lightning-fast site without compromising on user experience. ### What is Astro? [**Astro** is a modern framework](https://astro.build/) designed to make building content-driven websites fast and easy. Unlike traditional front-end frameworks that send JavaScript to the browser for every page, **Astro** only sends JavaScript when needed. This leads to faster load times, better performance, and an enhanced developer experience. With Astro, you can use a variety of JavaScript frameworks like [**React**](https://react.dev/), [**Vue**](https://vuejs.org/), and [**Svelte**](https://svelte.dev/), while Astro ensures your site stays lightning fast. ### Why Use Vue with Astro? Using **Vue.js** with **Astro** allows you to have the best of both worlds: the power of a full JavaScript framework with the speed and performance of **Astro's islands architecture**. Vue enables you to create interactive components, while Astro optimizes your site by sending JavaScript only where necessary. This combination ensures that your content is fast, responsive, and rich with just the right amount of interactivity. ### What You’ll Learn in This Course In this **Content Sites with Astro and Vue.js** course, you'll dive into building your very own blog, starting from scratch and going all the way to deployment. Here’s what you’ll learn: - **Getting Started with Astro**: Learn the basics of **Astro**, including how to set up your project and structure your content. - **Using Vue with Astro**: Integrate **Vue.js** components within your **Astro** project, making it easy to add interactivity without sacrificing performance. - **Working with Astro Content Collections**: Understand how to manage content with **Astro collections**, allowing you to organize and fetch data for your site efficiently. - **Deploying Your Site**: Finally, learn how to deploy your **Astro + Vue-powered blog** to platforms like **Netlify** for easy hosting. ### Why Take This Course? This course is perfect for web developers looking to build fast, modern content sites with **Astro** and **Vue.js**. Whether you're creating a blog, a documentation site, or anything in between, **Astro** gives you the performance benefits you need, while **Vue** makes interactivity a breeze. - **Faster Performance**: Learn how **Astro's architecture** minimizes JavaScript for faster load times. - **Developer-Friendly**: Enjoy a smooth and intuitive development experience with **Vue.js** and **Astro**. - **Real-World Projects**: Build a fully functional blog, from start to finish, and deploy it online. --- By the end of this course, you'll be ready to build and deploy your own high-performance content sites using **Astro** and **Vue.js**!

Creating a polished, professional user interface is essential for modern web applications. In this course on **Vuetify** and **Vue.js**, you’ll learn how to build beautiful, functional apps in no time using Vuetify, the leading Material Design UI library for Vue.js. With over 80 pre-designed components and a flexible design system, Vuetify allows you to focus on delivering exceptional user experiences without reinventing the wheel. ### About Vuetify [Vuetify](https://vuetifyjs.com/en/introduction/why-vuetify/#what-is-vuetify3f) is a comprehensive UI library built around [Google’s Material Design specification](https://m3.material.io/). It includes a wide range of components such as buttons, tables, dialogs, and forms—all designed with accessibility and responsiveness in mind. Its flexibility allows you to: - Customize every aspect of the design using **SaaS variables**. - Set global defaults for consistent component styling. - Easily integrate with your existing [Vue.js projects](https://vuejs.org/guide/introduction.html#what-is-vue). ### What This Course Offers In this course, you’ll learn how to unlock the full potential of Vuetify to build stunning **Vue.js applications**. Through hands-on lessons, you’ll explore: - Setting up Vuetify and creating responsive layouts. - Crafting professional navigation bars, drawers, and user menus. - Building forms with validation, feedback components, and input fields. - Enhancing your app with advanced features like data tables, CSS utilities, and directives. ### Why Take This Course? This course is perfect for developers who want to: - Save time by leveraging Vuetify’s ready-made components. - Deliver consistent, accessible, and visually appealing apps. - Gain a deeper understanding of how to quickly implement Material Design in Vue.js projects. --- By the end of this course, you’ll have the skills and confidence to create **beautiful Vue.js apps** with Vuetify that stand out and delight users.

Looking to level up your web design skills? **Tailwind CSS** is the tool you need to create stunning, responsive user interfaces with ease. Say goodbye to rigid, pre-designed components and hello to total design flexibility. In this **Tailwind CSS Fundamentals** course, you’ll master the power of **Tailwind** and learn how to quickly craft beautiful UIs that scale seamlessly across devices. ### What is Tailwind CSS? [**Tailwind CSS**](https://tailwindcss.com/) is a utility-first CSS framework that allows developers to style their HTML directly using utility classes. Unlike other frameworks that limit you with pre-built components, **Tailwind** gives you full control over your design. You can build custom, responsive layouts without sacrificing flexibility, speed, or performance. In this course, we’ll dive deep into why **Tailwind CSS** is one of the most popular tools in the web development community, especially for [**Vue.js**](https://vuejs.org/) and [**Nuxt**](https://nuxt.com/) apps. By the end, you'll be able to create fast, responsive UIs that match your unique design vision. ### What You’ll Learn This course is designed to take you from beginner to pro, covering all the essential concepts and tools you need to succeed with **Tailwind CSS**. Here’s what you’ll get: **1. Setting Up Tailwind CSS in Vue.js and Nuxt** - Install and configure **Tailwind CSS** in your **Vue.js** and **Nuxt** projects. - Learn how to integrate **Tailwind** into your workflow and enhance your development process. **2. Mastering Utility Classes for Custom Designs** - Understand how to leverage **utility classes** for fast and flexible styling. - Build custom designs without the constraints of pre-made components. **3. Responsive Design with Tailwind CSS** - Use **Tailwind's responsive utilities** to make your designs look great on any screen size. - Build layouts that adapt smoothly across devices, from mobile phones to desktops. **4. Advanced Layout Techniques: Flexbox and Grid** - Explore **Flexbox** and **Grid** to create complex, responsive layouts. - Master the art of combining these techniques for powerful design structures. **5. Customizing Tailwind CSS for Your Projects** - Learn how to personalize **Tailwind CSS** to fit your project’s unique style. - Use custom tailwind configurations to adjust the framework to your design needs. **6. Enhancing Tailwind with Plugins** - Extend the capabilities of **Tailwind** by adding useful **plugins** like the forms and typography plugins - Add custom utilities and components to supercharge your development process. ### Hands-On Projects: Apply What You Learn This course isn’t just about theory—it's all about hands-on learning. You’ll work on real-world projects to sharpen your skills, including: - **Pricing Table Challenge**: Build a responsive pricing table with **Tailwind** and **Vue**. - **Navbar Component**: Create a sleek, responsive navigation bar using **Tailwind**. - **Shopping Cart Checkout Form**: Design a functional checkout form for an e-commerce app with **Tailwind**. Each challenge is followed by a solution walkthrough, so you’ll get valuable insights into refining your design and development process. ### Why Take This Course? - **Flexibility and Speed**: Tailwind’s utility-first approach helps you quickly prototype and build custom UIs. - **Customizable and Maintainable**: With **Tailwind CSS**, you can create designs that are fully tailored to your needs. - **Mobile-Responsive**: Ensure your apps look great on any device with **Tailwind’s** responsive features. - **Hands-On Experience**: Work through practical projects that mirror real-world challenges. --- By the end of this course, you'll be equipped with the knowledge and skills to create fast, beautiful, and fully responsive UIs for any project using **Tailwind CSS**.

Imagine writing your code backwards—first with tests, then with the code to pass them. That’s the magic of Test-Driven Development (TDD)! In this course, you’ll embrace this powerful approach while building a Wordle clone from scratch using Vue.js 3 and the Composition API. You'll learn how TDD helps you write clean, maintainable code, and discover the Red-Green-Refactor cycle, all while having fun crafting a game. Whether you’re a newbie or a TDD pro, get ready for a hands-on journey to level up your testing and Vue skills in the most exciting way! ### Why Take This Course? In this course, you’ll dive deep into [Test-Driven Development (TDD)](https://en.wikipedia.org/wiki/Test-driven_development) while working hands-on with [**Vue.js 3**](https://vuejs.org/) and its dynamic [**Composition API**](https://vueschool.io/courses/vue-js-fundamentals-with-the-composition-api). Along the way, we’ll build a clone of [the popular game **Wordle**](https://www.nytimes.com/games/wordle/index.html), step by step. This course is designed to teach you not only the theory but also how to apply it practically, enabling you to write tests that: - Act as clear guidelines for your development goals. - Protect your existing features. - Encourage writing clean, modular, and maintainable code. That’s not all! In this course, you’ll also: 1. **Strengthen Your Vue.js Skills:** - Gain mastery of the Vue 3 Composition API. - Learn how to use **Vitest** and **Vue Test Utils** effectively. 2. **Master the TDD Mindset:** - Understand and apply the **Red-Green-Refactor** cycle. - Learn how tests can guide development and reduce bugs. 3. **Practical Application:** - Build a fully functional Wordle clone from scratch. - Practice crafting tests that act as documentation and protect against regressions. 4. **Advanced Testing Techniques:** - Work with mocks, spies, and test generators. - Handle visual regression testing to ensure consistent user interfaces. ### What You’ll Learn - Understand the **Red-Green-Refactor** loop and its importance. - Craft resilient tests that guide and protect your code. - Use test generators for efficient and reusable test creation. - Master mocks and spies for more complex testing scenarios. - Develop a testing mindset for cleaner, more maintainable code. - Refactor your code to improve clarity and performance. - Address regressions effectively with targeted tests. This course also covers strategies for creating flexible tests, enabling you to adapt and change your code confidently. ### Perfect for All Skill Levels While a basic understanding of **Vue Test Utils** is recommended, this course is accessible to developers of all skill levels. Whether you’re: - A Vue.js enthusiast eager to dive into testing. - A TDD advocate refining your approach. - A developer keen to enhance your software development expertise. This course provides a comprehensive foundation in TDD with a strong focus on Vue.js development. ### Let’s Build Together! By the end of this course, you’ll not only understand the fundamentals of TDD but also have the skills to apply them in real-world scenarios. Building the Wordle clone will give you a hands-on opportunity to practice and refine these concepts, leaving you ready to tackle testing challenges in your own projects.

Creating your own Vue component library is a game-changer. It gives you the flexibility to design UI components tailored to your needs and the opportunity to contribute something valuable to the developer community. With this course, you’ll learn how to combine the simplicity of Daisy UI with Vue’s reactivity to create a fully functional, reusable, and distributable UI library. ### What is Daisy UI? [Daisy UI is a lightweight CSS framework](https://daisyui.com/) built on [Tailwind CSS](https://tailwindcss.com/), offering a utility-first approach to pre-styled components. While Daisy UI simplifies styling with its clean design system, it’s CSS-only, meaning you need to pair it with a framework like [Vue.js](https://vuejs.org/) for advanced interactivity. This makes it perfect for building custom Vue component libraries where you can layer powerful JavaScript functionality on top of elegant, pre-styled designs. ### Why Build a Custom Vue Component Library? Popular Vue component libraries like [Vuetify](https://vuetifyjs.com/en/introduction/why-vuetify/#what-is-vuetify3f) and [PrimeVue](https://primevue.org/introduction/) are feature-packed, but they may not always fit your specific needs. A custom library allows you to: - Tailor UI components to match your design vision. - Keep your applications lightweight by including only what you need. - Create consistent, reusable components that speed up development. - Gain experience with advanced tools like histoire and monorepos. ### What You’ll Learn in This Course This course walks you through every step of building a robust Vue component library, from planning to deployment. Here's what you'll gain: - **Design Principles and Reusability:** Discover what makes a great component library and build foundational components like buttons and avatars. - **Using Daisy UI with Vue:** Leverage Daisy UI's pre-styled elements and wrap them in Vue components to create a powerful library. - [**Histoire](https://histoire.dev/) for Developing Components with Stories:** The storybook alternative built specifically for Vue makes previewing various components states a breeze. - [**Hygen](https://www.hygen.io/) for Bootstrapping Consistent Boilerplate:** Learn how to bootstrap the starting place for new components along with their stories, tests, and docs in no time. - **Version Control and Documentation:** Learn how to version your library using [ChangeSets](https://github.com/changesets/changesets) and document components for easy adoption. - **Component Library Theming:** Build on top of Daisy-UI’s theme system to make your component library more flexible. - **Distributing Your Library:** Package your library for [npm](https://www.npmjs.com/) and integrate it into other projects, including [Nuxt apps](https://nuxt.com/). ### Course Highlights Throughout the course, you’ll tackle practical challenges that make learning fun and hands-on. Here’s what you’ll work on: - **Button Component:** Build and document a button component with consistent naming conventions. - **Accordion Component:** Create an interactive accordion using [Vue’s provide/inject pattern](https://vueschool.io/articles/vuejs-tutorials/tightly-coupled-components-vue-components-with-provide-inject/). - **Advanced Components:** Develop alerts, ratings, and context menus by combining Daisy UI styles with Vue and/or [Radix Vue’s](https://www.radix-vue.com/) advanced features. - **Publishing to npm:** Package and publish your library for the world to use. ### Why Take This Course? This course isn’t just about building components—it’s about mastering Vue and Daisy UI to craft professional, scalable UI libraries. By the end, you’ll have the skills to: - Create intuitive, reusable UI components for any Vue project. - Build lightweight, custom libraries that integrate seamlessly with modern development workflows. - Share your work with the community through npm and GitHub. Whether you’re building a tailored solution for your projects or contributing a new library to the Vue.js ecosystem, this course equips you with everything you need to succeed.

Explore the world of Nuxt Modules in this comprehensive course designed for Nuxt.js developers of all levels. From seamless installation to crafting custom modules, you'll unlock the full potential of Nuxt.js, Vue.js, and JavaScript. Learn how to enhance your Nuxt apps with custom functionality, optimize your workflow, and take advantage of advanced features like **Nuxt Kit** and **Nitro**. ### What You'll Learn: - **Introduction to Nuxt Modules**: Understand the core concepts of Nuxt Modules, including installation, configuration, and module types. Get a solid foundation to build on. - **Explore the Nuxt Ecosystem**: Dive into the Nuxt community and ecosystem. Learn best practices for using modules and how to contribute to the growing collection of Nuxt tools. - **Creating Custom Nuxt Modules**: Master the process of building custom modules to extend Nuxt’s capabilities. Learn how to leverage Nuxt’s API, lifecycle hooks, and configuration options. - **Integrating with Nitro**: Discover how Nuxt Modules integrate with Nitro for server-side rendering, optimizing performance, and building scalable web applications. - **Using Nuxt Kit to Supercharge Your Modules**: Learn how to utilize **Nuxt Kit** to optimize your development process, including automating tasks, extending Vite & Webpack configurations, and more. - **Hands-on Examples**: Gain practical, real-world experience by working on example projects that demonstrate how to solve common challenges with Nuxt Modules. ### Why This Course? - **Comprehensive Learning Path**: From beginner to advanced techniques, this course offers step-by-step guidance to mastering Nuxt Modules. - **Practical Skills for Real Projects**: Build functional, real-world projects that you can apply directly to your work. - **In-depth Exploration of Nuxt and Nitro**: Unlock the full potential of Nuxt, including integrations with Nitro and other advanced features. ### Who Should Take This Course? - **Developers** looking to enhance their Nuxt.js skills. - **Vue.js enthusiasts** who want to dive deeper into Nuxt’s modular capabilities. - **Web developers** aiming to optimize their app architecture and performance using Nuxt Modules. ### By the End of This Course, You Will Be Able To: - Create and configure custom Nuxt Modules to extend app functionality. - Contribute to the Nuxt ecosystem by building your own modules. - Integrate Nuxt Modules with Nitro to unlock advanced features. - Apply DDD principles to create scalable and maintainable applications. **Start Learning Nuxt Modules Now and Become a Professional Nuxt Modules Author!**

Learn everything you need to know to get started with **Vue components** and the composition API. Components are the building blocks of any Vue.js application, allowing you to encapsulate and reuse functionality efficiently. Components combine HTML, JavaScript, and CSS, giving you the power to create modular, maintainable, and scalable applications. 📝 NOTE: If you are looking to write components with the Options API, [we've got a course for that too](https://vueschool.io/courses/vue-js-3-components-fundamentals) but we recommend using the Composition API. ### Why Components Matter in Vue.js In [Vue.js](https://vuejs.org/), components are like custom HTML elements (e.g., `<p>`, `<button>`, `<header>`), but with much more power. They let you define specific pieces of functionality that can be easily reused across your application, enhancing maintainability and scalability. After completing this course, you'll be confident in: - Understanding how **Vue.js components** work and why they are essential in modern web development. - **Communication between components** using **props** and **custom events** to pass data and trigger actions. - The difference between **global** and **local component registration**, and when to use each. - **Lifecycle hooks** in Vue.js components and how to manage component states over time. - **Component composition**, including working with **nested components** and **slots** for flexible layouts. - Following **best practices** for Vue.js components, while avoiding common pitfalls. We've also included practical exercises to help reinforce your learning: ### Vue.js Component Exercises: - **Build a GitHub user profile component**: Learn how to fetch and display data dynamically in your component. - **Create a Notification Message component**: Practice creating a reusable component with props and events. ### Prerequisites You should have a basic understanding of **Vue.js** to get the most out of this course. If you're new to Vue.js or need a refresher, we recommend checking out our course: [Vue.js 3 Fundamentals with the Composition API](https://vueschool.io/courses/vue-js-fundamentals-with-the-composition-api). By the end of this course, you'll be ready to build modular, efficient, and maintainable Vue.js applications using the Composition API. **Start mastering Vue.js components today and take your web development skills to the next level!**

Ready to level up your routing game in Vue.js? Imagine a world where you don't have to manually map every route and component — unplugin-vue-router makes it happen! In this course, we’re diving into the magic of file-based routing, just like Nuxt.js, but for vanilla Vue. You’ll set up routes effortlessly, enjoy type-safe routing (hello, TypeScript!), and experience the joy of autocompletion and intellisense. Whether you're a Vue Router newbie or a Vue pro, get ready to save time, cut out errors, and enjoy a smoother dev experience! ### **What is unplugin-vue-router?** In [Vue.js](https://vuejs.org/) development, routing is a core feature for building Single Page Apps (SPAs) and linking your pages, but managing routes manually can become a headache—especially as your project grows. That's where [unplugin-vue-router](https://github.com/posva/unplugin-vue-router) comes in! This [Vite plugin](https://vite.dev/plugins/) allows you to implement **file-based routing** in your Vue project, much like how [Nuxt.js handles routes](https://nuxt.com/docs/getting-started/routing). With it, you won’t need to worry about manually mapping each component to a route. Instead, it auto-generates routes based on your file structure, saving you time and eliminating tedious errors. This plugin not only speeds up development but also provides **type-safe routes**—a lifesaver for [TypeScript](https://www.typescriptlang.org/) users, ensuring smooth, error-free navigation. ### **What You’ll Learn** In this course, we’ll walk through everything you need to get unplugin-vue-router up and running in your Vue project. Here’s a sneak peek at what you’ll be mastering: - **Setting up unplugin-vue-router** in a fresh Vue.js project. - Creating **file-based routes** and exploring the different syntaxes for optimal routing. - Setting up **nested routes**—with and without layouts. - Handling **dynamic routes** to cater to more flexible, real-time navigation. - Using **generated route types** to boost your TypeScript experience, making your routes type-safe and easy to manage. - Implementing **navigation guards**, setting **route meta**, and using **definePage** for better control over your routing system. - Mastering **lazy loading routes** to improve app performance and efficiency. --- By the end of this course, you’ll be a routing expert, with the ability to implement seamless, type-safe, and efficient routing systems for your Vue apps. Plus, you’ll have learned valuable skills to enhance both the speed and maintainability of your projects.

The **Vue.js Master Class** is our flagship course and the ultimate destination for anyone looking to **[learn Vue.js](https://vuejs.org/guide/introduction.html)** and master the art of building real-world applications with Vue. This **2024 Edition** is a complete rewrite, showcasing the **latest official Vue tools** and the most popular community technologies. If you’re aiming for **Vue mastery**, this course has everything you need to take your Vue.js skills to the next level. We’ve packed so much value into this course that we **couldn’t possibly list it all here**. For the full breakdown, check out [the complete course details here](https://vueschool.io/the-vuejs-3-master-class). ### Why Take the Vue.js Master Class? This course is hands-on, practical, and designed to teach you Vue.js by building a feature-rich **product management app**. Along the way, you’ll learn: - **Vue.js best practices** - **Modern JavaScript (ES2023/ESNext)** - Cutting-edge technologies used in real-world Vue projects By the end, you’ll have the skills to **land Vue.js jobs**, contribute to projects with confidence, or supercharge your own applications. ### Core Topics Covered The Vue.js Master Class teaches you how to **build, manage, and scale modern Vue apps**. Here's a preview of what you'll learn: #### Vue.js Fundamentals - Setting up Vue 3 projects with **Vite** - Integrating [VueDevTools](https://devtools.vuejs.org/) - Routing with [Vue Router](https://router.vuejs.org/) and File-Based Routing using `unplugin-vue-router` - Designing components and composables with the [Composition API](https://vuejs.org/guide/extras/composition-api-faq.html) - Managing global state efficiently in Vue.js with [Pinia](https://pinia.vuejs.org/) - Leveraging **ESLint and Prettier** for code consistency ([read about it here](https://vueschool.io/articles/vuejs-tutorials/eslint-and-prettier-with-vite-and-vue-js-3/)) #### Advanced Features - User authentication with [Supabase](https://supabase.com/docs/guides/auth) and Vue - Implementing **user permissions** and [route guards](https://router.vuejs.org/guide/advanced/navigation-guards.html) - Database migrations and seeding for real-world applications - Consuming and integrating **REST APIs** - Building a scalable application architecture with error handling #### Practical Features for Real-World Vue Apps The course also includes step-by-step tutorials for implementing essential features like: - [Using TypeScript with Vue](https://vueschool.io/courses/typescript-with-vue-js-3) composables, stores, utilities, components and more. - Crafting reusable Vue components and composales. - Managing global state with Vue composables. - **Modern UI components** with [TailwindCSS](https://tailwindcss.com/) and [ShadCN Vue](https://www.shadcn-vue.com/docs/introduction.html) - Forms and validation using [Formkit](https://formkit.com/) - Implementing CRUD operations (Create, read, update, and delete) with Vue and Supabase. - Enabling **dark mode** - Auto-saving edits for inline content - Creating custom Pinia loaders with client-side caching ### Who Is This Course For? This course is for developers who already have a basic understanding of: - JavaScript - HTML - CSS - The fundamentals of Vue.js (especially the [Vue Composition API](https://vuejs.org/guide/extras/composition-api-faq.html)) If you're new to Vue.js, start with our free [Vue.js Fundamentals with the Composition API](https://vueschool.io/courses/vue-js-fundamentals-with-the-composition-api) and [Vue Component Fundamentals with the Composition API](https://vueschool.io/courses/vue-component-fundamentals-with-the-composition-api) courses to build a solid foundation. ### Unlock Vue Mastery Today Join thousands of developers who have transformed their careers with our Vue.js Master Class. Whether you're aiming to: - Land your dream Vue.js job - Build professional Vue applications - Master modern frontend development - Understand Vue.js best practices This course has everything you need to become a Vue.js expert! _Note: Course content is regularly updated to keep pace with Vue.js ecosystem changes and best practices. All tutorials use Vue 3 and the latest official Vue tools._

Looking to add real-time data features to your Laravel and Vue.js applications? Whether you're building a live chat, notification system, or collaborative platform, **Laravel Reverb** and Vue.js make real-time communication effortless. In this course, you'll learn how to integrate **real-time WebSocket communication** with Laravel’s Reverb package and leverage Vue.js for an interactive frontend experience. Say goodbye to inefficient polling, and hello to lightning-fast, scalable server events! ### Why Use Laravel with Vue.js? [Laravel](https://laravel.com/docs/11.x#meet-laravel) and [Vue.js](https://vuejs.org/guide/introduction.html) are a match made in web development heaven. Laravel’s powerful backend, combined with Vue.js’s reactive frontend, allows developers to build dynamic and feature-rich applications. **Vue.js**, with its declarative rendering and efficient state management, seamlessly communicates with [Laravel’s elegant PHP backend](https://vueschool.io/courses/laravel-backends-for-vue-js-3). Using [Vue.js with Laravel](https://vueschool.io/articles/vuejs-tutorials/the-ultimate-guide-for-using-vue-js-with-laravel/) offers a full-stack solution that's both productive and enjoyable to work with. But when it comes to real-time data, there’s one crucial piece of the puzzle missing: efficient communication between the backend and the frontend. This is where [**Laravel Reverb** comes into play](https://laravel.com/docs/11.x/reverb#introduction). ### What is Laravel Reverb and Why You Need It **Laravel Reverb** is a high-performance, [**WebSocket-based solution**](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API) that makes adding real-time capabilities to your Laravel applications a breeze. It provides a seamless way to broadcast server events to the frontend without relying on outdated polling methods. Whether you're handling live notifications, chat messages, or any real-time updates, Reverb allows your app to listen for server-side events instantly. With Laravel Reverb, you can scale your application with ease while ensuring that communication between your backend and Vue.js frontend remains fast and efficient. ### What You’ll Learn in This Course In this hands-on course, we’ll walk you through everything you need to know to get started with **real-time data in Laravel** and **Vue.js** using Reverb. By the end of the course, you'll confidently be able to broadcast server-side events and listen to them in real-time on the frontend. Here’s what you’ll learn: - **Setting up Laravel Reverb:** From installation to configuration, we’ll guide you through every step of getting Reverb up and running in your Laravel application. - **Broadcasting Server Events:** Learn how to create and send real-time events from your Laravel backend to your Vue.js frontend. - **Listening for Events in Vue.js:** Master how to listen for and handle real-time events in Vue.js to keep your app in sync with the backend. - **Private and Scoped Events:** We’ll show you how to send private events to specific users and scope events for more granular control. This course is designed to give you practical, hands-on experience so you can implement real-time data in your own projects. With the power of **Laravel Reverb** and **Vue**, you'll be building interactive, modern applications that feel fast and responsive. ### Ready to Dive In? If you're ready to build modern, scalable, and efficient applications that leverage **real-time data** with **Laravel** and **Vue.js**, this course is for you. With Reverb, you'll be able to create apps that are dynamic, responsive, and capable of handling live data with ease. By the end of this course, you’ll have everything you need to implement real-time features into your Laravel-powered Vue.js applications.

The **Quasar Framework** is an absolute game-changer! By the time you finish this course, you'll be able to build Vue.js apps for almost any platform: Android, iOS, Windows, Mac, Linux, or even as a SPA, PWA, SSR, or a browser extension. Imagine the possibilities when you wield this kind of development power! ### Why Quasar? [Quasar](https://quasar.dev/introduction-to-quasar) doesn’t just give you multi-platform deployment—it also delivers an exceptional [material design](https://m3.material.io/) component library. These components are sleek, intuitive, and incredibly customizable, making them perfect for both simple and complex projects. But there’s more. Quasar is designed with future-proofing in mind. As one of the first frameworks to fully embrace [Vue 3](https://vuejs.org/) with minimal breaking changes, it ensures that you can build robust applications without worrying about sudden disruptions or steep migration costs. This makes Quasar a reliable partner in your development journey. So grab a coffee, stretch a little, and get ready to dive into one of the most exciting frameworks out there. By the end of this course, you'll have a strong understanding of Quasar's fundamentals and the confidence to build your own apps for any platform. Let’s get started! ### What You’ll Learn We’re diving into so many concepts: 1. **Quasar Setup and Environment** - How to get started with Quasar's Vite CLI. - Setting up your editor for an optimal development experience. 2. **Core Components** - Master Quasar components like `QBtn`, `QTable`, `QList`, and more. - Learn how to use props, events, slots, and methods effectively. 3. **Layouts and Routing** - Understand Quasar’s layout system and how to manage pages and routes seamlessly. 4. **Styling and Utilities** - Explore Quasar’s grid system, color and typography utilities, and CSS utility classes for positioning, spacing, and visibility. 5. **Mobile and Desktop App Development** - Build mobile apps using Capacitor for Android and iOS. - Integrate mobile features like Bluetooth and GPS. - Create desktop apps with notifications and platform-specific tweaks. 6. **Forms and Validation** - Build dynamic forms, extract them to dialogs, and implement validation for a polished user experience. 7. **Advanced Topics** - Create boot files for plugins like Axios and i18n. - Work with Vite plugins like UnoCSS and Tailwind CSS. - Extend functionality with Quasar plugins like Notify, Dialog, and Loading. 8. **Component Bonanza** - Dive deep into components with hands-on practice across multiple parts of the course. ### Why Take This Course? With Quasar, you can: - **Develop Faster:** Use Quasar’s intuitive API and robust CLI to save development time. - **Deploy Anywhere:** Target multiple platforms from a single codebase. - **Future-Proof Your Apps:** Leverage Quasar’s commitment to backward compatibility and modern tech adoption. - **Master Components:** Build highly customized, responsive, and interactive interfaces. ### Let’s Get Started! By the end of this course, you'll not only understand Quasar’s fundamentals but also have the skills to build stunning, cross-platform Vue.js applications.

Reusability is the backbone of efficient coding, and composables in Vue.js make it easier than ever to create stateful, reusable logic. If you’ve ever struggled with duplicating stateful logic across components, this course will teach you how to streamline your approach and take full advantage of Vue’s Composition API. Join me in this hands-on course as we create a `useCycleList` composable together, covering everything from the basics of Vue.js composables to advanced techniques for refining APIs and ensuring type safety with TypeScript. ### What Are Vue Composables? In [Vue.js](https://vuejs.org/guide/introduction.html), [composables](https://vuejs.org/guide/reusability/composables) are functions that let you extract and reuse stateful logic outside of components. They work seamlessly with the [Composition API](https://vueschool.io/articles/vuejs-tutorials/options-api-vs-composition-api/) to allow you to create clean, modular code that can be shared across your application. Think of composables as building blocks for your app’s functionality. With them, you can define reactive state, logic, and functionality in one place and reuse it across various components wherever it’s needed. ### Why Vue Composables Are a Game-Changer By extracting stateful logic into Vue.js composables, you can: - **Simplify Maintenance:** Reduce duplication and make updates easier. - **Increase Flexibility:** Reuse the same logic in multiple places with custom configurations. - **Enhance Collaboration:** Create intuitive, type-safe APIs that improve team productivity. Whether you’re managing global state, handling API calls, or creating complex logic, composables are your secret weapon for scalable Vue apps. ### Why Take This Course? Composables are the gold standard for creating reusable logic in Vue apps, but mastering them requires more than just knowing the syntax. In this course, you’ll: - **Learn Core Patterns:** Understand the key syntaxes and patterns for building effective composables. - **Master Reactivity:** Discover how to define reactive state outside components and pass it around flexibly. - **Enhance Developer Experience (DX):** Build type-safe composables that make your code easier to use and maintain. - **Explore Advanced Use Cases:** Go beyond the basics with features like config arguments, getter/setter props, and [TypeScript integration](https://vueschool.io/courses/typescript-with-vue-js-3). ### What You’ll Learn This course is packed with valuable Vue Composables knowledge: **1. The Foundations of Vue Composables** We’ll start with the essentials: - Writing your first composable. - Defining reactive state and functions outside components. - Accepting arguments for flexible, customizable composables. **2. Designing User-Friendly Composables** Next, we’ll explore design patterns to make your composables more intuitive: - Returning reactive data and functions. - Refining APIs with getter/setter computed props. - Accepting reactive and plain data arguments for maximum flexibility. **3. Boosting Type Safety and DX** Finally, we’ll dive into advanced topics: - Using TypeScript to ensure type-safe interfaces. - Extending composable functionality with config arguments. - Balancing flexibility and simplicity for the best developer experience. ### Ready to Build Like a Pro? By the end of this course, you’ll have the skills to create powerful, reusable Vue composables that boost your productivity and take your Vue.js apps to the next level. Together, we’ll go from beginner to pro, all while building a practical, real-world composable you can use in your own projects.

Master the art of implementing powerful rich text editing capabilities and beyond in your Vue applications with [TinyMCE](https://www.tiny.cloud/solutions/wysiwyg-vue-rich-text-editor/?utm_campaign=devrel_vueschool_course&utm_source=vueschool&utm_medium=referral&utm_term=course-description). This comprehensive course goes far beyond basic text editing, showing you how to leverage [TinyMCE's](https://www.tiny.cloud/solutions/wysiwyg-vue-rich-text-editor/?utm_campaign=devrel_vueschool_course&utm_source=vueschool&utm_medium=referral&utm_term=course-description) advanced features to build sophisticated applications that rival industry-leading platforms. ## What You'll Learn In this hands-on course, you'll harness TinyMCE's full potential through three real-world use cases that showcase its versatility and power. Starting with fundamental concepts, you'll quickly progress to building professional-grade applications that demonstrate TinyMCE's capabilities in different contexts: - Use TinyMCE to power a newsletter editor with advanced formatting, personalization, and template management - Build a streamlined CRM messaging system with smart auto-resizing and grouped toolbars - Develop a modern CMS editor with custom styles, auto-save functionality, and collaborative commenting ## Course Overview We begin with an introduction to TinyMCE, where you'll learn the essentials of integration with Vue projects and basic configuration. You'll understand how to the basics of customizing the editor's appearance and functionality to match your specific needs through plugins and toolbar configurations. From there, we dive into three practical projects that demonstrate TinyMCE's versatility: ### Newsletter Editor Project Learn to build a professional email editing system with features like: - Multi-root editing for selective content management - Merge tags for dynamic content personalization - Predefined link lists for consistent marketing campaigns - Inline CSS handling for email compatibility ### CRM Messaging System Create a streamlined communication interface featuring: - Optimized toolbar layouts for efficiency - Smart editor auto-resizing capabilities - Grouped tools for improved user experience - Integration with AI for message enhancement - Word document import functionality ### Content Management System Use TinyMCE to power a CMS editor including: - Custom style formats for consistent branding - In-page anchor management - Auto-save functionality to prevent data loss - Advanced code editing capabilities - Accessibility checking tools - Collaborative commenting features ## Who This Course Is For This course is perfect for: - Vue developers looking to implement professional-grade content editing capabilities - Frontend developers building content management systems - Software engineers working on CRM or email marketing platforms - Anyone interested in creating sophisticated document editing interfaces ## Prerequisites To get the most out of this course, you should have: - Basic familiarity with Vue.js - Understanding of HTML and CSS - Basic JavaScript knowledge ## What You'll Build By the end of this course, you'll have built three interfaces with TinyMCE that demonstrate different aspects of it’s capabilities. Each project includes complete source code and follows best practices for implementation. Whether you're building a simple blog platform or a complex content management system, this course will give you the knowledge and confidence to implement sophisticated rich text editing features in your Vue applications. [Join us to unlock the full potential of TinyMCE](https://www.tiny.cloud/solutions/wysiwyg-vue-rich-text-editor/?utm_campaign=devrel_vueschool_course&utm_source=vueschool&utm_medium=referral&utm_term=course-description) and take your applications to the next level.

Every app needs data — whether it’s user profiles, product lists, or blog posts. But crafting realistic datasets from thin air manually can feel like a time sink. That’s where **Faker.js** swoops in to save the day. With this powerful library, you can quickly generate large amounts of realistic fake data (ie dummy data), perfect for testing, development, or even seeding your apps. In this course, you’ll master the art of generating fake data using Faker.js, unlocking tools and techniques to make your development process faster and more efficient. ### What is Faker.js? [Faker.js is a popular JavaScript library](https://fakerjs.dev/) designed for creating fake data. It offers a wide range of tools to generate everything from names, emails, and phone numbers to more complex datasets like addresses, company profiles, and even lorem ipsum text. By automating the creation of realistic-looking data, Faker.js helps developers simulate real-world scenarios, speed up prototyping, and test their apps under realistic conditions — all without relying on real user data. ### Why Take This Course? Faker.js is an essential tool for developers who want to: - **Boost Development Speed:** Skip the tedious task of creating dummy data manually. - **Test More Effectively:** Simulate realistic data to test edge cases and improve app reliability. - **Prototype Quickly:** Start building your app with meaningful, realistic datasets right away. This course gives you the hands-on knowledge to use Faker.js like a pro, ensuring your data needs are covered from basic use cases to advanced setups. ### Why Faker.js is a Game-Changer Faker.js doesn’t just save you time — it makes your work more efficient and effective: - **Realistic Data:** Create datasets that look and feel like real-world information. - **Flexibility:** Generate everything from basic values to complex, structured datasets. - **Global Support:** Produce data in multiple languages and formats to suit different locales. - **Testing Made Easy:** Simulate a variety of scenarios and test edge cases effortlessly. ### Why This Course? This course isn’t just about learning Faker.js; it’s about mastering it. With hands-on lessons, real-world examples, and practical tips, you’ll gain the confidence to tackle any data-related challenge. Whether you’re seeding a database or setting up rigorous tests, this course has you covered. We’ll even cover an interesting use case around using Faker.js to enhance privacy for working with sensitive data. ### Ready to Supercharge Your Data Workflow? By the end of this course, you’ll have all the tools and knowledge needed to make data generation a seamless part of your development process. Say goodbye to repetitive manual work and hello to faster, smarter workflows with Faker.js.

Fetching data in Nuxt might seem straightforward, but there’s a lot more going on under the hood than you might think. From controlling how and when data is fetched to optimizing performance through caching, Nuxt gives you a ton of flexibility—but with that comes a learning curve. In this complete course, you’ll dive deep into data fetching with Nuxt, uncovering the nuances of `useFetch` and `useAsyncData` while exploring concepts like caching strategies, error handling, and optimizing payloads. By the end, you’ll be a data-fetching pro, ready to take on any Nuxt app with confidence! ### What is Data Fetching in Nuxt? [Data fetching in Nuxt](https://nuxt.com/docs/getting-started/data-fetching) is about more than just grabbing data from an API. It’s about understanding when, where, and how to fetch data to create a smooth and efficient user experience. With tools like `useFetch` and `useAsyncData`, Nuxt makes it easy to fetch data on the client, server, or both, depending on your app’s needs. Whether you’re building a static site, an SSR app, or a hybrid, Nuxt’s flexible data-fetching capabilities have you covered. This course will help you unlock its full potential! ### Why Take This Course? Fetching data is a core part of any web app, and Nuxt’s advanced tools for data fetching can make or break your app’s performance and user experience. Here’s why this course is a must: - **Master Nuxt’s Data Fetching API:** Gain a deep understanding of `useFetch`, `useAsyncData`, and `$fetch`. - **Optimize Your Apps:** Learn how to implement caching, handle errors gracefully, and minimize payload sizes. - **Solve Real-World Problems:** Understand how to make parallel requests, customize fetching behavior, and even build your own data fetching composables. If you want to build fast, efficient, and user-friendly Nuxt apps, this course is your ultimate guide. ### What You’ll Learn You’ll learn basic and advanced techniques to master data fetching in Nuxt: 1. **useFetch vs useAsyncData vs $fetch:** Get clarity on the differences and when to use each for your data-fetching needs. 2. **Blocking vs Non-Blocking Requests:** Learn how to control navigation behavior with blocking or lazy loading and implement loading indicators for better user feedback. 3. **Caching Strategies:** Discover how to use the `key` option in `useAsyncData` and `useFetch` to cache responses, reduce API calls, and optimize performance. 4. **Handling Errors Like a Pro:** Master error handling in Nuxt with `useFetch` and build resilient applications that handle failures gracefully. 5. **Making Parallel Requests:** Unlock the power of parallel requests to speed up your app while minimizing redundant calls. 6. **Payload Optimization:** Learn how to trim down payload sizes with `useFetch` and boost your app’s performance. 7. **Serialization Deep Dive:** Understand how data is serialized from server to client and how internal API endpoints factor into the process. 8. **Custom Composables:** Take your skills to the next level by creating your own custom `useFetch` composables tailored to your app’s unique needs. ### Why This Course Stands Out This isn’t just a “click here, do that” kind of course. It’s a hands-on, practical guide that’s as fun as it is insightful. You’ll learn not just the “how” but also the “why,” with real-world examples and actionable tips to improve your projects immediately. ### How Nuxt’s Data Fetching Changes the Game Nuxt’s approach to data fetching is all about flexibility and performance: - **Client-Only or Server-Only Fetching:** Choose the right method for your use case. - **Built-in Caching:** Easily reduce API calls with built-in caching options. - **Performance Optimization:** Streamline payloads and boost your app’s speed. - **Customizability:** Build your own fetching logic with custom composables. ### Ready to Level Up? If data fetching feels overwhelming or like an afterthought in your projects, this course will change how you approach it forever. With Nuxt’s powerful tools and your newfound skills, you’ll create apps that are faster, smarter, and more reliable.

Nuxt 4 might not officially be out yet, but that doesn’t mean you can’t start using its features right now in your Nuxt 3 projects! This course is all about exploring what’s coming in Nuxt 4, understanding how it fits into your existing projects, and preparing to take full advantage of it when it officially lands. ### What is Nuxt 4? [Nuxt](https://nuxt.com/) 4 is the latest major release of the [Vue.js-based framework](https://vuejs.org/guide/scaling-up/ssr.html#nuxt), introducing tools and features that redefine how we build modern web applications. Whether you're an experienced Nuxt developer or just getting started, this version offers improvements that will elevate your development workflow. Key innovations include: - **Improved Performance:** Faster page loads with features like delayed hydration and optimized reactivity mechanisms. - **Revamped Directory Structure:** Simplified directory management for easier handling of both client and server-side logic. - **Shallow Reactivity:** Fine-tuned data handling with less overhead using updates to `useAsyncData` and `useFetch`. - **Seamless Migration:** Tools like CodeMod to simplify upgrades for existing Nuxt 3 projects to Nuxt 4. ### Why Take This Course? Staying current with the latest tools is critical for effective development. Nuxt 4 introduces changes that every developer working with Vue.js should know. This course is packed with actionable insights, hands-on lessons, and expert tips to help you: - Transition smoothly to Nuxt 4 using modern tools. - Take advantage of improved reactivity and performance features. - Understand the underlying architectural changes to build better applications. - Explore advanced concepts like delayed hydration and its impact on user experience. By the end of this course, you’ll not only understand what’s new in Nuxt 4 but also how to apply these features to create faster, more maintainable applications. ### What You’ll Learn - **Revamped Directory Structure:** Nuxt 4’s file structure has been completely overhauled for simplicity, scalability, and performance. This section explores how to navigate the new layout, manage shared directories for server and client code, and organize your project for maximum efficiency. - **Shallow Reactivity in Data Fetching**: Learn how Nuxt 4’s shallow reactivity improves the performance of `useAsyncData` and `useFetch`. You’ll see how these changes reduce unnecessary computations and help you write leaner, faster applications. - **Component Naming Simplification**: Nuxt 4 introduces normalized component names, a subtle but powerful change that enhances consistency and maintainability in larger projects. - **Migration Made Easy with CodeMod** : Upgrading can be daunting, but Nuxt 4 makes it easier with CodeMod. Discover how to use this tool to automate tedious tasks, adapt breaking changes, and get your projects running on Nuxt 4 with minimal effort. - **Delayed Hydration for Blazing Performance**: Explore one of Nuxt 4’s most exciting features: delayed hydration. By deferring non-essential scripts, you’ll learn how to dramatically improve page load times and overall performance. ### Ready to Upgrade Your Skills? Join this course to explore its full potential and ensure your skills stay at the forefront of web development innovation.

Creating scalable Vue components demands more than technical expertise — it requires applying proven patterns that have been battle-tested in production. In the **"Vue Component Design"** course, we’ll uncover advanced strategies to enhance clarity, maintainability, and scalability in your Vue.js applications. ### What You’ll Learn This course begins with a foundational [introduction to Vue](https://vuejs.org/guide/introduction.html) **component design principles** before diving into essential patterns: - **Branching Component Pattern**: Effectively manage conditional logic. - **Slots and Template Props**: Unlock flexibility in component interfaces. - **List Component Pattern**: Design scalable architectures for dynamic data presentation. #### Advanced Techniques Progressing deeper, you’ll explore more sophisticated patterns to elevate your Vue development: - **Smart vs Dumb Components**: Master separation of concerns for cleaner architecture. - **Form Handling Patterns**: Simplify forms with `v-model` at the form level. - **Recursive Components**: Tackle nested data structures dynamically. - **Lazy Dynamic Components**: Improve app performance and flexibility. - **Provide/Inject Pattern**: Build tightly coupled components where necessary. ### Why This Course Stands Out Unlike traditional "follow-along" courses, this course emphasizes **understanding the 'why' and 'when'** behind each pattern. You’ll gain practical knowledge to make informed architectural decisions in projects ranging from small apps to enterprise-level systems. ### Who Is This Course For? - **Beginner Vue Developers**: Move beyond basic components and into real-world application. - **Intermediate Developers**: Sharpen your skills with advanced patterns. - **Team Leads**: Establish consistent component strategies across teams. ### Key Benefits - Learn **battle-tested Vue patterns** to organize components. - Harness the power of **slots** for versatile, reusable components. - Create **scalable list and form architectures**. - Master **Smart vs Dumb component separation**. - Explore advanced techniques like recursive and lazy dynamic components. By the end of this course, you’ll have the confidence and expertise to design scalable, maintainable components that make your Vue.js applications stand out. Take your Vue components to the next level with this in-depth exploration of design patterns and advanced concepts. Let’s build better Vue.js apps!

Master the art of building high-performance Vue.js applications with our comprehensive course on Vue.js performance optimization. Learn production-ready techniques for creating blazing-fast web applications that your users will love. ## Course Outline ### Chapter 1: General Performance Optimization Techniques Learn foundational optimization strategies including tree shaking, code splitting, and architectural decisions that impact performance. Master advanced techniques like lazy hydration, list virtualization, and memory leak prevention. ### Chapter 2: Component Update Optimization Deep dive into component-level optimizations, including prop stability, strategic use of v-once and v-memo directives, and best practices for computed properties to minimize unnecessary renders. ### Chapter 3: Data Fetching Optimization Master efficient data fetching patterns including parallel requests, client-side caching, prefetching strategies, and intelligent throttling and debouncing techniques for optimal user experience. ### Chapter 4: Performance Debugging and Monitoring Get hands-on experience with professional performance monitoring tools including the Vite Bundle Analyzer, Chrome DevTools Performance Panel, and Vue DevTools for identifying and resolving performance bottlenecks. ## Who Should Take This Course This course is perfect for: - Vue.js developers looking to level up their performance optimization skills - Frontend engineers working on large-scale Vue applications - Tech leads and architects making critical performance decisions - Developers transitioning from other frameworks to Vue.js ## Prerequisites - Working knowledge of Vue.js fundamentals - Basic understanding of modern JavaScript - Familiarity with web development concepts ## Why Take This Course Good performance is critical for modern web applications. Poor performance leads to decreased user engagement, lower conversion rates, and potential loss of business. This course equips you with the knowledge and tools to: - Significantly improve your Vue.js application's load time and runtime performance - Implement advanced optimization techniques used by industry experts - Debug and resolve performance bottlenecks efficiently - Make informed architectural decisions that impact application speed - Deliver exceptional user experiences through optimized performance Join us to master Vue.js performance optimization and take your applications to the next level of speed and efficiency.

Master the art of web scraping with this comprehensive course that takes you from fundamental concepts to building production-ready scrapers. Learn how to harness the power of Bright Data's infrastructure alongside popular tools like Playwright and Puppeteer to create robust, scalable web scraping solutions. ## Course Overview This hands-on course combines theoretical knowledge with practical implementation, teaching you how to effectively collect and process web data while navigating common challenges. Whether you're looking to gather competitive intelligence, build training datasets for AI models, or aggregate public information for your next project, this course equips you with the necessary skills and best practices. ## What You'll Learn - Fundamentals of web scraping and its real-world applications - Setting up and utilizing Bright Data's scraping infrastructure - Writing efficient scrapers using Playwright - Implementing anti-blocking strategies - Best practices for data extraction and management - How to use AI in web scraping workflows ## Course Structure The curriculum is divided into 11 comprehensive lessons, progressing from basic concepts to advanced techniques. Most lessons include hands-on coding exercises, real-world examples, and practical demonstrations scraping Amazon. ## Key Features - Live coding sessions and demonstrations - Real-world project implementation - Best practices for production environments - Integration with modern development tools - Scalable architecture patterns - Hands-on experience with Bright Data's suite of tools ## Perfect For - Web developers looking to expand their skill set - Data scientists needing to collect training data - Business analysts gathering market intelligence - Anyone interested in automated web data collection By the end of this course, you'll be able to confidently build and deploy web scrapers that can handle complex scenarios while maintaining reliability and scalability. The skills learned are immediately applicable to real-world projects and can be adapted to various use cases across different industries.

Master the art of building reliable and maintainable JavaScript applications with our comprehensive course on error handling. Learn professional techniques for managing errors effectively, from foundational concepts to production-ready implementation strategies. ## Course Outline ### Chapter 1: Error Handling Syntax and Essential Concepts Learn essential error handling patterns including try-catch syntax, built-in error types, and custom error classes. Also cover very practical techniques like async error handling for API requests. ### Chapter 2: Best Practices for JavaScript Error Handling Deep dive into professional error handling strategies, including tips on when to show what messages to who, how to use error logging services, and avoiding common error handling mistakes. Learn key principles that separate amateur from production-ready code. ## Who Should Take This Course This course is perfect for: - JavaScript developers seeking to write more reliable code - Frontend engineers working on complex web applications - Tech leads making architectural decisions about error handling - Developers wanting to level up their debugging skills ## Prerequisites - Working knowledge of JavaScript fundamentals - Basic understanding of async/await and Promises - Familiarity with HTTP and API concepts ## Why Take This Course Effective error handling is key for professional JavaScript applications. Poor error management leads to difficult debugging, poor user experience, and potential system failures. This course equips you with the knowledge and tools to: - Handle errors gracefully - Build more reliable and maintainable applications - Deliver better user experiences - Improve the developer debugging process Join us to master JavaScript error handling and take your applications to the next level of reliability and maintainability.

Master the art of building reliable and maintainable Vue applications with our comprehensive course on error handling. Learn professional techniques for managing errors effectively at every level of your Vue application, from component-level strategies, to composable error handling, to application-wide solutions. ## Course Outline ### Chapter 1: Vue Error Handling Essentials Learn essential Vue error handling tools including component-level error capturing with `onErrorCaptured`, and app level error capturing with `app.config.errorHandler`. Build a re-usable Error Boundary component and learn how it utilizes `onErrorCaptured` under the hood. Implement intuitive reactive error handling in composables. Discover how to gracefully degrade UI when errors occur and create maintainable error handling architecture for your Vue applications. ### Chapter 2: More Opinionated but Practical Error Handling Tips Deep dive into some practical but opinionated error handling strategies, including techniques for displaying technical errors in development while showing user-friendly messages in production, building a custom `AlertableError` class that integrates with your notification system, and combining multiple error handling approaches into a comprehensive strategy. Learn key principles that separate amateur from production-ready Vue applications. ## Who Should Take This Course This course is perfect for: - Vue.js or Nuxt developers seeking to write more reliable applications - Frontend engineers working on complex Vue SPAs or enterprise applications - Tech leads making architectural decisions about error handling in Vue projects - Developers wanting to level up their Vue debugging and error handling skills ## Prerequisites - Working knowledge of Vue.js fundamentals - Understanding of Vue 3 Composition API - Basic familiarity with TypeScript (helpful but not required) - Experience with component-based architecture - JavaScript Error handling basics ([we highly recommend watching this course first](https://vueschool.io/courses/javascript-error-handling)) ## Why Take This Course Effective error handling is crucial for professional Vue applications. Poor error management leads to cascading failures, difficult debugging, poor user experience, and potential system crashes. This course equips you with the knowledge and tools to: - Catch and handle errors at the appropriate level of your application - Build resilient components with error boundaries - Create user-friendly error messages while preserving technical details for debugging - Deliver better user experiences even when errors occur - Improve your team's debugging process and application maintainability Join us to master Vue error handling and take your applications to the next level of reliability and professionalism.

Learn how to build powerful, user-friendly file upload functionality in Vue.js applications with our comprehensive drag-and-drop file uploads course. Create a production-ready uploader that handles multiple files, displays previews, shows upload progress, and manages errors elegantly. ## Course Outline ### Chapter 1: Getting Started with File Uploads in Vue.js Explore the fundamentals of file handling in Vue.js and set up your development environment. Get familiar with the tech stack including Nuxt (for API endpoints only), Composition API, and TypeScript, and understand the project structure that will support our sophisticated file uploader. ### Chapter 2: Basic File Upload with Input Fields Master the essentials of file capturing in Vue.js, including creating styled input fields, storing files in reactive variables, validating file types and sizes, generating previews for multiple file types, and implementing progress tracking during uploads. ### Chapter 3: Build Drag and Drop Area for File Uploads Take your file uploader to the next level by implementing intuitive drag-and-drop functionality. Learn to create an engaging UI that responds to user interactions, handle file drops, prevent default browser behaviors, and seamlessly integrate with your existing upload logic. ## Who Should Take This Course This course is perfect for: - Vue.js developers looking to implement professional file upload features - Frontend engineers building robust form solutions - Developers wanting to enhance user experience with drag-and-drop interactions - Engineers working with file processing in web applications ## Prerequisites - Working knowledge of Vue.js fundamentals - Basic understanding of TypeScript - Familiarity with web development concepts ## Why Take This Course File uploads are a common feature in many web applications but implementing them well can be challenging. This course equips you with the knowledge and tools to: - Build an intuitive, user-friendly file upload experience - Implement proper validation and error handling for secure file processing - Create responsive UI components that provide visual feedback during uploads - Master drag-and-drop interactions that users love - Understand the underlying mechanics of file handling in the browser Join us to master file uploads in Vue.js and create polished, production-ready features that will elevate your applications. NOTE: The server side portion of the file handling will be provided for you and we’ll briefly discuss different backend solutions but this course mainly focuses on front-end implementation.

Build a feature-rich document editor in no time with CKEditor. Learn how to integrate enterprise-grade text editing capabilities (rich text, real-time collab, and image uploads) into your applications with minimal effort. Go from knowing nothing about CKEditor, to setting it up in a Vue app, to collaborating on feature rich documents, all in under 30 minutes. ## Who Should Take This Course This course is perfect for: - Web developers looking to add document editing capabilities to their applications - Frontend engineers building collaborative web applications - Developers who need a quick but robust solutions for rich text editing - Anyone wanting to implement Google Docs-like functionality without building from scratch ## Prerequisites - Basic understanding of web development - Familiarity with JavaScript - Some experience with Vue.js (though concepts apply to other frameworks) ## Why Take This Course Implementing robust document editing functionality typically requires significant development time and resources. This course equips you with the knowledge to: - Add enterprise-grade document editing to your applications in minutes (not weeks) - Implement real-time collaboration without complex backend setups - Create an intuitive, feature-rich editing experience for your users - Leverage CKEditor's batteries-included approach to save development time - Build a professional document editor that rivals popular commercial products Join us to learn how to quickly implement a powerful Google Docs clone and elevate your web applications with sophisticated document editing capabilities.

Many Nuxt apps require user’s to login. For such apps, simple and secure authentication is a must but implementing auth from scratch can be time consuming and challenging. This course provides a comprehensive guide to mastering Nuxt Auth Utils, enabling you to quickly build secure, professional-grade authentication systems in your Nuxt applications without the headaches. ## **What is Nuxt Auth Utils?** Nuxt Auth Utils is a powerful authentication module for Nuxt 3 that simplifies implementing secure user authentication. Maintained by Nuxt creator Sébastien Chopin (you may know him as Atinux), this module provides an elegant solution for handling authentication flows while maintaining the flexibility developers need for customization. Key features include: - **Social Logins:** Authenticate user identity with popular 3rd party services like Github, Google, and 40+ more - **Hashing Utils:** Quickly implement your own email/password system with provided hashing functions. Just bring your own db! - **Cutting Edge Login with Passkeys**: Let user’s login with fingerprints, facial recognition, and more with passkeys. - **Cookie-Based Sessions**: Secure, stateful authentication that works across all Nuxt rendering modes. - **TypeSafe User Sessions**: Full TypeScript support for user and session data. - **Server-Side Protection**: Comprehensive tools for securing both routes and API endpoints. ## **Why Take This Course?** Authentication is the gateway to your application, making it one of the most critical components to implement correctly. This course offers practical, hands-on lessons that will help you: - Master both client and server-side authentication patterns in Nuxt 3. - Implement modern authentication methods including social logins and passkeys. - Properly secure your application with middleware and server-side validations. - Understand authentication fundamentals that apply beyond just Nuxt Auth Utils. By the end of this course, you'll confidently implement various authentication strategies, properly protect sensitive routes and data, and follow best practices that ensure your users' security. ## **What You'll Learn** **Authentication Fundamentals** Discover the building blocks of modern authentication systems. We'll explore the difference between authentication and authorization, understand how cookie-based sessions work, and compare different authentication approaches like stateful vs. stateless (JWT) authentication. **Social Login Implementation** Step-by-step guidance on implementing GitHub authentication in your Nuxt application. From initializing login in the UI, to callback setup, you’ll learn everything you need to know. **Email/Password Authentication** Build a simple but secure email/password authentication system using Nuxt Auth Utils' hashing helpers. You'll implement secure password hashing, verification, and user session management with KV data storage via the built in useStorage function. **Cutting-Edge Passkey Support** Future-proof your authentication with passkeys - a passwordless authentication method gaining rapid adoption. Learn how to register and authenticate users with passkeys while preventing common security issues like replay attacks. **TypeSafe Session Management** Take your authentication to the next level with complete TypeScript integration. We'll show you how to properly type your user sessions, secure data, and maintain type safety throughout your authentication flows. **Route and API Protection** Master both client and server-side protection strategies. From route middleware to API endpoint security, you'll learn comprehensive techniques for keeping user data secure throughout your application. ## **Ready to Master Authentication in Nuxt?** Join this course to build a secure production-ready, authentication systems that your users can trust. Whether you're building a personal project or enterprise application, these skills will help you implement authentication that's both secure and user-friendly.

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.

Get a better developer experience when using TypeScript in your Vue 3 apps by leveraging the script setup syntax.

Transition your state management from Vuex to Pinia with the guidance of a Vue Core Team Member.

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

Learn from the expert in this recording of a live Q&A with Creator of Pinia Eduardo San Martin Morote.

Learn how to write scalable Composables based on best practices from the popular VueUse library.

Build a blog using Nuxt 3, Nuxt Content v2, and Bulma CSS.

Modernize your styles with Tailwind, the popular utility-first CSS framework.

Learn the fundamentals of Pinia, Vue's new state management library, by building a simple Todo List App.

Explore more complex use cases and best practices of state management with Pinia.

Speed up your component tests with Vitest, the blazing fast unit test framework powered by Vite.js.

Rapidly learn Vue by applying the React knowledge you already have.

Learn the foundations of using Firebase for the back end of your Vue apps.

Rapidly learn Vue by understanding the differences between Vue and React.

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

Discover how to use Pinia like a pro by watching its creator demonstrate 5 elegant ways to use Vue’s state management library.

Leverage Nuxt 3 middleware to run custom code before a page is rendered, enhancing your apps' security and maintainability at scale.

Transform your front-end apps into powerful full-stack applications with Nuxt 3 by leveraging its server capabilities.

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

Get an exclusive glimpse into the mind of the creator of Vue.

Future-proof your skills by harnessing the power of AI by building a Vue app powered by multiple popular AI APIs.

Create quick and beautiful user interfaces with the popular Vuetify UI component library.

The Nuxt ecosystem is full of tools to boost your productivity. Level up your workflow by learning how take advantage of them.

Gain experience building a practical Nuxt app in this course that covers rendering for performance.

Sharpen your Nuxt 3 skills by building a Trello clone alongside a core team member.

Gain clarity on Vue + Nuxt app rendering modes and the best fit for your project's needs, performance demands, and user experience.

Vapor mode is Vue's brand new compilation strategy that will enhance your apps' performance. Learn how it works and how to maximize its power with Vue Creator Evan You.

Learn how to use Nuxt API routes to handle server-side logic directly within your Nuxt application.

Learn the essential patterns of SSR authentication for Nuxt.js apps through practical hands-on lessons.

Keep up with the latest syntax and features of Vue’s evolving landscape.

Explore the best practices that ensure you’re building reliable, scalable, maintainable components.

For developer advocates, open source authors, and managers: learn how to attract, educate, and build a developer community around your project.

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