https://vueschool.io/courses/the-vite-plus-crash-course-vc 2026-06-01 monthly 0.8 https://vueschool.io/lessons/intro-to-vite-plus 2026-05-04 monthly 0.8 nKiOzDR44nLZJd7UkBQ3CwhI4shHyek4dSjCya5d.webp Intro to Vite Plus Video Lesson In this lesson, we look through the Vite Plus Announcement post from Void Zero and find out what Vite Plus is and what benefits it has to offer. https://player.vimeo.com/video/ 178 yes no 2026-04-28T13:00:00+02:00 yes https://vueschool.io/lessons/installing-vite-plus 2026-05-04 monthly 0.8 4kqu2BMQHFT13yv6M7kcM4HIkUdXtbS6qkFpYO0v.png Installing Vite Plus Video Lesson In this lesson, let’s install Vite+ on a Mac. The process is really easy and the setup command walks you through next steps. https://player.vimeo.com/video/ 179 yes no 2026-04-28T13:00:00+02:00 yes https://vueschool.io/lessons/create-a-vue-project-with-vite-plus 2026-05-04 monthly 0.8 JwRhlCpOVYs3Bdn4LOfdKlaZv6w4WQ9IlgKzZTej.png Create a Vue Project with Vite Plus Video Lesson In this lesson, we use Vite Plus to create a new Vue project. Along the way we encounter some useful and some confusing setup options but by the end of the video have the dev server up in running. https://player.vimeo.com/video/ 566 yes no 2026-04-28T13:00:00+02:00 yes https://vueschool.io/lessons/a-more-organized-root-directory-with-file-nesting 2026-05-04 monthly 0.8 wJhhkujb7TWTYDgntiXZRVEBVQzhHXn1Q0lpMPF9.webp A More Organized Root Directory with File Nesting Video Lesson In this lesson, learn how the file nesting setting for VS Code makes for a cleaner root directory. Vite plus ships with this setting configured already for us. https://player.vimeo.com/video/ 108 yes no 2026-04-28T13:00:00+02:00 yes https://vueschool.io/lessons/running-npm-scripts-with-cache-support 2026-05-14 monthly 0.8 fqQ39MgJhoCQqfiLjPnnjHCYQA6dgVCVW65DJUn3.png Running npm Scripts with Cache Support Video Lesson In this lesson, learn how to run npm scripts with Vite plus. It’s easy! Even better though, learn how to run scripts with caching in place for quick future re-runs when nothing has changed. https://player.vimeo.com/video/ 440 yes no 2026-05-14T13:00:00+02:00 yes https://vueschool.io/lessons/fault-tolerant-npm-script-runs-and-a-handy-select-list 2026-05-14 monthly 0.8 aGKaLZ0OQ19HgGGcGNrjJMtKYssVNbpQHCXNXq6A.png Fault Tolerant npm Script Runs and A Handy Select List Video Lesson Check it out! Vite plus is forgiving with typos! Pass a misspelled script name to vp run and you'll get an interactive list to choose the right one. https://player.vimeo.com/video/ 105 yes no 2026-05-14T13:00:00+02:00 yes https://vueschool.io/lessons/linting-a-project-with-vite-plus 2026-05-14 monthly 0.8 9YxtKVS8wjoTiV6TgtQqXscHutKgfTOpZm0j3sjW.webp Linting a Project with Vite Plus Video Lesson In this lesson, learn how to catch code smells early with OXLint. It’s an ESLint compatible linter that ships with Vite Plus out of the box. https://player.vimeo.com/video/ 425 yes no 2026-05-14T13:00:00+02:00 yes https://vueschool.io/lessons/formatting-code-with-vite-plus 2026-05-14 monthly 0.8 LP1cp9pS7BCafZ0dNfvZKXII2xh0jRvKeoeoEOiM.png Formatting Code with Vite Plus Video Lesson In this lesson, learn how to use OXfmt with Vite Plus for Prettier compatible formatting. https://player.vimeo.com/video/ 372 yes no 2025-05-15T13:00:00+02:00 yes https://vueschool.io/lessons/managing-node-versions-with-vite-plus 2026-05-28 monthly 0.8 8dlMypmeMdq6TJnbdX42VNyxbE1FSuyrXylDood0.png Managing Node Versions with Vite Plus Video Lesson # Description https://player.vimeo.com/video/ 483 yes no 2026-04-28T13:00:00+02:00 yes https://vueschool.io/lessons/vite-plus-commit-hooks 2026-05-28 monthly 0.8 nMHzyQlFHZ7Rf2z7y9NgHFkqANA7db5UQ5E8dc3G.png Vite Plus Commit Hooks Video Lesson The `vp staged` command is configured in `vite.config.ts` and let’s you defined multiple commands that should be run and what files to run them on, before code is committed to your repo. Combine... https://player.vimeo.com/video/ 329 yes no 2026-05-28T13:00:00+02:00 yes https://vueschool.io/lessons/course-conclusion-15 2026-05-28 monthly 0.8 Vhrjm2B8c3zGh789tvpURCD4b5yI79SnTIp40CSQ.jpg Course Conclusion Video Lesson Congrats! You've completed the course! Thanks for watching :) Feel free to reach out with any comments, questions, etc in the comments section below, via social media, or via email. https://player.vimeo.com/video/ 183 yes no 2026-05-28T13:00:00+02:00 yes https://vueschool.io/courses/rag-with-nuxt-and-gemini-file-search 2026-06-01 monthly 0.8 https://vueschool.io/lessons/what-is-rag-and-what-we-re-building 2026-05-05 monthly 0.8 3G7FZdXlYaOpHwWAAJ7mJYy1g6tfTQ90vZq1tdBo.png What is RAG and What We’re Building Video Lesson In this lesson, let’s talk about what RAG is good for, give a couple of real-world examples of RAG in practice, and then describe the app we’ll build step-by-step. https://player.vimeo.com/video/ 259 yes no 2026-04-06T16:12:00+02:00 yes https://vueschool.io/lessons/rag-terms 2026-05-05 monthly 0.8 aCJiyDaNnfqci477eGTQzqM81eQZWa5IkFSpvd96.png RAG Terms Video Lesson In this lesson, let's define some terms we'll use throughout the course that you might not be familiar with including RAG, Document, Chunk, Indexing, Embedding, Vector Database, and Google Gemini F... https://player.vimeo.com/video/ 215 yes no 2026-04-06T16:13:00+02:00 yes https://vueschool.io/lessons/project-setup 2026-05-05 monthly 0.8 Project Setup Video Lesson In this lesson, let’s get setup with the boilerplate code and take a look around at what we’re starting with. The frontend is completely provided but the backend is full of dummy responses. We�... https://player.vimeo.com/video/ 167 yes no 2026-04-06T16:13:00+02:00 yes https://vueschool.io/lessons/create-a-gemini-file-search-store 2026-05-05 monthly 0.8 Create a Gemini File Search Store Video Lesson In this lesson, learn how to use the `@google/genai` TypeScript client to create a new File Search store. https://player.vimeo.com/video/ 270 yes no 2026-04-06T16:13:00+02:00 yes https://vueschool.io/lessons/add-documents-to-a-gemini-file-search-store 2026-05-05 monthly 0.8 Add Documents to a Gemini File Search Store Video Lesson In this lesson, use `fileSearchStores.uploadToFileSearchStore` to upload and index a document to your Gemini Files Search store. https://player.vimeo.com/video/ 455 yes no 2026-04-08T14:31:00+02:00 yes https://vueschool.io/lessons/ask-questions-about-your-documents 2026-05-05 monthly 0.8 gflXMHodTlaabF65UW7nO9RKIsw5ozRb6NJ0tltD.png Ask Questions about Your Documents Video Lesson In this lesson, learn how to use the fileSearch tool in a gemini text generation call. This simple step hooks up the generally trained model to your file stores and let’s it query for semanticall... https://player.vimeo.com/video/ 356 yes no 2026-04-08T14:31:00+02:00 yes https://vueschool.io/lessons/attributing-docs-in-answers 2026-05-05 monthly 0.8 l9kxqeqHdeeoka8w3nq12pvIxAu5vLU2G4iJp3TD.png Attributing Docs in Answers Video Lesson In this lesson, learn how to cite document chunks as sources with the Gemini File Search API. https://player.vimeo.com/video/ 511 yes no 2026-04-08T14:31:00+02:00 yes https://vueschool.io/lessons/filtering-matches-with-metadata 2026-05-05 monthly 0.8 iyOODKjockkaJ3Uxun88kTYnreeaxltwbiWVTD2t.png Filtering Matches with Metadata Video Lesson In this lesson, we take a slight detour from our example app and go straight to the File Search API docs to talk about File Metadata. File metadata is useful for more granular filtering of retrieva... https://player.vimeo.com/video/ 126 yes no 2026-04-08T14:31:00+02:00 yes https://vueschool.io/lessons/reduce-latency-by-indexing-documents-in-the-background-and-poll-for-completion 2026-05-05 monthly 0.8 Reduce Latency by Indexing Documents in the Background and Poll for Completion Video Lesson In this lesson, learn how to track the status of a document upload/indexing process for the Gemini File Search API with Nuxt KV storage. The `useStorage` function from Nitro/Nuxt makes this a strai... https://player.vimeo.com/video/ 467 yes no 2026-04-14T13:00:00+02:00 yes https://vueschool.io/lessons/create-an-api-endpoint-to-list-documents 2026-05-05 monthly 0.8 Create an API Endpoint to List Documents Video Lesson In this lesson, learn how to list documents from the Gemini File Search Store with `fileSearchStores.documents.list` https://player.vimeo.com/video/ 193 yes no 2026-04-14T13:00:00+02:00 yes https://vueschool.io/lessons/create-an-api-endpoint-to-delete-documents 2026-05-05 monthly 0.8 Create an API Endpoint to Delete Documents Video Lesson In this lesson, learn how to delete documents and their chunks from the Gemini File Search API with `fileSearchStores.documents.delete` and the `force` option. https://player.vimeo.com/video/ 64 yes no 2026-04-14T13:00:00+02:00 yes https://vueschool.io/lessons/understanding-gemini-file-search-api-pricing 2026-05-05 monthly 0.8 Understanding Gemini File Search API Pricing Video Lesson In this lesson, learn how much the Gemini File Search API costs and what you pay for which parts of the service. https://player.vimeo.com/video/ 102 yes no 2026-04-14T13:00:00+02:00 yes https://vueschool.io/lessons/api-walkthrough-wrap-up 2026-05-05 monthly 0.8 Course Conclusion Video Lesson Congrats! You've completed the course! Thanks for watching :) Feel free to reach out with any comments, questions, etc in the comments section below, via social media, or via email. https://player.vimeo.com/video/ 66 yes no 2026-04-14T13:00:00+02:00 yes https://vueschool.io/courses/pinia-colada-scalable-data-handling-in-vue-shv 2026-06-01 monthly 0.8 https://vueschool.io/lessons/intro-to-pinia-colada 2026-05-07 monthly 0.8 Yu5w5zRRaEX7COBotiPjMcuQYRxMg3oQpcajCJDb.png Intro to Pinia Colada Video Lesson Hello and welcome to the course! In this lesson, let’s talk about some reasons you might consider implementing Pinia Colada in your next project for handling server side state. https://player.vimeo.com/video/ 198 yes no 2026-02-10T09:21:00+01:00 no https://vueschool.io/lessons/how-to-follow-along-in-this-course 2026-05-07 monthly 0.8 kn90aYxf0nooy5wHMHdgnqSuuPljbRscelXcpLMA.png How to Follow Along in this Course Video Lesson In this lesson, learn how to follow along in the course codebase to learn new concepts lesson by lesson. https://player.vimeo.com/video/ 187 yes no 2026-02-10T09:25:00+01:00 no https://vueschool.io/lessons/pinia-colada-queries-101 2026-06-02 monthly 0.8 nLs7rJVU4oaQKpC7KuCbE7TYwQdkwomqZLKQyLtl.png Pinia Colada Queries 101 Video Lesson In this lesson, learn the basics of the Pinia Colada `useQuery` composable. It provides caching and reactive state for your backend async data. https://player.vimeo.com/video/ 175 yes no 2026-02-10T09:34:00+01:00 yes https://vueschool.io/lessons/pinia-colada-cache-and-stale-while-revalidate-swr 2026-06-02 monthly 0.8 0zpkxwcQnfO0Qb7NYPobxKu3Kcb9isrIIrPgH94P.png Pinia Colada Cache and Stale While Revalidate (SWR) Video Lesson In this lesson, learn how the `useQuery` key enables powerful but easy to use caching for async data across multiple calls to the composable. https://player.vimeo.com/video/ 167 yes no 2026-02-10T09:39:00+01:00 yes https://vueschool.io/lessons/external-properties-in-queries 2026-06-02 monthly 0.8 isbst28Et8iyOHTVDJjjHb3hBoB2l4ha9N2BxiCw.png External Properties in Queries Video Lesson It’s important when reaching for external data within your `useQuery` query, that you make that data a part of the key so that caching is predictable and accurate. In this lesson, we go over an e... https://player.vimeo.com/video/ 167 yes no 2026-02-17T10:20:00+01:00 yes https://vueschool.io/lessons/pinia-colada-mutations-101 2026-06-02 monthly 0.8 hkCgUQY3kijSDvNzLIMvgSMW2mu2oO8ACkt4Z0Cc.png Pinia Colada Mutations 101 Video Lesson In this lesson, learn how to trigger updates of data on your server with Pinia Colada mutations. The `useMuatation` composable is the go to place to trigger these async server side updates. https://player.vimeo.com/video/ 250 yes no 2026-02-17T10:25:00+01:00 yes https://vueschool.io/lessons/invalidate-a-query-after-a-mutation-in-pinia-colada 2026-06-02 monthly 0.8 4ucUjBnjPxvg3FUifqxdoIF1nJKO3F8iLls4mCmn.png Invalidate a Query After a Mutation in Pinia Colada Video Lesson In this lesson, learn how to invalidate a Pinia Colada query in the cache. Invalidating a query in the `onSettled` hook/event of `useMuation` is a great way to auto trigger a refetch of mutated dat... https://player.vimeo.com/video/ 163 yes no 2026-02-17T10:35:00+01:00 yes https://vueschool.io/lessons/should-you-await-or-not-await-in-onsettled-to-invalidate-queries 2026-06-02 monthly 0.8 S98SJV5rRYSBdmxdVGq0CVALYC2fpvnQ0IhK043s.png Should You Await or Not Await in onSettled to Invalidate Queries Video Lesson In this lesson, learn how awaiting in the `onSettled` hook of `useMutation` effects it’s async status. All hooks on `useMutation` including ones we haven’t discussed yet, can return a promise t... https://player.vimeo.com/video/ 180 yes no 2026-02-17T10:48:00+01:00 yes https://vueschool.io/lessons/optimistic-updates-in-pinia-colada 2026-06-02 monthly 0.8 gd7llsvAFVIUQWbYBJG8OXdi0jaIKDYIrbTIiIGN.png Optimistic Updates in Pinia Colada Video Lesson In this lesson, learn a technique called “optimistic updates” to make your application mutations feel as fast as possible. Optimistic updates involve updating your client-side state before the... https://player.vimeo.com/video/ 182 yes no 2026-02-24T10:10:00+01:00 yes https://vueschool.io/lessons/rolling-back-failed-optimistic-updates-in-pinia-colada 2026-06-02 monthly 0.8 L2lSls6pwi7cEO4Of1IUZwDac2ShdnAnFzELmm1h.png Rolling Back Failed Optimistic Updates in Pinia Colada Video Lesson Optimistic updates make your app feel snappy, even when the connection isn't. You update the UI immediately and hope the server agrees — and it usually does. But when it doesn't, you can't just l... https://player.vimeo.com/video/ 188 yes no 2026-02-24T10:14:00+01:00 no https://vueschool.io/lessons/pinia-colada-challenge-brief 2026-05-09 monthly 0.8 6IbT2ajUf8PD1bhdNIWIRg9ZfiuxSU1WbjvtngwJ.png Pinia Colada Challenge Brief Video Lesson In this lesson, get briefed on a project challenge, where you’ll put your Pinia Colada understanding to the test. https://player.vimeo.com/video/ 314 yes no 2026-03-10T13:00:00+01:00 yes https://vueschool.io/lessons/pinia-colada-challenge-solution-queries 2026-05-09 monthly 0.8 0HAkv6jOdjO0MsAZDUQQfCA3AbOyroeAkAtSfChy.png Pinia Colada Challenge Solution (Queries) Video Lesson In this lesson, we look at the solution for the task manager challenge. Specifically, we see how `useQuery` is used to fetch data for the list of tasks and an individual task. https://player.vimeo.com/video/ 420 yes no 2026-03-18T16:14:00+01:00 yes https://vueschool.io/lessons/course-conclusion-14 2026-05-09 monthly 0.8 NTqYsNco3GUggXz7P87bqtBLzytkeuZd4XBYKLct.png Course Conclusion Video Lesson Congrats! You've completed the course! You now know how to master server state management with Pinia Colada. https://player.vimeo.com/video/ 63 yes no 2026-03-17T13:00:00+01:00 yes https://vueschool.io/lessons/refetching-vs-refreshing-queries 2026-06-03 monthly 0.8 HcIazS0ovXArHwKGgs0Q2JkXBdbjuMJhJfMALT3U.png Refetching vs Refreshing Queries Video Lesson In this lesson, we talk about the different between the `useQuery` refetch and refresh functions. `refetch` always goes back to the server no matter if the data in the cache is fresh or stale. `ref... https://player.vimeo.com/video/ 106 yes no 2026-02-24T10:30:00+01:00 yes https://vueschool.io/lessons/the-hierarchical-nature-of-query-keys 2026-06-03 monthly 0.8 96TKAzLLq97TJnaNZEwh7lJ5mdAltqcrNqNlIGEU.png The Hierarchical Nature of Query Keys Video Lesson In this lesson, learn about the hierarchical nature of Pinia Colada query keys. This is a powerful feature that helps you better manage going back to the server for RELATED data. https://player.vimeo.com/video/ 197 yes no 2026-02-24T10:35:00+01:00 yes https://vueschool.io/lessons/organizing-queries-and-key-factories 2026-06-03 monthly 0.8 aj8osMwKrTkJjtrqWiMB5t3Pmzoraw02eBY1Bomg.png Organizing Queries and Key Factories Video Lesson # Description https://player.vimeo.com/video/ 350 yes no 2026-03-03T13:00:00+01:00 yes https://vueschool.io/lessons/using-reusable-query-options 2026-05-08 monthly 0.8 FI2tlNpUA2lovAdAeGPzKuWfYrOPUZ862HB5HHSQ.png Using Reusable Query Options Video Lesson # Description https://player.vimeo.com/video/ 172 yes no 2026-03-03T12:37:00+01:00 yes https://vueschool.io/lessons/using-key-factories-and-usecache-with-typesafety 2026-05-08 monthly 0.8 mehT2sEfhOGj71v4Tk85PvFF70UdZHGLTxPSLM7x.png Using Key Factories and useCache with TypeSafety Video Lesson # Description https://player.vimeo.com/video/ 111 yes no 2026-03-03T13:10:00+01:00 yes https://vueschool.io/lessons/get-organized-with-reusable-pinia-colada-mutations 2026-05-09 monthly 0.8 aV5eYqf0vUvFsKDDJm7FoaYVI07MPzoNSu6o7vkI.png Get Organized with Reusable Pinia Colada Mutations Video Lesson # Description https://player.vimeo.com/video/ 349 yes no 2026-03-03T13:10:00+01:00 yes https://vueschool.io/lessons/mutate-vs-mutateasync-mutation-functions-in-pinia-colada 2026-05-09 monthly 0.8 Ibg593qdUfSAJx8OPm6CoISETv7eApnwFf6Vhgiz.png Mutate vs mutateAsync Mutation Functions in Pinia Colada Video Lesson In this lesson, learn the difference between `mutate` and `mutateAsync`. Prefer using `mutate` whenever you can and only reach for `mutateAsync` as a workaround for awaiting the mutations completion. https://player.vimeo.com/video/ 89 yes no 2026-03-10T13:00:00+01:00 yes https://vueschool.io/lessons/paginated-queries-in-pinia-colada 2026-05-09 monthly 0.8 hHenIpLcxOxCtUjxoZC22TOB5umrc34XvHrPN5Si.png Paginated Queries in Pinia Colada Video Lesson In this lesson, learn how to fetch and manage paginated list data with Pinia Colada. It boils down to an element for the page in the query key. Pretty simple! But, adding in the `placeholderData` q... https://player.vimeo.com/video/ 309 yes no 2026-03-10T13:00:00+01:00 yes https://vueschool.io/lessons/pinia-colada-plugins 2026-05-09 monthly 0.8 GvGPxMIwkaJpqetNqtrnfz9sh9IFWQZRtGwKASvK.png Pinia Colada Plugins Video Lesson Pinia Colada support for plugins makes bundling common data fetching needs a breeze. Official plugins include: Query Hooks, Retry, Auto Refetch, Delay, and Cache Persister. https://player.vimeo.com/video/ 144 yes no 2026-03-10T13:00:00+01:00 yes https://vueschool.io/lessons/pinia-colada-challenge-solution-mutations 2026-05-09 monthly 0.8 h02fXdW1D9HS66xTHNL7RZJXa4RVyWpu7ONU1qtP.png Pinia Colada Challenge Solution (Mutations) Video Lesson In this lesson, we look at the solution for the task manager challenge. Specifically, we see how `useMutation` is used to create new tasks, update existing tasks, and delete tasks. https://player.vimeo.com/video/ 615 yes no 2026-03-17T13:00:00+01:00 yes https://vueschool.io/courses/ai-interfaces-with-vue-nuxt-and-the-ai-sdk 2026-05-12 monthly 0.8 https://vueschool.io/lessons/what-is-the-ai-sdk 2026-05-09 monthly 0.8 FcE7KmrDmviQg88NslOKF5qSH4L0tlJzdVjrvixe.png What is the AI SDK? Video Lesson In this lesson, we introduce the AI SDK and walk you through why it’s one of the best tools for adding AI features to your Vue and Nuxt applications. Core features of the AI SDK include: https://player.vimeo.com/video/ 374 yes no 2025-12-16T08:43:00+01:00 no https://vueschool.io/lessons/bootstrap-new-node-project-for-typescript 2026-05-09 monthly 0.8 y1rH55EwvFl2NcVwtH6qXNqKdfJySzaXftNLmroY.png Bootstrap New Node Project for TypeScript Video Lesson In this lesson, setup a new Node.js project for following along with the rest of the course. [Alternatively, you can skip the lesson and download the boilerplate code.](https://github.com/vueschool... https://player.vimeo.com/video/ 356 yes no 2025-12-16T08:43:00+01:00 no https://vueschool.io/lessons/install-the-ai-sdk-and-select-a-provider 2026-05-05 monthly 0.8 KYYVOwXRpnMTK2kWAc8eFJODEBi0lCSRpQ6cStyo.png Install the AI SDK and Select a Provider Video Lesson In this lesson, learn how to install the AI SDK along with the provider of your choice. We will use the Google AI provider because of it’s best-in-class image generation and it’s affordability.... https://player.vimeo.com/video/ 220 yes no 2025-12-16T08:48:00+01:00 no https://vueschool.io/lessons/generate-text-with-the-ai-sdk 2026-05-05 monthly 0.8 7GGMzE2REboe9IwINcf33030RNmYq1gPRuhfX8Ez.png Generate Text with the AI SDK Video Lesson In this lesson, learn how to generate text with the AI SDK and Google Gemini flash 2.5. https://player.vimeo.com/video/ 133 yes no 2025-12-16T08:51:00+01:00 no https://vueschool.io/lessons/text-vs-system-vs-message-prompts 2026-05-05 monthly 0.8 IcxD9TPHVHGO9fTfmvoun6ZVQm9wIyIuB9z3oz5b.png Text vs System vs Message Prompts Video Lesson In this lesson, learn the difference between: https://player.vimeo.com/video/ 330 yes no 2025-12-23T13:00:00+01:00 no https://vueschool.io/lessons/giving-llms-eyes-to-see-your-images 2026-05-05 monthly 0.8 gDR8Oaj7R7Ed3XRUasd22FSIilsmAZpMR7f4v9AG.png Giving LLMs Eyes to See Your Images Video Lesson In this lesson, learn how to pass images (both public and private images) to an LLM along with a prompt. This process opens up a TON of possibilities from auto-generating image alt-text, to extract... https://player.vimeo.com/video/ 213 yes no 2025-12-23T13:00:00+01:00 no https://vueschool.io/lessons/getting-usage-data-with-the-ai-sdk 2026-05-05 monthly 0.8 IdPsAG4tABSt6SdSkHdT4OBTqFfxFTXEFR2cahLd.png Getting Usage Data with the AI SDK Video Lesson In this lesson, learn how to read token usage data from the AI SDK. Token usage data is easy to access and broken down into input and output (you can even see cached vs uncached and thinking vs nor... https://player.vimeo.com/video/ 112 yes no 2025-12-23T13:00:00+01:00 no https://vueschool.io/lessons/prompt-caching-with-the-ai-sdk 2026-05-05 monthly 0.8 q7k1j5FREuu5BL8bMojP4jZMzisLRd63JZlQB5ud.png Prompt Caching with the AI SDK Video Lesson In this lesson, learn what prompt caching is and how it can save you money and latency. Prompt caching comes in 2 flavors: implicit and explicit and exact results depend on the provider and model u... https://player.vimeo.com/video/ 398 yes no 2025-12-23T13:00:00+01:00 yes https://vueschool.io/lessons/generate-structured-data-objects-arrays-etc-with-the-ai-sdk 2026-05-05 monthly 0.8 tPUASw5CLfyrgZLQVifpDVTiZnjMIeA6l4zJjPqi.png Generate Structured Data (Objects, Arrays, etc) with the AI SDK Video Lesson Generating text is a superpower but imagine generating validated structured data. This opens up endless possibilities for AI integrations in many different apps! Use the `generateText` with `Output... https://player.vimeo.com/video/ 320 yes no 2025-12-30T13:00:00+01:00 yes https://vueschool.io/lessons/streaming-text-and-objects-with-the-ai-sdk 2026-05-06 monthly 0.8 4gASlINxxIKuZqxRgfRUxmRBYzFeHlcD5rsAhGuF.png Streaming Text and Objects with the AI SDK Video Lesson In this lesson, learn how to stream text and structured data with the AI SDK. `textStream` is perfect for gradually showing parts of a string message while `partialOutputStream` is great for gradua... https://player.vimeo.com/video/ 256 yes no 2025-12-30T13:00:00+01:00 yes https://vueschool.io/lessons/generating-images-with-the-ai-sdk 2026-05-06 monthly 0.8 3LhTEIDsw6LUZevQzhF7enspH305EEMxun17D9fm.png Generating Images with the AI SDK Video Lesson In this lesson, learn how to generate images with the AI SDK. There are multiple approaches depending on whether you want to use a dedicated image generation model like Google Imagen 4.0 or a multi... https://player.vimeo.com/video/ 389 yes no 2025-12-30T13:00:00+01:00 yes https://vueschool.io/lessons/tool-calling-with-the-ai-sdk 2026-05-06 monthly 0.8 HWfFN0j717yoEzGvg352MHbJAoXof7Cvkyk2rzx4.png Tool Calling with the AI SDK Video Lesson In this lesson, learn how to give LLMs super powers with tools and the AI SDK. Tools give LLMs the ability to run bespoke functions at their discretion with the arguments the modal decides it shoul... https://player.vimeo.com/video/ 485 yes no 2026-01-06T13:00:00+01:00 yes https://vueschool.io/lessons/community-tools-for-common-plug-and-play-functionality 2026-05-29 monthly 0.8 4fkyQc1ebwiofdCt2Ybn9IWrQpedqMR1Rh5mXtiw.png Community Tools for Common Plug-and-Play Functionality Video Lesson In this lesson, learn about some community and model provided tools that you can plug and play into the AI SDK to immediately interact with outside services like Stripe, Twitter, Google Sheets, Goo... https://player.vimeo.com/video/ 271 yes no 2026-01-06T13:00:00+01:00 yes https://vueschool.io/lessons/model-context-protocol-with-the-ai-sdk 2026-05-06 monthly 0.8 KTnXkWQKdg0SE43ApfwPMkKQyLL7UhL06tbEJL58.png Model Context Protocol with the AI SDK Video Lesson In this lesson, learn how to use tools from MCP clients with the AI SDK. See an example of hooking up the Nuxt UI MCP client to the AI SDK. https://player.vimeo.com/video/ 283 yes no 2026-01-06T13:00:00+01:00 yes https://vueschool.io/lessons/start-with-a-template-from-nuxt-ui 2026-05-06 monthly 0.8 dORiK5gz4623GHccXfTZ3aV5G64ojUOAP3olvmyw.png Start with a Template from Nuxt UI Video Lesson In this lesson, get the Nuxt UI Chat template downloaded and setup to run with the AI SDK and Google Gemini Flash so we can start working int the browser. https://player.vimeo.com/video/ 309 yes no 2026-01-13T10:27:00+01:00 yes https://vueschool.io/lessons/streaming-text-with-the-ai-sdk-from-a-nuxt-api-endpoint 2026-05-06 monthly 0.8 bdZnS16MMmYvn6rP8F0zIi9513VfvWVpOm8bKtZB.png Streaming Text with the AI SDK from a Nuxt API Endpoint Video Lesson In this lesson, learn how to stream AI generated text from a Nuxt backend API endpoint to a Vue.js frontend with the AI SDK. One of the key takeaways is that you must use the `convertToModelMessage... https://player.vimeo.com/video/ 340 yes no 2026-01-13T10:36:00+01:00 yes https://vueschool.io/lessons/consuming-ai-sdk-messages-on-the-frontend-with-the-usechat-composable 2026-05-06 monthly 0.8 X3bMJXF2rHJq8qR2eMtocDs6A6kJuZRPLCYEfncV.png Consuming AI SDK Messages on the Frontend with the useChat Composable Video Lesson In this lesson, learn how to manage UI messages on the frontend with the AI SDK `Chat` object. Combined with [Nuxt UI](https://ui.nuxt.com/), this `Chat` object makes quick work of AI Chat interfac... https://player.vimeo.com/video/ 342 yes no 2026-01-20T10:28:00+01:00 yes https://vueschool.io/lessons/how-to-display-chat-message-markdown-text-for-rich-formatting 2026-05-07 monthly 0.8 qIhQduxCmraOn6rnaXPLQznN5k3Hek40UB7uG5Pl.png How to Display Chat Message Markdown Text for Rich Formatting Video Lesson In this lesson, learn how to use the Nuxt MDC module to render AI chatbot markdown responses. The `MDCCached` component takes a value prop of text formatted in `markdown` and outputs rich text HTML. https://player.vimeo.com/video/ 129 yes no 2026-01-20T10:34:00+01:00 yes https://vueschool.io/lessons/display-a-custom-ui-component-for-results-of-a-tool-call 2026-05-07 monthly 0.8 kWALqSbkFLLSUEKIGO5tYNECm44mYIIv0VIAXB9I.png Display a Custom UI Component for Results of a Tool Call Video Lesson In this lesson, learn how the Nuxt UI Chat template uses the AI SDK to to power a generative weather app card. https://player.vimeo.com/video/ 325 yes no 2026-01-20T10:38:00+01:00 no https://vueschool.io/lessons/streaming-objects-from-the-server-for-non-chat-based-interactions 2026-05-07 monthly 0.8 rNxdhKQe26EEFRsqmDTkDynDaDich8CVMiXHjaN0.png Streaming Objects from the Server for Non-Chat Based Interactions Video Lesson In this lesson, learn how to generate and stream objects for use cases beyond chatbots. In this example, we generate a list of users and stream them to the front-end. https://player.vimeo.com/video/ 468 yes no 2026-01-27T15:21:00+01:00 yes https://vueschool.io/lessons/course-conclusion-13 2026-05-07 monthly 0.8 3HlG7HLqog1vqgGfqB8NNT0Bn2ZJdZT9yUWCmlsH.png Course Conclusion Video Lesson Thanks for watching! https://player.vimeo.com/video/ 60 yes no 2026-02-03T11:00:00+01:00 yes https://vueschool.io/lessons/describe-object-properties-for-more-control 2026-05-05 monthly 0.8 9nkzWWZboeEblO3cgC2fZpoPdZ9RJxHRuOHvhcvu.png Describe Object Properties for More Control Video Lesson In this lesson, learn how to annotate your output schema’s with the describe function with more information (and more) to constrain the LLM output for even more control. https://player.vimeo.com/video/ 297 yes no 2025-12-30T13:00:00+01:00 yes https://vueschool.io/lessons/the-ai-sdk-devtools 2026-05-06 monthly 0.8 kxvj1giQDle0JgIP5U4PPBxkcEf7BxSml2JJCyL2.png The AI SDK Devtools Video Lesson In this lesson, we install the AI SDK devtools to better inspect our interactions with LLMs. With it we can view both the input and the output to functions like `streamText` and `generateText` as w... https://player.vimeo.com/video/ 213 yes no 2026-01-13T10:31:00+01:00 yes https://vueschool.io/lessons/title-generation-from-backend-to-frontend 2026-05-06 monthly 0.8 hnpxpBgSqR5Y5R3vZIlqqFj5hexJqCE3AmWcm318.png Title Generation from Backend to Frontend Video Lesson In this lesson, we examine how the Nuxt Chat template uses the AI SDK to coordinate chat title generations from the backend to the frontend. https://player.vimeo.com/video/ 213 yes no 2026-01-13T10:40:00+01:00 yes https://vueschool.io/lessons/run-tools-on-the-client-side-with-the-ai-sdk 2026-05-07 monthly 0.8 aclHkGi5uEbb4yzCdkjLl33dTsWGveHqxsRDobqP.png Run Tools on the Client Side with the AI SDK Video Lesson In this lesson, learn how to run tool calls on the client side with the AI-SDK. This is useful for getting information or triggering actions that must happen in the user’s browser. For example: https://player.vimeo.com/video/ 237 yes no 2026-01-21T14:41:00+01:00 yes https://vueschool.io/lessons/a-practical-look-at-object-streaming-for-chatgpt-style-prompt-suggestions 2026-05-07 monthly 0.8 yAY3qZQmxtcOOgdLwTCpZTmdPeoNRbtGAz1a9HYq.png A Practical Look at Object Streaming for ChatGPT-Style Prompt Suggestions Video Lesson In this lesson, generate an array (structured data) on the Nuxt backend for use on the frontend chatbot. Generated array items are autocomplete suggestions for users typing into the new chat prompt... https://player.vimeo.com/video/ 785 yes no 2026-01-27T15:25:00+01:00 yes https://vueschool.io/lessons/the-usecompletion-composable-for-non-chat-based-plain-text-streaming 2026-05-07 monthly 0.8 rauueXAMIh3FjVVp7AZ20nOZXGwaAmZRbh1Qohjl.png The useCompletion Composable for Non-Chat Based Plain Text Streaming Video Lesson In this lesson, learn how to stream text to the frontend for use cases outside of a chat application that do NOT require structured data. The `useCompletion` composable is great for this! https://player.vimeo.com/video/ 194 yes no 2026-02-03T11:00:00+01:00 yes https://vueschool.io/lessons/observability-with-the-vercel-ai-gateway 2026-05-07 monthly 0.8 1BW7QNvRLoRFgeUAqlrnEpYF7yHEQedcO5Y1mU5h.png Observability with the Vercel AI Gateway Video Lesson In this lesson, learn how to utilize the Vercel AI gateway as an all in one solution for connecting to multiple LLM providers and observing costs, latency, tokens, and more all in one place. https://player.vimeo.com/video/ 152 yes no 2026-02-03T11:00:00+01:00 yes https://vueschool.io/courses/nuxt-ui-build-a-dashboard-template 2026-05-12 monthly 0.8 https://vueschool.io/lessons/what-is-nuxt-ui 2026-05-10 monthly 0.8 What is Nuxt UI? Video Lesson [Nuxt UI](https://ui.nuxt.com/) is a completely free and open source component library created and maintained by [Nuxt Labs](https://github.com/nuxtlabs). It’s build on top of [Tailwind CSS](http... https://player.vimeo.com/video/ 279 yes no 2025-10-15T16:54:00+02:00 no https://vueschool.io/lessons/boot-up-a-nuxt-ui-project-from-a-template-and-editor-setup 2026-05-10 monthly 0.8 Boot Up a Nuxt UI Project from a Template and Editor Setup Video Lesson In this lesson, we boot up a Nuxt UI dashboard project starting with an official template. We also setup our IDE (for me that’s [Cursor](https://cursor.com/) but it could also be [VS Code](https:... https://player.vimeo.com/video/ 592 yes no 2025-10-15T16:58:00+02:00 no https://vueschool.io/lessons/the-nuxt-design-system 2026-05-10 monthly 0.8 The Nuxt Design System Video Lesson Learn how to master the **Nuxt Design System**—built on **Tailwind CSS**—and customize it to match your brand. In this lesson, you’ll explore overriding Tailwind colors and creating custom co... https://player.vimeo.com/video/ 457 yes no 2025-10-15T17:00:00+02:00 no https://vueschool.io/lessons/semantic-colors-as-props-and-adding-custom-semantic-colors 2026-05-10 monthly 0.8 Semantic Colors as Props and Adding Custom Semantic Colors Video Lesson In this lesson, learn how to use the Nuxt UI semantic colors with the `color` prop. This prop exists on many components making it easy to control the colors of different UI elements. Even without t... https://player.vimeo.com/video/ 154 yes no 2025-10-15T17:02:00+02:00 no https://vueschool.io/lessons/customize-the-semantic-color-shades 2026-05-10 monthly 0.8 Customize the Semantic Color Shades Video Lesson In this lesson, learn how to customize the shade used for the Nuxt UI semantic color tokens. https://player.vimeo.com/video/ 79 yes no 2025-10-21T09:08:00+02:00 yes https://vueschool.io/lessons/styling-nuxt-ui-component-slots 2026-05-11 monthly 0.8 Styling Nuxt UI Component Slots Video Lesson In this lesson, learn how to add style Nuxt UI component slots with Tailwind CSS classes via the `ui` prop. This is possible, not only at the component level, but at a global level enabling robust... https://player.vimeo.com/video/ 174 yes no 2025-10-21T09:11:00+02:00 yes https://vueschool.io/lessons/nuxt-ui-simple-component-variants 2026-05-11 monthly 0.8 Nuxt UI Simple Component Variants Video Lesson In this lesson, learn to customize component styles based on the props they take in. These are known as variants. They work much like adding classes to slots at the global level, but only apply whe... https://player.vimeo.com/video/ 145 yes no 2025-10-21T09:19:00+02:00 yes https://vueschool.io/lessons/nuxt-ui-compound-variants 2026-05-11 monthly 0.8 Nuxt UI Compound Variants Video Lesson In this lesson, learn how to apply Tailwind CSS classes to Nuxt UI component slots based on a **combination** of props. This level of control, makes it easy to create themes that are just right. https://player.vimeo.com/video/ 110 yes no 2025-10-28T08:08:00+01:00 yes https://vueschool.io/lessons/dynamic-variants-for-robust-theme-switching-in-nuxt-ui 2026-05-11 monthly 0.8 Dynamic Variants for Robust Theme Switching in Nuxt UI Video Lesson In this lesson, learn how to dynamically set the ui in app config to support robust theme switching. The strategy is quite simple: https://player.vimeo.com/video/ 304 yes no 2025-10-28T08:10:00+01:00 yes https://vueschool.io/lessons/nuxt-ui-slideover-as-a-member-edit-page-and-how-to-open-the-slideover-with-triggers-in-a-loop 2026-05-11 monthly 0.8 Nuxt UI Slideover as a Member Edit Page (and How to Open the Slideover with Triggers in a Loop) Video Lesson In this lesson, we use the Nuxt UI `Slideover` component to show an edit form (or at least a place where the edit form will go soon) when a “Edit Member” item is selected from a `UDropDownMenu`... https://player.vimeo.com/video/ 515 yes no 2025-10-28T08:15:00+01:00 yes https://vueschool.io/lessons/nuxt-ui-avatar-component-formfield-for-an-avatar-chooser 2026-05-11 monthly 0.8 Nuxt UI Avatar Component + FormField for an Avatar Chooser Video Lesson In this lesson, learn how to make a custom form field in a Nuxt UI project, that works alongside Nuxt UI’s built in form validation. Specifically, we use a combination of the `UDropdownMenu`, `UB... https://player.vimeo.com/video/NA 571 yes no 2025-11-11T14:12:00+01:00 yes https://vueschool.io/lessons/other-nuxt-ui-form-fields 2026-05-11 monthly 0.8 Other Nuxt UI Form Fields Video Lesson In this lesson, we browse the official Nuxt UI docs and take stock of what form field inputs are available and the different ways you can customize them with common and field-specific props. https://player.vimeo.com/video/NA 664 yes no 2025-11-11T14:16:00+01:00 yes https://vueschool.io/lessons/beautiful-and-actionable-empty-states-with-nuxt-ui 2026-05-12 monthly 0.8 Beautiful and Actionable Empty States with Nuxt UI Video Lesson In this lesson, learn how to display intuitive and actionable empty states for lists that don’t have any items available. With the Nuxt UI `Emtpy` component available in Nuxt UI v4.1.0 and above,... https://player.vimeo.com/video/NA 315 yes no 2025-11-11T14:16:00+01:00 yes https://vueschool.io/lessons/ai-agent-super-powers-with-the-nuxt-ui-mcp-server 2026-05-12 monthly 0.8 AI Agent Super Powers with the Nuxt UI MCP Server Video Lesson In this lesson, learn how the Nuxt UI MCP server can boost your productivity when building with Nuxt and Nuxt UI. It keeps you from bouncing back and forth to Nuxt UI docs but more importantly give... https://player.vimeo.com/video/NA 483 yes no 2025-11-11T14:16:00+01:00 yes https://vueschool.io/lessons/nuxt-ui-table-basics-and-generating-a-posts-table-with-ai 2026-05-12 monthly 0.8 Nuxt UI Table Basics and Generating a Posts Table with AI Video Lesson In this lesson, learn the basics of using Nuxt Tables like how to provide data for the rows, how to customize column headings and table cell displays and more. Also generate a posts table with AI f... https://player.vimeo.com/video/NA 594 yes no 2025-11-18T14:16:00+01:00 yes https://vueschool.io/lessons/nuxt-ui-server-side-table-search 2026-05-12 monthly 0.8 Nuxt UI Server Side Table Search Video Lesson In this lesson, learn how to search Nuxt tables with a request that goes back to the server side. This is the best approach for tables with large amounts of data (50+ rows). It let’s the database... https://player.vimeo.com/video/NA 213 yes no 2025-11-18T14:16:00+01:00 yes https://vueschool.io/lessons/nuxt-ui-server-side-table-sorting 2026-05-12 monthly 0.8 Nuxt UI Server Side Table Sorting Video Lesson In this lesson, learn how to sort Nuxt UI table data via column on the server side. https://player.vimeo.com/video/NA 316 yes no 2025-11-18T14:16:00+01:00 yes https://vueschool.io/lessons/nuxt-ui-server-side-pagination 2026-05-12 monthly 0.8 Eje6TwL1eeV5JWRbpIlPdBzBi0OOcycjJj3z8OcA.png Nuxt UI Server-Side Pagination Video Lesson In this video, learn how to handle server-side pagination for the data in a Nuxt UI table. The Nuxt UI pagination component, handles the UI element of the feature while query variables in your API... https://player.vimeo.com/video/NA 507 yes no 2025-11-25T14:16:00+01:00 yes https://vueschool.io/lessons/nuxt-ui-infinite-scroll-tables 2026-05-12 monthly 0.8 9dZJjz2CEv8NEfl24WvJr424kEfXeDE3rA1e1JNx.png Nuxt UI Infinite Scroll Tables Video Lesson In this lesson, learn how to implement infinite scroll with a Nuxt UI table and the [VueUse `useInfiniteScroll` composable](https://vueschool.io/lessons/scroll-and-vueuse). https://player.vimeo.com/video/NA 301 yes no 2025-11-25T14:17:00+01:00 yes https://vueschool.io/lessons/handling-the-intersection-of-sort-query-and-filters-with-infinite-scroll-nuxt-ui-tables 2026-05-12 monthly 0.8 sBIgqaRGM6dl6ov1x29AuujLuaW5AxpVytKJaq3T.png Handling The Intersection of Sort, Query, and Filters with Infinite Scroll Nuxt UI Tables Video Lesson In this lesson, learn how to make infinite scroll work with sort, query, and other filters. It’s a little tricky as you must distinguish between when posts should be added to the data array vs wh... https://player.vimeo.com/video/NA 404 yes no 2025-11-25T14:17:00+01:00 yes https://vueschool.io/lessons/the-nuxt-ui-blogpost-component 2026-05-12 monthly 0.8 5R1d85H33MkDBnaQeDzBnD1aFNvbbZv4OcUAbqrg.png The Nuxt UI BlogPost Component Video Lesson In this lesson, learn how to display blog posts in NuxtUI with the `BlogPosts` and `BlogPost` component. Also use a `FieldGroup` to visually group buttons. https://player.vimeo.com/video/NA 445 yes no 2025-12-02T14:17:00+01:00 yes https://vueschool.io/lessons/course-conclusion-12 2026-05-12 monthly 0.8 Course Conclusion Video Lesson Thanks for watching! We hope you enjoyed the course! https://player.vimeo.com/video/ 128 yes no 2025-12-09T14:17:00+01:00 yes https://vueschool.io/lessons/nuxt-ui-slideover-state-based-on-routes 2026-05-11 monthly 0.8 Nuxt UI Slideover State Based on Routes Video Lesson In this lesson, we update the route whenever the slideover opens so that editing a member can be navigated to directly. This is a little tricky but with the combination of a catch all route and a l... https://player.vimeo.com/video/ 224 yes no 2025-11-04T09:05:00+01:00 yes https://vueschool.io/lessons/how-nuxt-ui-makes-a11y-a-little-easier 2026-05-11 monthly 0.8 How Nuxt UI Makes a11y a Little Easier Video Lesson In this lesson, see how Nuxt UI surfaces accessibility (a11y) issues in the form of console warnings. Using a robust library like Nuxt UI goes a long way to help you develop accessible apps with pr... https://player.vimeo.com/video/ 126 yes no 2025-11-04T09:09:00+01:00 yes https://vueschool.io/lessons/create-a-member-edit-form-with-nuxt-ui 2026-05-11 monthly 0.8 Create a Member Edit Form with Nuxt UI Video Lesson In this lesson, learn how to work with forms in Nuxt UI. They are simple to use and come with many built in options for validation including: zod, valibot and more. Also see how the `useToast` comp... https://player.vimeo.com/video/ 898 yes no 2025-11-04T09:11:00+01:00 yes https://vueschool.io/lessons/nuxt-ui-skeleton-loaders 2026-05-12 monthly 0.8 dGS4p5qp3Bx1MqfYj77SoqbVNSi0Gp6hBKd2ouHC.png Nuxt UI Skeleton Loaders Video Lesson In this lesson, enhance the loading state of our blog post cards with skeleton loaders. https://player.vimeo.com/video/ 339 yes no 2025-12-02T10:47:00+01:00 yes https://vueschool.io/lessons/mixing-skeleton-loaders-for-data-replacement-with-spinners-for-infinite-scroll 2026-05-12 monthly 0.8 MZJwhLICGH9cGQR9gmu4zl6UulCJvE8HM0l4IJaY.png Mixing Skeleton Loaders for Data Replacement with Spinners for Infinite Scroll Video Lesson In this lesson, I refactor our posts page to break better organize the posts card view and support displaying the skeleton loaders only when data is being replaced. When data is appended we display... https://player.vimeo.com/video/ 618 yes no 2025-12-02T10:48:00+01:00 yes https://vueschool.io/lessons/nuxt-ui-layouts 2026-05-12 monthly 0.8 zPWLmfow3MLmyl0IwKZARb9Pa8aS6PxoGtXo2DI3.png Nuxt UI Layouts Video Lesson In this lesson, take a trip though some of the Nuxt UI docs codebase to see how they use various Nuxt UI components to achieve different page layouts. Layouts take advantage of components like UPag... https://player.vimeo.com/video/ 835 yes no 2025-12-09T10:39:00+01:00 yes https://vueschool.io/lessons/nuxt-ui-charts 2026-05-12 monthly 0.8 yEAtr2RhZfaKFFAOgg3ACJpupdZWddbsA1FIRyct.png Nuxt UI Charts Video Lesson In this lesson, learn how easy it is to add charts to your Nuxt UI apps with Nuxt Charts. It includes support for Line Charts, Bar Charts, Donut Charts, and more! https://player.vimeo.com/video/ 277 yes no 2025-12-09T10:39:00+01:00 no https://vueschool.io/lessons/overriding-nuxtimg-with-image-skeleton-loaders-and-color-mode-components 2026-05-12 monthly 0.8 HDqJPfPqD012turTz1Sec7GSL3AGIro7fGgOBVZz.png Overriding NuxtImg with Image Skeleton Loaders and Color Mode Components Video Lesson In this lesson, learn how to override the NuxtImg component to layer your own functionality on top of what Nuxt Image provides out of the box. Why? So that we can display a NuxtUI Skeleton componen... https://player.vimeo.com/video/ 504 yes no 2025-12-09T09:39:00+01:00 yes https://vueschool.io/courses/authoring-nuxt-layers-build-a-custom-email-layer-2 2026-05-12 monthly 0.8 https://vueschool.io/lessons/introduction-to-nuxt-layers 2026-05-12 monthly 0.8 Introduction to Nuxt Layers Video Lesson Nuxt layers are a powerful way to share code between multiple Nuxt projects. In this course, we’ll teach you the basics of Nuxt layers and then break down a real world email layer to see advanced... https://player.vimeo.com/video/ 174 yes no 2025-09-03T10:45:00+02:00 no https://vueschool.io/lessons/bootstrapping-a-new-nuxt-layer 2026-05-12 monthly 0.8 Bootstrapping a New Nuxt Layer Video Lesson The Nuxt Authoring guide is a great resource for bootstrapping a new Nuxt layer. It includes a quick explanation of how layers work and provides an npm command for bootstrapping a new layer. https://player.vimeo.com/video/ 347 yes no 2025-09-03T10:48:00+02:00 no https://vueschool.io/lessons/imports-in-nuxt-layers 2026-05-13 monthly 0.8 Imports in Nuxt Layers Video Lesson When dealing with imports in Nuxt layers, some ways work sometimes, other ways don’t work at all, and one way works all the time. Learn the best method for writing import statements in Nuxt layer... https://player.vimeo.com/video/ 253 yes no 2025-09-03T10:52:00+02:00 no https://vueschool.io/lessons/configuring-nuxt-layers 2026-05-13 monthly 0.8 Configuring Nuxt Layers Video Lesson Just like modules, it’s useful to expose configuration options for layers. Such layer options can be defined via 2 primary methods: https://player.vimeo.com/video/ 241 yes no 2025-09-09T11:06:00+02:00 no https://vueschool.io/lessons/composing-multiple-layers 2026-05-13 monthly 0.8 Composing Multiple Layers Video Lesson In this lesson, learn to compose multiple Nuxt layers together and prioritize them appropriately via the ordering in the extends option. Layers can be composed via the end application’s extend op... https://player.vimeo.com/video/ 396 yes no 2025-09-09T11:09:00+02:00 yes https://vueschool.io/lessons/base-nuxt-layers 2026-05-13 monthly 0.8 Base Nuxt Layers Video Lesson Base Nuxt layers are commonly used to provide a tightly coupled foundation for multiple Nuxt applications and/or other Nuxt layers. They serve as the central repository for on-brand UI and common u... https://player.vimeo.com/video/ 178 yes no 2025-09-09T11:15:00+02:00 yes https://vueschool.io/lessons/layer-hooks-with-unjs-hookable 2026-05-13 monthly 0.8 Layer Hooks with Unjs Hookable Video Lesson In this lesson, learn how to better communicate across Nuxt layers with hooks. The [hookable library from Unjs](https://github.com/unjs/hookable), provides a great framework for adding an “event-... https://player.vimeo.com/video/ 394 yes no 2025-09-16T10:06:00+02:00 yes https://vueschool.io/lessons/publishing-nuxt-layers 2026-05-13 monthly 0.8 Publishing Nuxt Layers Video Lesson In this lesson, learn how to distribute Nuxt layers via Github or npm or easy installation across multiple Nuxt projects. https://player.vimeo.com/video/ 279 yes no 2025-09-16T10:08:00+02:00 yes https://vueschool.io/lessons/domain-driven-design-with-nuxt-layers 2026-05-13 monthly 0.8 Domain Driven Design with Nuxt Layers Video Lesson In this lesson, let’s talk about organizing code by “domain” with layers. Domain driven design is a project structure strategy that groups all code dealing with a similar app “domain” (th... https://player.vimeo.com/video/ 114 yes no 2025-09-16T10:11:00+02:00 yes https://vueschool.io/lessons/hello-nuxt-email-layer 2026-05-13 monthly 0.8 Hello Nuxt Email Layer Video Lesson In this lesson, let’s get a high level overview of the Nuxt email layer features before diving into how they work. Feel free to use this layer in your own projects, though currently I would recom... https://player.vimeo.com/video/ 309 yes no 2025-09-23T10:40:00+02:00 yes https://vueschool.io/lessons/the-email-layer-mono-repo-setup 2026-05-13 monthly 0.8 The Email Layer Mono Repo Setup Video Lesson In this lesson, take a look at the pnpm monorepo I setup for the email layer. By no means is it required to develop your own layers as a monorepo but this setup worked well for me, giving me easy a... https://player.vimeo.com/video/ 136 yes no 2025-09-23T10:51:00+02:00 yes https://vueschool.io/lessons/create-docs-for-the-email-layer 2026-05-13 monthly 0.8 Create Docs for the Email Layer Video Lesson In this lesson, see how you can utilize AI to help write docs for your Nuxt Layer. Also choose a fancy docs template from the official Nuxt templates page to start with something beautiful and func... https://player.vimeo.com/video/ 626 yes no 2025-09-23T11:05:00+02:00 yes https://vueschool.io/lessons/course-conclusion-11 2026-05-13 monthly 0.8 Course Conclusion Video Lesson Thanks for watching! Nuxt layers are a powerful abstraction for creating re-usable functionality across your apps. What will you do with them? https://player.vimeo.com/video/ 96 yes no 2025-10-07T10:44:00+02:00 yes https://vueschool.io/lessons/create-mail-providers-drivers-for-a-nuxt-layer 2026-05-13 monthly 0.8 Create Mail Providers/Drivers for a Nuxt Layer Video Lesson In this video, learn how to create mail drivers (ie. providers) within the Nuxt email layer. The driver pattern demonstrated here is useful for all kinds of scenarios in your own Nuxt layers. https://player.vimeo.com/video/ 585 yes no 2025-10-07T10:34:00+02:00 yes https://vueschool.io/lessons/listen-for-email-events-with-hooks 2026-05-13 monthly 0.8 Listen for Email Events with Hooks Video Lesson In this lesson, learn how a custom hook implementation can be useful for your layers. Hookable is great but it doesn’t allow for typesafe filtering or mutations of hook payloads. https://player.vimeo.com/video/ 461 yes no 2025-10-07T10:36:00+02:00 yes https://vueschool.io/lessons/add-mailcatcher-devtools-to-the-email-layer 2026-05-13 monthly 0.8 Add Mailcatcher Devtools to the Email Layer Video Lesson In this lesson, learn how ship custom devtools with your layer for the ultimate developer experience. It’s a lot easier than you think! Custom devtools panels are nothing more than iframes that c... https://player.vimeo.com/video/ 513 yes no 2025-10-07T10:38:00+02:00 no https://vueschool.io/lessons/install-vueemail-via-the-email-layer-for-inbox-safe-emails 2026-05-13 monthly 0.8 Install VueEmail Via the Email Layer for Inbox-Safe Emails Video Lesson In this lesson, learn how the VueEmail library adds templating functionality to our custom email layer. VueEmail provides a collection of email client safe Vue components to build email templates w... https://player.vimeo.com/video/ 264 yes no 2025-10-07T10:41:00+02:00 yes https://vueschool.io/courses/shadcn-vue-modern-uis-with-minimal-effort 2026-05-12 monthly 0.8 https://vueschool.io/lessons/what-is-shadcn-vue 2026-05-04 monthly 0.8 What is ShadCN Vue? Video Lesson ShadCN Vue is a component library with a unique installation and maintenance approach. Instead of being installed as a dependency, you run a command to copy and paste the source code of each compon... https://player.vimeo.com/video/ 252 yes no 2025-08-05T10:53:00+02:00 no https://vueschool.io/lessons/install-shadcn-vue 2026-05-04 monthly 0.8 Install ShadCN Vue Video Lesson In this lesson, learn how to install ShadCN Vue in a new Vue + Vite project. Learn how to use the shadcn cli commands to install components. Verify everything is working by displaying a button to t... https://player.vimeo.com/video/ 363 yes no 2025-08-05T10:55:00+02:00 no https://vueschool.io/lessons/buttons-variants-and-the-as-child-prop-with-shadcn-vue 2026-05-04 monthly 0.8 Buttons, Variants, and the as-child Prop with ShadCN Vue Video Lesson In this lesson, let’s take a closer look at the button component. In the process, learn about the common `variant` prop for changing the look (style, color, etc) of many components. Many trigger-... https://player.vimeo.com/video/ 211 yes no 2025-08-05T10:58:00+02:00 no https://vueschool.io/lessons/shadcn-vue-blocks-for-fast-uis 2026-05-04 monthly 0.8 ShadCN Vue Blocks for Fast UIs Video Lesson In this lesson, learn how to bootstrap common UIs quickly with Shadcn blocks. Blocks are installed and used just like Shadcn components but are full fledged UIs for common use cases like login page... https://player.vimeo.com/video/ 211 yes no 2025-08-12T10:32:00+02:00 no https://vueschool.io/lessons/auto-formatting-shadcn-components 2026-05-04 monthly 0.8 Auto Formatting ShadCN Components Video Lesson ShadCN components are not installed with code formatted to your project standards. In this lesson, learn how to run your projects formatter to update the installed ShadCN components to meet project... https://player.vimeo.com/video/ 67 yes no 2025-08-12T10:34:00+02:00 no https://vueschool.io/lessons/dialogs-and-alerts-with-shadcn-vue 2026-05-04 monthly 0.8 Dialogs and Alerts with ShadCN Vue Video Lesson In this lesson, take a look at Alerts, Alert Dialogs, and Dialogs. Learn how they make your app more accessible, how to use them, and when to choose which one. https://player.vimeo.com/video/ 628 yes no 2025-08-12T10:37:00+02:00 no https://vueschool.io/lessons/forms-and-form-validation-with-shadcn-vue 2026-05-04 monthly 0.8 Forms and Form Validation with ShadCN Vue Video Lesson In this lesson, learn how to combine vee-validate, zod, and the Shadcn Vue Form component for robust, validated forms. Validation rules and messages can be customized via the zod schema and error f... https://player.vimeo.com/video/ 546 yes no 2025-08-19T10:47:00+02:00 no https://vueschool.io/lessons/use-ai-to-create-a-user-settings-form 2026-05-04 monthly 0.8 Use AI to Create a User Settings Form Video Lesson In this video, let’s demo how well AI is at creating UI’s with Shadcn Vue. We’ll use a single prompt to create an impressive account settings form in less than a minute with functioning valid... https://player.vimeo.com/video/ 255 yes no 2025-08-19T10:51:00+02:00 no https://vueschool.io/lessons/sidebars-in-shadcn-vue 2026-05-04 monthly 0.8 Sidebars in ShadCN Vue Video Lesson In this lesson, let’s take a look at the Shadcn Vue sidebar component. It is an essential component for modern day dashboards and comes packed with features out of the box including: https://player.vimeo.com/video/ 702 yes no 2025-08-19T10:54:00+02:00 no https://vueschool.io/lessons/data-tables-and-sonner-in-shadcn-vue 2026-05-04 monthly 0.8 Data Tables and Sonner in ShadCN Vue Video Lesson In this lesson, we take a brief look at data tables and then dive deeply into the ShadCN Sonner component for displaying transient toast messages. With Sonner, you can display toasts that disappear... https://player.vimeo.com/video/ 605 yes no 2025-08-26T10:22:00+02:00 no https://vueschool.io/lessons/theming-with-shadcn-vue 2026-05-04 monthly 0.8 Theming with ShadCN Vue Video Lesson In this lesson, learn how to wield css variables to easily theme ShadCN Vue for you needs. CSS variables can be used in a TailwindCSS theme to generate easy to use classes such as `bg-warning` and... https://player.vimeo.com/video/ 384 yes no 2025-08-26T10:25:00+02:00 no https://vueschool.io/lessons/dark-mode-with-shadcn-vue 2026-05-04 monthly 0.8 Dark mode with ShadCN Vue Video Lesson In this lesson, learn how to combine VueUse with ShadCN to support a dark mode toggle and even full fledged custom theme selection. https://player.vimeo.com/video/ 308 yes no 2025-08-26T10:31:00+02:00 no https://vueschool.io/lessons/course-conclusion-10 2026-05-04 monthly 0.8 Course Conclusion Video Lesson Thanks for watching! If you have any questions, comments, concerns, or just want to chat feel free to reach out to us using the comment section or the links below. https://player.vimeo.com/video/ 91 yes no 2025-08-26T10:34:00+02:00 no https://vueschool.io/lessons/sidebars-in-shadcn-vue-continued 2026-05-04 monthly 0.8 Sidebars in ShadCN Vue (continued) Video Lesson In this lesson, we continue exploring the Shadcn Vue Sidebar component. It’s an extremely powerful and extendable component. You can add sticky headers and footers to display dropdowns or any oth... https://player.vimeo.com/video/ 411 yes no 2025-08-19T10:59:00+02:00 no https://vueschool.io/courses/building-shader-effects-in-vue 2026-05-12 monthly 0.8 https://vueschool.io/lessons/an-intro-to-webgl-shaders 2026-05-01 monthly 0.8 https://i.vimeocdn.com/video/2034575713-2bb2a86795f71e659805c8d4ea6850abc1d23429b4d06c94f46c4eda2c95467f-d_1280x720?&r=pad&region=us An intro to WebGL Shaders Video Lesson In this lesson, we’ll introduce the GPU and take a look at why shaders are a powerful tool for creating high-performance visuals in the browser. You’ll learn what vertex and fragment shaders ac... https://player.vimeo.com/video/ 173 yes no 2025-07-08T10:28:00+02:00 yes https://vueschool.io/lessons/anatomy-of-a-vertex-shader 2026-04-28 monthly 0.8 https://i.vimeocdn.com/video/2034577104-f5570f327b23e6eeee8a3c505a00e7246d79c4a1d3aeea4950edce875d5f17a6-d_1280x720?&r=pad&region=us Anatomy of a vertex shader Video Lesson Learn how to write a minimal vertex shader that renders a full-screen triangle — the foundation for nearly all 2D shader effects. We’ll walk through clip space, UV coordinates, and per-vertex d... https://player.vimeo.com/video/ 232 yes no 2025-07-08T10:31:00+02:00 yes https://vueschool.io/lessons/anatomy-of-a-fragment-shader 2026-04-28 monthly 0.8 https://i.vimeocdn.com/video/2034577777-5c572070bd2d6ba8c02d439f28b5417926e2117fa87fac7b86cc7255d00f9813-d_1280x720?&r=pad&region=us Anatomy of a fragment shader Video Lesson In this lesson, we break down the structure of a minimal fragment shader — the part of your WebGL program that runs once per pixel. You’ll learn how to use varyings like v_uv, assign colors usi... https://player.vimeo.com/video/ 264 yes no 2025-07-08T10:33:00+02:00 yes https://vueschool.io/lessons/bootstrapping-a-webgl-vue-component 2026-04-28 monthly 0.8 https://i.vimeocdn.com/video/2034578421-0deea69eb3cc9657b6ebc6fc2699f35381792dce9760ece163779c9aace72bc6-d_1280x720?&r=pad&region=us Bootstrapping a WebGL Vue component Video Lesson In this lesson, we’ll build our first WebGL-powered Vue component from scratch. You’ll learn how to set up a canvas element, import raw GLSL shader files, and initialize a WebGL2 rendering cont... https://player.vimeo.com/video/ 528 yes no 2025-07-08T10:37:00+02:00 yes https://vueschool.io/lessons/an-introduction-to-uniforms 2026-04-28 monthly 0.8 https://i.vimeocdn.com/video/2036976360-80885b9bed213e2d93eb752922414473d8d096099f18d6b71531c3204a9af3cf-d_1280x720?&r=pad&region=us An introduction to uniforms Video Lesson Learn how to make your shaders dynamic by introducing uniforms - variables that pass data from JavaScript to your GPU. You'll add a time-based animation using uTime to create oscillating color effe... https://player.vimeo.com/video/ 437 yes no 2025-07-15T12:12:00+02:00 yes https://vueschool.io/lessons/using-props-as-uniforms 2026-05-01 monthly 0.8 https://i.vimeocdn.com/video/2036976953-883cd47dba48a388c0eacff87cc98711fb1c70a1bf52a657f9d70b4b0f123b2a-d_1280x720?&r=pad&region=us Using props as uniforms Video Lesson Transform your shaders into declarative Vue components by connecting uniforms to reactive props. You'll learn to create props that control shader behavior, use Vue to efficiently update uniforms on... https://player.vimeo.com/video/ 435 yes no 2025-07-15T12:14:00+02:00 yes https://vueschool.io/lessons/using-media-as-texture-uniforms 2026-05-01 monthly 0.8 https://i.vimeocdn.com/video/2036978426-384b3cf7962b9b49874803b0e5f3b5f252f905cc4d3198fb4150b988a6abc007-d_1280x720?&r=pad&region=us Using media as texture uniforms Video Lesson Learn to incorporate images into your shaders using Vue slots and WebGL textures. You'll work with the sampler2D uniform type, handle texture coordinate flipping, and manage asynchronous image load... https://player.vimeo.com/video/ 410 yes no 2025-07-15T12:16:00+02:00 yes https://vueschool.io/lessons/putting-it-all-together-to-build-a-hero-section 2026-05-01 monthly 0.8 https://i.vimeocdn.com/video/2039391116-26a5e2bf41a68a3243421c7106b8be07d0ebed5df75b2477a5e378e693f40891-d_1280x720?&r=pad&region=us Putting it all together to build a hero section Video Lesson Put everything together to create a polished, interactive hero section. Transform your basic shader into a dynamic background with flowing gradients, displacement effects, and mask-based reveals. L... https://player.vimeo.com/video/ 600 yes no 2025-07-22T10:22:00+02:00 yes https://vueschool.io/lessons/alternative-shader-approaches-and-resources 2026-05-01 monthly 0.8 https://i.vimeocdn.com/video/2039392358-10a7a408c3d63c34d58791a4530a254b7ae36f5efea23abc6490e58e512ad4b3-d_1280x720?&r=pad&region=us Alternative shader approaches and resources Video Lesson In this lesson, we'll explore the shader ecosystem beyond our Vue components. You'll discover community resources like Shadertoy for learning and inspiration, get a preview of WebGPU as the future... https://player.vimeo.com/video/ 175 yes no 2025-07-22T10:25:00+02:00 yes https://vueschool.io/lessons/a-sneak-peek-at-shaders 2026-05-01 monthly 0.8 https://i.vimeocdn.com/video/2039393362-431ae8e8047dd94bf630dce0d1afaf571f024a54ba88e32fa056b685c27c4bc8-d_1280x720?&r=pad&region=us A sneak peek at “Shaders” Video Lesson https://player.vimeo.com/video/ 322 yes no 2025-07-22T10:30:00+02:00 yes https://vueschool.io/courses/nuxt-auth-utils-secure-simple-and-flexible-logins 2026-05-12 monthly 0.8 https://vueschool.io/lessons/why-authentication-matters-in-nuxt 2026-05-09 monthly 0.8 Why Authentication Matters in Nuxt Video Lesson Hello, and welcome to the course 👋 In this course, we’ll break down user authentication in a Nuxt app step by step. The Nuxt Auth Utils library from Nuxt co-creator Sébastien Chopin is a per... https://player.vimeo.com/video/ 171 yes no 2025-04-30T09:00:00+02:00 no https://vueschool.io/lessons/getting-started-with-nuxt-auth-utils-and-user-sessions 2026-05-09 monthly 0.8 Getting Started with Nuxt Auth Utils and User Sessions Video Lesson In this lesson, learn how to set a session from the server side with information that identifies a user. That session is then encrypted and stored in a HTTPOnly cookie that’s automatically sent w... https://player.vimeo.com/video/ 338 yes no 2025-04-30T09:00:00+02:00 no https://vueschool.io/lessons/social-logins-in-a-nuxt-app-github 2026-05-09 monthly 0.8 Social Logins in a Nuxt App (GitHub) Video Lesson In this lesson, learn to use Nuxt Auth Utils to login with GitHub. You can also do similar with other OAuth providers with the same pattern. https://player.vimeo.com/video/ 471 yes no 2025-04-30T09:00:00+02:00 no https://vueschool.io/lessons/create-login-and-register-forms-with-nuxtui 2026-05-10 monthly 0.8 Create Login and Register Forms with Nuxt UI Video Lesson In this lesson, learn to use Nuxt UI to create a login and register form. Validate Nuxt UI forms with Zod and watch the loggedIn state to redirect to the admin area whenever a user logs in (no matt... https://player.vimeo.com/video/ 191 yes no 2025-06-17T09:00:00+02:00 yes https://vueschool.io/lessons/register-a-user-via-email-password-with-nuxt-auth-utils 2026-05-10 monthly 0.8 Register a User via Email/Password with Nuxt Auth Utils Video Lesson In this lesson, learn how to setup the server side route for handling user registration with email and password. Use Nuxt Auth Utils’ hash password function to store the user’s password in a sa... https://player.vimeo.com/video/ 768 yes no 2025-06-17T09:00:00+02:00 yes https://vueschool.io/lessons/login-a-user-via-email-password-with-nuxt-auth-utils 2026-05-10 monthly 0.8 Login a User via Email/Password with Nuxt Auth Utils Video Lesson In this lesson, create the server side route for logging in via email and password with Nuxt Auth Utils. Utilize the verifyPassword function provided by the library to compare the user’s plain te... https://player.vimeo.com/video/ 482 yes no 2025-06-24T09:00:00+02:00 yes https://vueschool.io/lessons/next-level-security-features-attempt-locks-to-prevent-brute-force-attacks 2026-05-10 monthly 0.8 Next Level Security Features - Attempt Locks to Prevent Brute Force Attacks Video Lesson In this lesson, learn how to keep up with user login attempts to prevent brute force login attacks. Nuxt Auth Utils doesn’t ship with this out of the box but with a new database table and a littl... https://player.vimeo.com/video/ 580 yes no 2025-06-24T09:00:00+02:00 yes https://vueschool.io/lessons/what-are-passkeys 2026-05-10 monthly 0.8 What are Passkeys? Video Lesson In this lesson, learn what passkeys are, how they work, and how they make for an amazing user experience. Under the hood passkeys are nothing more than public/private key pairs verified with a chal... https://player.vimeo.com/video/ 174 yes no 2025-06-24T09:00:00+02:00 yes https://vueschool.io/lessons/getting-started-with-passkeys-and-nuxt-auth-utils 2026-05-10 monthly 0.8 Getting Started with Passkeys and Nuxt Auth Utils Video Lesson In this lesson, get passkey support setup in Nuxt. Set the `auth.webAuthn` setting in `nuxt.config.ts` to true and install the following dependencies: https://player.vimeo.com/video/ 294 yes no 2025-06-24T09:00:00+02:00 yes https://vueschool.io/lessons/register-with-passkeys-in-nuxt-auth-utils 2026-05-10 monthly 0.8 Register with Passkeys in Nuxt Auth Utils Video Lesson In this lesson, learn what the registration flow for passkeys looks like in Nuxt Auth Utils. The defineWebAuthnRegisterEventHandler takes a validateUser function and an onSuccess function. We can u... https://player.vimeo.com/video/ 451 yes no 2025-07-01T09:00:00+02:00 yes https://vueschool.io/lessons/login-with-a-passkey-in-nuxt-auth-utils 2026-05-10 monthly 0.8 Login with a Passkey in Nuxt Auth Utils Video Lesson In this lesson, learn how to setup the login with passkey functionality on the client and on the server. Logging in with a passkey with Nuxt Auth Utils requires very little code to accomplish and t... https://player.vimeo.com/video/ 359 yes no 2025-07-01T09:00:00+02:00 yes https://vueschool.io/lessons/prevent-replay-attacks-with-passkey-challenges 2026-05-10 monthly 0.8 Prevent Replay Attacks with Passkey Challenges Video Lesson In this lesson, learn how to add challenge support to the authentation server side route to prevent replay attacks. https://player.vimeo.com/video/ 87 yes no 2025-07-01T09:00:00+02:00 yes https://vueschool.io/lessons/miscellaneous-nuxt-auth-utils-nuggets 2026-05-10 monthly 0.8 Miscellaneous Nuxt Auth Utils Nuggets Video Lesson In this lesson, we peruse the rest of the Nuxt Auth Utils docs for any items we missed during the rest of the course. Learn how to extend the session with hooks, make SSR requests with `useRequestF... https://player.vimeo.com/video/ 98 yes no 2025-07-01T09:00:00+02:00 yes https://vueschool.io/lessons/setup-page-with-nuxt-ui-to-login-with-github 2026-05-09 monthly 0.8 Setup Page with Nuxt UI to Login with GitHub Video Lesson Learn how to combine Nuxt UI with Nuxt Auth Utils to create a login with Login with GitHub Button that opens in a popup window. https://player.vimeo.com/video/ 191 yes no 2025-06-10T10:31:00+02:00 no https://vueschool.io/lessons/make-user-and-session-data-typesafe-2 2026-05-09 monthly 0.8 Make User and Session Data TypeSafe Video Lesson In this lesson, learn how to make Nuxt Auth Utils user and session objects type safe. https://player.vimeo.com/video/ 83 yes no 2025-06-10T10:34:00+02:00 yes https://vueschool.io/lessons/create-auth-route-middleware-2 2026-05-10 monthly 0.8 Create Auth Route Middleware Video Lesson In this lesson, learn how to create route middleware to prevent access on some routes to user’s who aren’t logged in. https://player.vimeo.com/video/ 329 yes no 2025-06-10T10:38:00+02:00 yes https://vueschool.io/lessons/protect-sensitive-data-in-api-routes-with-requireusersession 2026-05-10 monthly 0.8 Protect Sensitive Data in API Routes with requireUserSession Video Lesson In this lesson, avoid security issues by correctly understanding the role of [route middleware](https://nuxt.com/docs/guide/directory-structure/middleware) and how requireUserSession provides real... https://player.vimeo.com/video/ 254 yes no 2025-06-10T10:43:00+02:00 yes https://vueschool.io/lessons/connect-nuxt-to-an-sqlite-database 2026-05-10 monthly 0.8 Connect Nuxt to an SQLite Database Video Lesson Our auth system thus far is sufficient for many simple use cases, however more complex use cases will require we store some user data on our own servers instead of just in the session cookie. In th... https://player.vimeo.com/video/ 602 yes no 2025-06-17T09:00:00+02:00 yes https://vueschool.io/lessons/store-the-authenticated-user-in-your-database 2026-05-10 monthly 0.8 Store the Authenticated User In Your Database Video Lesson In this lesson, we’ll store the authenticated Github user in the database. Why? So that we can store all users in a central location no matter how they register and so that down the road, you cou... https://player.vimeo.com/video/ 483 yes no 2025-06-17T09:00:00+02:00 yes https://vueschool.io/lessons/conclusion-and-next-steps 2026-05-10 monthly 0.8 Conclusion and Next Steps Video Lesson Thanks for watching! If you have any questions, comments, concerns, or just want to chat feel free to reach out to us using the comment section or the links below. https://player.vimeo.com/video/ 54 yes no 2025-07-01T18:40:00+02:00 yes https://vueschool.io/courses/google-docs-clone-with-ckeditor-in-30-minutes 2026-05-12 monthly 0.8 https://vueschool.io/lessons/intro-to-ckeditor 2026-03-25 monthly 0.8 Intro to CKEditor Video Lesson Discover how to implement a **professional and collaborative rich text editor** in your Vue.js web applications with CKEditor - the same technology powering document editing in enterprise solutions... https://player.vimeo.com/video/ 146 yes no 2025-06-03T09:31:00+02:00 no https://vueschool.io/lessons/get-started-with-ckeditor-in-no-time-with-the-builder 2026-03-25 monthly 0.8 Get Started with CKEditor in No Time with the Builder Video Lesson In this hands-on tutorial, learn how to rapidly deploy a professional document editor in your Vue.js application using [CKEditor's powerful builder.](https://ckeditor.com/ckeditor-5/builder/?utm_ca... https://player.vimeo.com/video/ 517 yes no 2025-06-03T09:35:00+02:00 no https://vueschool.io/lessons/ckeditor-formatting-features-walkthrough 2026-03-25 monthly 0.8 CKEditor Formatting Features Walkthrough Video Lesson In this lesson, we'll explore the robust **text formatting capabilities** of CKEditor that make it a true Google Docs alternative. With zero effort you get all the formatting options you’d expect... https://player.vimeo.com/video/ 126 yes no 2025-06-03T09:38:00+02:00 no https://vueschool.io/lessons/tweaking-ckeditor-styles-to-be-fully-responsive 2026-03-25 monthly 0.8 Tweaking CKEditor Styles to Be Fully Responsive Video Lesson It’s super easy to tweak the CKEditor styles to meet your exact needs. In this lesson, we get it working for all screen sizes with a few lines of CSS and a little JavaScript. https://player.vimeo.com/video/ 171 yes no 2025-06-03T09:40:00+02:00 no https://vueschool.io/lessons/ckeditor-real-time-collaboration-and-customizing-users 2026-03-25 monthly 0.8 CKEditor Real Time Collaboration and Customizing Users Video Lesson In this lesson, we’ll learn how real time collaboration works and how to setup CKEditor with your system’s users. Unlike some solutions, that take in users as component props on the client side... https://player.vimeo.com/video/ 536 yes no 2025-06-03T09:45:00+02:00 no https://vueschool.io/lessons/customize-user-permissions-per-document 2026-03-25 monthly 0.8 Customize User Permissions Per Document Video Lesson In this lesson, learn how to use the document id to identify documents and assign user’s permissions on those docs based on the id. Practically speaking, this means you can grant different permis... https://player.vimeo.com/video/ 238 yes no 2025-06-03T09:47:00+02:00 no https://vueschool.io/lessons/permanently-store-documents-on-your-server 2026-03-25 monthly 0.8 Permanently Store Documents on Your Server Video Lesson CKEditors's document persistence stores collaboration data like comments, sessions, and revisions indefinitely. But the document content itself is temporary. This data is deleted 24 hours after th... https://player.vimeo.com/video/ 495 yes no 2025-06-03T09:49:00+02:00 no https://vueschool.io/lessons/ckeditor-mentions 2026-03-25 monthly 0.8 CKEditor Mentions Video Lesson In this lesson, learn how to implement a stand-out google docs feature: mentions. This is where you type an `@` symbol to notify a user that their attention is required in a specific portion of a d... https://player.vimeo.com/video/ 345 yes no 2025-06-03T09:53:00+02:00 no https://vueschool.io/lessons/course-conclusion-9 2026-03-25 monthly 0.8 Course Conclusion Video Lesson Congrats you’ve completed the course! Now you know what it takes to build a Google Docs clone in no time with CKEditor. Dive deeper into what’s possible with CKEditor using the links below. If... https://player.vimeo.com/video/ 153 yes no 2025-06-03T09:55:00+02:00 no https://vueschool.io/courses/file-uploads-in-vue-js 2026-05-12 monthly 0.8 https://vueschool.io/lessons/introduction-to-file-uploads-in-vue-js 2026-03-27 monthly 0.8 Introduction to File Uploads in Vue.js Video Lesson Master file uploads in Vue.js 3 with this comprehensive course about building a production-ready file upload component. Learn to create an intuitive upload interface supporting drag-and-drop functi... https://player.vimeo.com/video/ 289 yes no 2025-04-01T09:00:00+02:00 no https://vueschool.io/lessons/file-upload-components-in-ui-libraries 2026-03-27 monthly 0.8 File Upload Components in UI Libraries Video Lesson Many UI libraries already have a file upload component built-in and to save time it’s worth using them if your use case fits. Often times all that’s needed is to listen for changes on the compo... https://player.vimeo.com/video/ 147 yes no 2025-04-01T09:00:00+02:00 no https://vueschool.io/lessons/capture-files-in-vue-js-with-input-fields 2026-03-27 monthly 0.8 Capture Files in Vue.js With Input Fields Video Lesson In this lesson, learn how to use the html `<input type="file"/>` element to add support for choosing files from the filesystem. Listen to the `change` event on the input to access the files picked... https://player.vimeo.com/video/ 289 yes no 2025-04-08T09:00:00+02:00 no https://vueschool.io/lessons/store-selected-files-in-a-vue-js-variable-ref 2026-03-27 monthly 0.8 Store Selected Files in a Vue.js Variable Ref Video Lesson In this lesson, learn how to capture the files made available in the change event to a reactive ref and then display the file names to the page. With Vue.js it’s easy! https://player.vimeo.com/video/ 180 yes no 2025-04-08T09:00:00+02:00 no https://vueschool.io/lessons/validate-file-upload-filetype-with-javascript 2026-03-27 monthly 0.8 Validate File Upload Filetype With Javascript Video Lesson In this lesson, learn how to check the `type` property of a `File` object and match it’s MIME type to an allowlist of MIME types. With Vue.js it’s easy to perform the logic and update the UI wi... https://player.vimeo.com/video/ 137 yes no 2025-04-08T09:00:00+02:00 yes https://vueschool.io/lessons/validate-file-upload-filetype-with-the-html-accept-attribute 2026-03-27 monthly 0.8 Validate File Upload Filetype with the HTML Accept Attribute Video Lesson In this lesson, learn how to validate file types with the built-in html `accept` attribute. The `accept` attribute takes a comma separated list of MIME types, file extensions, or MIME types with wi... https://player.vimeo.com/video/ 181 yes no 2025-04-08T09:00:00+02:00 yes https://vueschool.io/lessons/validate-file-upload-size 2026-03-27 monthly 0.8 Validate File Upload Size Video Lesson In this lesson, learn how to validate a file upload’s size. By doing a little simple math we can convert megabytes to bytes and compare a MAX_FILE_SIZE with a File object’s size property and sh... https://player.vimeo.com/video/ 144 yes no 2025-04-08T09:00:00+02:00 yes https://vueschool.io/lessons/generate-image-file-previews-in-vue-js 2026-03-27 monthly 0.8 Generate Image File Previews in Vue.js Video Lesson In this lesson, learn how to display a preview of an uploaded image. There are a couple different approaches for this: https://player.vimeo.com/video/ 166 yes no 2025-04-08T09:00:00+02:00 yes https://vueschool.io/lessons/generate-video-file-previews-in-vue-js 2026-03-27 monthly 0.8 Generate Video File Previews in Vue.js Video Lesson In this lesson, learn how to display a preview of an uploaded video. The approach is exactly same as for images (that we discussed in the last lesson), only that we need to swap out an `img` elemen... https://player.vimeo.com/video/ 197 yes no 2025-04-15T09:00:00+02:00 yes https://vueschool.io/lessons/handle-file-uploads-in-vue-js 2026-03-27 monthly 0.8 Handle File Uploads in Vue.js Video Lesson In this lesson, learn how to use the JavaScript `FormData` object to send binary file data to a server. Using `FormData` mimics traditional HTML form payloads and make it easy to upload files witho... https://player.vimeo.com/video/ 342 yes no 2025-04-15T09:00:00+02:00 yes https://vueschool.io/lessons/handle-file-uploads-as-base64-encoded-data-in-vue-js 2026-03-27 monthly 0.8 Handle File Uploads as Base64 Encoded Data in Vue.js Video Lesson Not all API’s support uploading files via multi-part form data. Some API’s accept files as base64 encoded data URIs. This is not as common as the former but it does happen, so in this lesson I�... https://player.vimeo.com/video/ 280 yes no 2025-04-15T09:00:00+02:00 yes https://vueschool.io/lessons/conclusion-8 2026-03-27 monthly 0.8 Conclusion Video Lesson Thanks for watching! If you have any feedback we’d love to hear from you. Also if you enjoyed the course be sure to share it with anyone you think would find it useful. https://player.vimeo.com/video/ 122 yes no 2025-04-23T09:00:00+02:00 yes https://vueschool.io/lessons/use-props-and-events-for-a-flexible-fileupload-vue-component 2026-03-27 monthly 0.8 Use Props and Events for a Flexible FileUpload Vue Component Video Lesson In this lesson, we make the component more flexible for real world use by creating props to control max file size, how many files can be uploaded, and what types of files are accepted. We also emit... https://player.vimeo.com/video/ 426 yes no 2025-04-23T09:00:00+02:00 yes https://vueschool.io/lessons/a-super-simple-yet-effective-approach-to-drag-and-drop-file-uploads 2026-03-27 monthly 0.8 A Super Simple Yet Effective Approach to Drag and Drop File Uploads Video Lesson In this lesson, learn how to implement drag-and-drop file uploads WITHOUT any additional JavaScript. This approach hinges on the file input’s natural behavior: When dragging a file over a file in... https://player.vimeo.com/video/ 250 yes no 2025-04-23T09:00:00+02:00 yes https://vueschool.io/lessons/a-more-robust-drag-and-drop-approach 2026-03-27 monthly 0.8 A More Robust Drag And Drop Approach Video Lesson In this lesson, we make our drag and drop component more robust with visually appealing drag over states and get file type validation working again since the drag and drop support killed our curren... https://player.vimeo.com/video/ 589 yes no 2025-04-23T09:00:00+02:00 yes https://vueschool.io/lessons/cleanup-object-urls-to-prevent-performance-issues 2026-03-27 monthly 0.8 Cleanup Object URLs To Prevent Performance Issues Video Lesson In this lesson, learn how to display a preview of an uploaded video. The approach is exactly same as for images (that we discussed in the last lesson), only that we need to swap out an `img` elemen... https://player.vimeo.com/video/ 202 yes no 2025-04-15T10:11:00+02:00 yes https://vueschool.io/lessons/styling-the-file-upload-component-with-ai 2026-03-27 monthly 0.8 Styling the File Upload Component with AI Video Lesson In this video we use Cursor to style the File Upload Input for us. Given a brief text description of what we wanted worked ok, but adding a screenshot of the desired look, produce excellent results... https://player.vimeo.com/video/ 708 yes no 2025-04-23T09:00:00+02:00 yes https://vueschool.io/courses/handling-errors-in-vue-like-a-pro 2026-05-12 monthly 0.8 https://vueschool.io/lessons/intro-to-error-handling-in-vue 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1991936357-d977336e63e6eff7868ed1045ef0ba15490d27595c6092514f59b826d94cd313-d_1280x720?&r=pad Intro to Error Handling in Vue Video Lesson Hello and welcome to the course! Hope you’re ready to wrangle errors within your Vue.js apps. This course will teach you how! Learn how to handle errors in the context of a Vue.js component, a Vu... https://player.vimeo.com/video/ 302 yes no 2025-03-11T09:00:00+01:00 no https://vueschool.io/lessons/catching-errors-at-the-vue-component-level 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1991937852-a4ed2ade0e4887933da65fb2749915a288624b1c1d078c8feca0c1666888a6fb-d_1280x720?&r=pad Catching Errors at the Vue Component Level Video Lesson In this lesson, learn how to handle errors within a Vue component. To catch an error thrown in the current component, good ol’ fashion try/catch will work great. You can enhance the process by st... https://player.vimeo.com/video/ 307 yes no 2025-03-11T09:00:00+01:00 no https://vueschool.io/lessons/what-can-onerrorcaptured-catch 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1991939000-8a6bd1bd134193dbc7a133cf97e12b11d33f1fcc90b00c1edadbd2e887c25760-d_1280x720?&r=pad What Can onErrorCaptured Catch? Video Lesson `onErrorCaptured` can catch errors thrown at many different times from descendant components. In this lesson, let’s experiment throwing errors at a different times to see if they are indeed captu... https://player.vimeo.com/video/ 286 yes no 2025-03-11T09:00:00+01:00 no https://vueschool.io/lessons/onerrorcaptured-with-slots 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1991939552-bba5d389fdc1899c8003be4217459ae4d4e489c8c4ac1d94b201842c1b65e819-d_1280x720?&r=pad onErrorCaptured with Slots Video Lesson In this lesson, learn about how onErrorCaptured also works to catch errors thrown within a component’s default slot (or any other slot). https://player.vimeo.com/video/ 127 yes no 2025-03-11T09:00:00+01:00 no https://vueschool.io/lessons/a-vue-error-boundary-component 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1991941303-5529694c179a8d8bbcd71f98c6cbf4bf6eeecb659d4dc2a3a6ba754524d26eb1-d_1280x720?&r=pad A Vue Error Boundary Component Video Lesson In this lesson, learn how an error boundary component can help isolate errors to certain parts of your page in a more intuitive way than the `onErrorCaptured` hook. Build your own error boundary co... https://player.vimeo.com/video/ 307 yes no 2025-03-11T09:00:00+01:00 yes https://vueschool.io/lessons/an-error-handling-pattern-for-vue-composables 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1994681743-d35df8f813c5cb8ee6abb65513cf71a0584acb5c49ec0973e9b0adf0df682cbe-d_1280x720?&r=pad An Error Handling Pattern for Vue Composables Video Lesson In this lesson, learn how to handle errors within the context of a Vue.js composable. The process involves initializing some error reactive ref to null and then setting it’s value to thrown error... https://player.vimeo.com/video/ 385 yes no 2025-03-18T09:00:00+01:00 yes https://vueschool.io/lessons/catching-errors-at-the-vue-app-level 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1994683415-9dab47381a68ba8cdb55b05e499633cfc316f279ca2d3b13e0658f6b826779a2-d_1280x720?&r=pad Catching Errors at the Vue App Level Video Lesson In this lesson, learn how to run an error handler at the Vue app level. This handler set with `app.config.errorHandler` runs whenever any error thrown within components or composables bubbles up to... https://player.vimeo.com/video/ 257 yes no 2025-03-18T09:00:00+01:00 yes https://vueschool.io/lessons/combing-the-simplicity-of-alert-with-the-power-of-vue 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1994684104-485dc5267e1ac8874f3d98a06ce8c9ffae07cfb392ac9915a3e40a68a928524b-d_1280x720?&r=pad Combing the Simplicity of Alert with the Power of Vue Video Lesson In this lesson, don’t under-estimate the power of a simple alert and learn how to use a Vue composable to create a prettier and more flexible error alert that’s just as simple to use. https://player.vimeo.com/video/ 342 yes no 2025-03-18T09:00:00+01:00 yes https://vueschool.io/lessons/show-the-technical-error-alongside-the-user-friendly-message-in-dev 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1994684897-c923eee5a4b5842b0fad63b8951928b0c7004d2f41fffa9bc3c293375bddce28-d_1280x720?&r=pad Show the Technical Error Alongside the User Friendly Message in Dev Video Lesson In this lesson, learn a quick tip about using import.meta.dev to show technical error messages in your development environment alongside your user friendly messages. In a Vue.js app, this can be p... https://player.vimeo.com/video/ 136 yes no 2025-03-18T09:00:00+01:00 yes https://vueschool.io/lessons/a-custom-alertableerror-in-a-vue-js-app 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1994685750-10f72f8fcae7227e50c9ba0112e2f81485de579f01cacf54663edb65ebe80051-d_1280x720?&r=pad A Custom AlertableError in a Vue.js App Video Lesson In this lesson, we experiment with creating a custom `AlertableError` class. The class handles displaying an alert to the user with the custom composable and detecting if we’re in development mod... https://player.vimeo.com/video/ 344 yes no 2025-03-18T09:00:00+01:00 yes https://vueschool.io/lessons/conclusion-7 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1994686603-d5312958b1df5823d3508238aa9ebfde7bc1d6400b89037a8524347d657c9e25-d_1280x720?&r=pad Conclusion Video Lesson Congrats on finishing the course! You’re now better equipped to handle errors in your Vue applications. Love the course or see room for improvement? We’d love to hear from you! Reach out using... https://player.vimeo.com/video/ 86 yes no 2025-03-18T09:00:00+01:00 yes https://vueschool.io/courses/javascript-error-handling 2026-05-12 monthly 0.8 https://vueschool.io/lessons/intro-to-javascript-error-handling 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1986480852-83942cc9236120277451b6b64b42c5c2847c57b882bfff82e2f095b136c17ae6-d_1280x720?r=pad Intro to JavaScript Error Handling Video Lesson Hello! Welcome to the course! We’re excited to share with you the ins and outs of error handling in JavaScript. In this lesson, learn: https://player.vimeo.com/video/ 219 yes no 2025-02-25T09:00:00+01:00 no https://vueschool.io/lessons/javascript-exceptions-errors-and-try-catch 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1986466521-50359e5a2c4e181e2d618e84201e37c5cfa4c7b091357b9806eaf24c0a76694c-d_1280x720?r=pad JavaScript Exceptions, Errors, and Try Catch Video Lesson In this lesson, learn the fundamental building blocks of error handling: error objects and try/catch blocks. Error objects are structures that represent a program error. They contain information li... https://player.vimeo.com/video/ 213 yes no 2025-02-25T09:00:00+01:00 no https://vueschool.io/lessons/types-of-built-in-javascript-errors 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1986467207-1c68bfe581b412bc33db6954feee03daff6779bd5cac8e6c5d284ed35a2a36a3-d_1280x720?r=pad Types of Built-in JavaScript Errors Video Lesson In this lesson, learn about built in error types like TypeError, ReferenceError, and SyntaxError. ReferenceErrors occur when trying to reference a variable or function that doesn’t exist or exist... https://player.vimeo.com/video/ 416 yes no 2025-02-25T09:00:00+01:00 no https://vueschool.io/lessons/javascript-custom-error-classes-when-why-how 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1986467897-f2f204963d4a2437221fb2c37497a7a3e74a4cb1842d5b5501307133b39cd1ef-d_1280x720?r=pad JavaScript Custom Error Classes: When, Why, How? Video Lesson In this lesson, learn how to create a custom JavaScript error type. It’s as simple as extending the base Error type like this: https://player.vimeo.com/video/ 565 yes no 2025-02-25T09:00:00+01:00 no https://vueschool.io/lessons/catching-errors-in-async-javascript-code 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1986468370-3fdfcabc2c58eb36fdfc0a3882d8c4f073076281506bbba64e74852a8275418f-d_1280x720?r=pad Catching Errors in Async JavaScript Code Video Lesson In this lesson, learn how to a common mistake error handling mistake when dealing with async code. Make sure to always await your async functions within a try/catch block otherwise the catch will n... https://player.vimeo.com/video/ 100 yes no 2025-02-25T09:00:00+01:00 yes https://vueschool.io/lessons/dealing-with-javascript-fetch-errors 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1989214941-bade289b15e7002a5ee421c29aa2c282c30a85285ee2e3283a2335bee5651cf2-d_1280x720?&r=pad Dealing with JavaScript Fetch Errors Video Lesson In this lesson, learn how to handle errors from fetch requests. One really important take away is that only network layer issues actually throw an error. For server responses that aren’t in the 2... https://player.vimeo.com/video/ 552 yes no 2025-03-04T09:00:00+01:00 no https://vueschool.io/lessons/catching-and-re-throwing-javascript-errors 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1989211993-dccd6e0d5b3367078a999204f98edbf5be8d12c046afb660c8fa23aa6ca6e6b1-d_1280x720?&r=pad Catching and Re-Throwing JavaScript Errors Video Lesson In this lesson, learn what how to re-throw a JavaScript error and why. Reasons for re-throwing a JavaScript error include: adding more context, refining error messaging, and handling an error one w... https://player.vimeo.com/video/ 385 yes no 2025-03-04T09:00:00+01:00 yes https://vueschool.io/lessons/be-strategic-about-error-behavior-and-notifying-the-user 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1989216306-37bfeb6284c3be7fc1a9b73bd02010565e180e1e2ef6257c67af59e677bc07bd-d_1280x720?&r=pad Be Strategic about Error Behavior and Notifying the User Video Lesson In this lesson, learn tips for when an how to communicate errors to users. Know that some errors can be recovered from WITHOUT user intervention (and therefore we don’t have to notify them). Most... https://player.vimeo.com/video/ 439 yes no 2025-03-04T09:00:00+01:00 yes https://vueschool.io/lessons/report-all-errors-to-a-reporting-service-for-developer-visibility 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1989216918-f1681386fba34ffa7e2629a365cf07c5e58cccb2c54c7b137793cfdf9b32d219-d_1280x720?&r=pad Report All Errors to a Reporting Service for Developer Visibility Video Lesson In this lesson, learn how to present errors to developers in a way that is most useful to them. Make sure to include technical details about the error and as much context as possible! Services like... https://player.vimeo.com/video/ 190 yes no 2025-03-04T09:00:00+01:00 yes https://vueschool.io/lessons/don-t-swallow-exceptions 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1989217557-c1f369e33acb823886d2b7c50d2de65d8a09d9191e016e8f84ff75811a5b276a-d_1280x720?&r=pad Don’t Swallow Exceptions Video Lesson In this lesson, learn what it means to “swallow errors” and why you should almost never do it. https://player.vimeo.com/video/ 172 yes no 2025-03-04T09:00:00+01:00 yes https://vueschool.io/lessons/conclusion-6 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1989218312-f1433f68ecb070786264aaa13aa2ca22a75b4292d3444bd6bad1678f62abcf34-d_1280x720?&r=pad Conclusion Video Lesson Congrats on finishing the course! You’re now better equipped to handle errors in your JavaScript applications. Love the course or see room for improvement? We’d love to hear from you! Reach out... https://player.vimeo.com/video/ 47 yes no 2025-03-04T09:00:00+01:00 yes https://vueschool.io/courses/web-scraping-for-developers-that-just-works 2026-05-12 monthly 0.8 https://vueschool.io/lessons/intro-to-web-scraping 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1962139486-042bfd51f8ccfabfa7dfb3a0298e86859a61763d95833f8c52b4edcdfc538df3-d_1280x720?r=pad Intro to Web Scraping Video Lesson Hello and welcome to the course! 👋 This course is all about using JavaScript to scrape public websites for valuable data and overcoming common web scraping obstacles with the right strategies a... https://player.vimeo.com/video/ 166 yes no 2024-12-17T09:00:00+01:00 no https://vueschool.io/lessons/getting-started-with-bright-data-for-web-scraping 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1962137408-12823a9aef86239ce814b915ee6c071461801d6d37ed30ff790eba31d4f3f38a-d_1280x720?r=pad Getting Started with Bright Data for Web Scraping Video Lesson In this lesson, we create a [Bright Data account](https://brightdata.com/) and go through their hello world scraping example that extracts real hotel data from [booking.com](https://www.booking.com... https://player.vimeo.com/video/ 627 yes no 2024-12-17T09:00:00+01:00 no https://vueschool.io/lessons/write-your-web-scraper-locally-with-playwright 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1962152453-09291fdfb4c1cc73ca4d9e57580ec876c95916a4f84e703b226973dd2d4a2a97-d_1280x720?r=pad Write Your Web Scraper Locally with Playwright Video Lesson In this video, learn how to use Playwright and Bright Data to scrape [amazon.com](http://amazon.com) and take a screenshot of the homepage. Getting started with a local scraper is easy to do since... https://player.vimeo.com/video/ 325 yes no 2024-12-17T09:00:00+01:00 no https://vueschool.io/lessons/navigating-a-site-and-scraping-data-with-playwright 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1962144204-d01ebb61b0451087abc53376f24ad1a798c3fff337061ced8667c19912ebaa39-d_1280x720?r=pad Navigating a Site and Scraping Data with Playwright Video Lesson In this lesson, we get hands on practice scraping books about mars on amazon with Playwright. Learn how to use query selectors and playwright to select elements, trigger events, and scrape data. https://player.vimeo.com/video/ 419 yes no 2024-12-17T09:00:00+01:00 no https://vueschool.io/lessons/efficient-data-extraction-techniques 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1962144401-6d4f8aa5d39305595081eb92cd50399337d42fa50ef92d9f302540ca872e68f0-d_1280x720?r=pad Efficient Data Extraction Techniques Video Lesson In this lesson, learn some efficient data extraction techniques to keep your web scrapers running smoothly and without error. Learn techniques such as targeting desired urls directly when possible,... https://player.vimeo.com/video/ 276 yes no 2024-12-17T09:00:00+01:00 no https://vueschool.io/lessons/how-to-scrape-paginated-data 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1962137782-52a8595b85482bf96b8f00d8a92fd060d572ddf559fcfbd07b76f78488ecd26a-d_1280x720?r=pad How to Scrape Paginated Data Video Lesson In this lesson, we learn how to scrape paginated data with Bright Data and Playwright. Scraping paginated data means writing code that looks a lot like a real user’s journey in which we load the... https://player.vimeo.com/video/ 494 yes no 2024-12-17T09:00:00+01:00 no https://vueschool.io/lessons/storing-and-managing-scraped-data 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1962137803-9c2a9020291abfabcd7ee76497b74001426d18e8f7523f3f88a3bd4a893284d4-d_1280x720?r=pad Storing and Managing Scraped Data Video Lesson In this lesson, learn how to structure scraped data into objects and arrays so that it’s easy to store the data in a database solution of your choice. https://player.vimeo.com/video/ 359 yes no 2024-12-17T09:00:00+01:00 no https://vueschool.io/lessons/ai-and-web-scraping 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1962137983-4d05d231851b51201d36cbecf8aa92e54b31d00b98e618d98a3bb5c08549a069-d_1280x720?r=pad AI and Web Scraping Video Lesson In this lesson, see an example of using [claude.ai](https://claude.ai/) to help write a scraper with [Playwright](https://playwright.dev/). https://player.vimeo.com/video/ 175 yes no 2024-12-17T09:00:00+01:00 no https://vueschool.io/lessons/bright-data-web-scraper-api 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1962152261-ba9fa0fbb6065a1d79e1b2fd4e9b8a31f4e5f1b82a373118113fe573b8f48b52-d_1280x720?r=pad Bright Data Web Scraper API Video Lesson In this lesson, learn about [Bright Data’s Web Scraper API](https://brightdata.com/products/web-scraper). It’s a collection of API endpoints with data pre-scraped, managed, cleaned, and regular... https://player.vimeo.com/video/ 452 yes no 2024-12-17T09:00:00+01:00 no https://vueschool.io/lessons/common-questions-and-answers-about-web-scraping 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1962138136-f88b61f94d0b1260e5b145c94359e18f013fa2a663e2c088ed5068832af6a56f-d_1280x720?r=pad Common Questions and Answers About Web Scraping Video Lesson In this lesson, we answer some common questions asked about web scraping including: https://player.vimeo.com/video/ 299 yes no 2024-12-17T09:00:00+01:00 no https://vueschool.io/lessons/course-conclusion-8 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1962138142-878564cac5646fd4ee9c496277329196f1c62740e3387179b0b5122d4bd2a14e-d_1280x720?r=pad Course Conclusion Video Lesson Thanks for watching! And good luck scraping the web 🎉 https://player.vimeo.com/video/ 102 yes no 2024-12-17T09:00:00+01:00 no https://vueschool.io/courses/the-ultimate-guide-to-vue-performance 2026-05-12 monthly 0.8 https://vueschool.io/lessons/introduction-to-web-performance 2026-04-23 monthly 0.8 Introduction to Web Performance Video Lesson Learn the ins-and-outs of web performance optimization for Vue applications. This lesson covers core performance metrics, their impact on user experience and business metrics, and introduces you to... https://player.vimeo.com/video/ 271 yes no 2024-12-23T09:00:00+01:00 no https://vueschool.io/lessons/tree-shaking-for-performant-vue-apps 2026-04-23 monthly 0.8 Tree Shaking for Performant Vue Apps Video Lesson Master the art of tree shaking in Vue.js to dramatically reduce your application's bundle size. Learn how to properly import dependencies, choose tree-shakable dependencies, and use Vue's tree-shak... https://player.vimeo.com/video/ 509 yes no 2024-12-23T09:00:00+01:00 no https://vueschool.io/lessons/how-code-splitting-makes-vue-apps-faster 2026-04-23 monthly 0.8 How Code Splitting Makes Vue Apps Faster Video Lesson In this lesson, learn how to split the JavaScript bundle into multiple chunks that are only sent to the browser when the user actually needs them. This approach is called “code splitting” or la... https://player.vimeo.com/video/ 486 yes no 2024-12-23T09:00:00+01:00 no https://vueschool.io/lessons/how-to-prefetch-lazily-loaded-vue-components 2026-04-23 monthly 0.8 How to Prefetch Lazily Loaded Vue Components Video Lesson In this lesson, learn advanced performance optimization techniques to enhance user experience by implementing smart component prefetching. https://player.vimeo.com/video/ 628 yes no 2024-12-23T09:00:00+01:00 no https://vueschool.io/lessons/lazy-hydration-of-vue-components 2026-04-23 monthly 0.8 Lazy Hydration of Vue Components Video Lesson In this lesson, learn how Vue 3.5 gives you more control over when components are hydrated. This new feature, is a huge in for performance. https://player.vimeo.com/video/ 264 yes no 2025-01-07T09:00:00+01:00 yes https://vueschool.io/lessons/how-the-right-architecture-for-your-use-case-impacts-performance 2026-04-23 monthly 0.8 How the Right Architecture For Your Use Case Impacts Performance Video Lesson In this lesson, learn how to select and implement the optimal architecture for your Vue.js applications. This lesson covers Single Page Applications (SPA), Static Site Generation (SSG), and Server-... https://player.vimeo.com/video/ 588 yes no 2025-01-07T09:00:00+01:00 no https://vueschool.io/lessons/vue-vapor-mode 2026-05-30 monthly 0.8 Vue Vapor Mode Video Lesson In this lesson, let’s take a look at Vue Vapor Mode. It’s a new compilation strategy that enables fine-grained reactivity similar to [SolidJS](https://www.solidjs.com/). The reason it’s in th... https://player.vimeo.com/video/ 244 yes no 2025-01-07T09:00:00+01:00 yes https://vueschool.io/lessons/how-to-display-long-lists-that-don-t-crash-your-pages-with-list-virtualization 2026-04-23 monthly 0.8 How to Display Long Lists That Don’t Crash Your Pages with List Virtualization Video Lesson In this lesson, learn to display large lists of data to the page without performance issues or list scroll jank. List virtualization is the key to displaying such long lists. You can choose from a... https://player.vimeo.com/video/ 400 yes no 2025-01-07T09:00:00+01:00 yes https://vueschool.io/lessons/how-is-reactivity-depth-related-to-performance 2026-04-23 monthly 0.8 How is Reactivity Depth Related to Performance Video Lesson In this lesson, learn the difference between `ref` and `shallowRef` and get a demonstration on the performance difference `shallowRef` can provide. https://player.vimeo.com/video/ 521 yes no 2025-01-14T09:00:00+01:00 yes https://vueschool.io/lessons/avoid-memory-leaks-that-slow-apps-to-a-crawl 2026-04-23 monthly 0.8 Avoid Memory Leaks that Slow Apps to a Crawl Video Lesson In this lesson, learn how memory leaks can sneak into applications through common factors like event listeners and intervals eating up precious memory on functions that are no longer necessary. https://player.vimeo.com/video/ 295 yes no 2025-01-14T09:00:00+01:00 yes https://vueschool.io/lessons/avoiding-unnecessary-component-abstractions 2026-04-23 monthly 0.8 Avoiding Unnecessary Component Abstractions Video Lesson In this lesson, get a first hand glimpse at the overhead added by an extracted Vue component over inlining the markup directly. It’s not much but it’s clear and as a last resort might just be t... https://player.vimeo.com/video/ 191 yes no 2025-01-14T09:00:00+01:00 yes https://vueschool.io/lessons/proper-image-handling-for-fast-vue-sites 2026-04-23 monthly 0.8 Proper Image Handling for Fast Vue Sites Video Lesson In this lesson, get a high level overview of various image optimization techniques to help tackle one of the biggest culprits of bad performance. Learn about: https://player.vimeo.com/video/ 681 yes no 2025-01-14T09:00:00+01:00 yes https://vueschool.io/lessons/designing-components-with-stable-props-and-kill-unnecessary-re-renders 2026-04-23 monthly 0.8 Designing Components with Stable Props and Kill Unnecessary Re-renders Video Lesson In this lesson, learn what it means to have stable component props and how prop instability can lead to slow applications. https://player.vimeo.com/video/ 294 yes no 2025-01-21T09:00:00+01:00 yes https://vueschool.io/lessons/using-v-once-for-static-content-and-faster-apps 2026-04-23 monthly 0.8 Using v-once for Static Content and Faster Apps Video Lesson In this lesson, learn about the `v-once` directive. It’s useful for rendering static data and preventing Vue from re-rending elements or components even when reactive data changes. https://player.vimeo.com/video/ 73 yes no 2025-01-21T09:00:00+01:00 yes https://vueschool.io/lessons/how-v-memo-works-and-when-to-use-it 2026-04-23 monthly 0.8 How v-memo Works and When to Use It Video Lesson In this lesson, learn how to use `v-memo` to conditionally prevent Vue from re-rendering elements on component update. `v-memo` is a lot like `v-once` but you can pass in dependencies in an array.... https://player.vimeo.com/video/ 147 yes no 2025-01-21T09:00:00+01:00 yes https://vueschool.io/lessons/computed-props-the-wrong-way-and-the-right-way 2026-04-23 monthly 0.8 Computed Props: The Wrong Way and the Right Way Video Lesson In this video, learn about computed prop stability and when Vue triggers side-effects based on the return of a computed prop. Vue does some magic for you when return primitive values from the compu... https://player.vimeo.com/video/ 243 yes no 2025-01-21T09:00:00+01:00 yes https://vueschool.io/lessons/basic-tips-for-performant-data-fetching 2026-04-23 monthly 0.8 Basic Tips for Performant Data Fetching Video Lesson In this lesson, learn some basic data fetching techniques to increase performance. These techniques take almost 0 effort to do and help foster healthy habits of fetching data early and only as much... https://player.vimeo.com/video/ 349 yes no 2025-02-04T09:00:00+01:00 yes https://vueschool.io/lessons/how-to-fetch-data-in-parallel-in-vue 2026-04-23 monthly 0.8 How to Fetch Data in Parallel in Vue Video Lesson In this lesson, learn how to make 2 or more fetch requests at the same time (aka. in parallel). This allows the data to resolve more quickly than if you ran them sequentially. The secret sauce lies... https://player.vimeo.com/video/ 271 yes no 2025-02-04T09:00:00+01:00 yes https://vueschool.io/lessons/how-to-cache-data-on-the-client-side 2026-04-23 monthly 0.8 How to Cache Data on the Client Side Video Lesson In this lesson, learn how to create a custom cache implementation for caching fetch request responses. It’s easier than you think! We round out the video by looking at some more fully featured da... https://player.vimeo.com/video/ 918 yes no 2025-02-04T09:00:00+01:00 yes https://vueschool.io/lessons/how-to-prefetch-data-in-a-vue-app 2026-04-23 monthly 0.8 How to Prefetch Data in a Vue App Video Lesson In this lesson, learn to prefetch data, store it in a cache or global store, and the have it ready immediately when it’s truly needed. Pre-fetching data serves the same purpose as prefetching com... https://player.vimeo.com/video/ 332 yes no 2025-02-04T09:00:00+01:00 yes https://vueschool.io/lessons/debouncing-and-throttling-techniques-for-vue-js 2026-04-23 monthly 0.8 Debouncing and Throttling Techniques for Vue.js Video Lesson In this lesson, learn the difference between debouncing and throttling. Also look at a practical example where using the [watchDebounced](https://vueuse.org/shared/watchDebounced/) or the [refDebou... https://player.vimeo.com/video/ 432 yes no 2025-02-04T09:00:00+01:00 no https://vueschool.io/lessons/vite-bundle-analyzer 2026-04-23 monthly 0.8 Vite Bundle Analyzer Video Lesson In this lesson, learn how to use the vite-bundle-visualizer to analyze how much weight each of your dependencies adds to the final bundle. Use to optimize performance by using lighter dependencies... https://player.vimeo.com/video/ 307 yes no 2025-02-11T09:00:00+01:00 yes https://vueschool.io/lessons/how-to-use-page-speed-insights-to-measure-vue-app-performance 2026-05-20 monthly 0.8 How to Use Page Speed Insights to Measure Vue App Performance Video Lesson In this lesson, learn the various metrics that Google Chrome Lighthouse provides for measuring performance and what they mean for your page. Also learn how to use Page Speed Insights to see similar... https://player.vimeo.com/video/ 372 yes no 2025-02-11T09:00:00+01:00 no https://vueschool.io/lessons/measuring-performance-with-the-vue-devtools 2026-05-20 monthly 0.8 Measuring Performance with the Vue Devtools Video Lesson Learn what tooling the Vue devtools offer for measuring component and route performance. Easily measure component lifecycle timing with the timeline tab and measure how long it takes to switch betw... https://player.vimeo.com/video/ 218 yes no 2025-02-11T09:00:00+01:00 no https://vueschool.io/lessons/course-conclusion-7 2026-04-23 monthly 0.8 Course Conclusion Video Lesson Thanks for watching! https://player.vimeo.com/video/ 49 yes no 2025-02-11T09:00:00+01:00 yes https://vueschool.io/courses/vue-component-design-2 2026-06-01 monthly 0.8 https://vueschool.io/lessons/introduction-to-vue-component-design 2026-05-29 monthly 0.8 https://i.vimeocdn.com/video/1959781450-1b70696b3c81018420ad43547a4b2c5d4428a03af1f7935dbd631fb35427eb83-d_1280x720?r=pad Introduction to Vue Component Design Video Lesson In this course, we’ll dive into 5+ component patterns to help take your Vue applications to the next level including: https://player.vimeo.com/video/ 285 yes no 2024-12-10T09:00:00+01:00 no https://vueschool.io/lessons/branching-component-pattern 2026-04-23 monthly 0.8 https://i.vimeocdn.com/video/1959782300-ae0e6ad705d0866de549d2ba1efd464eba08a5808a6036e3405b22b75e6ae9f0-d_1280x720?r=pad Branching Component Pattern Video Lesson In this lesson, learn how to implement the branching component pattern in your Vue components to make them easier to read and maintain. The pattern uses the presence of a `v-if` and a `v-else` as a... https://player.vimeo.com/video/ 288 yes no 2024-12-10T09:00:00+01:00 no https://vueschool.io/lessons/slots-and-template-props-pattern 2026-04-23 monthly 0.8 https://i.vimeocdn.com/video/1959783373-5b361f50c3b0c11a34313e1e2938ffe96dc268028f6bbae5f06ba5ef916cd7f0-d_1280x720?r=pad Slots and Template Props Pattern Video Lesson In this lesson, learn to spot “template props” and turn them into slots for a more flexible component. Also learn to recognize other ways with use props (for reactive state and for configuratio... https://player.vimeo.com/video/ 370 yes no 2024-12-10T09:00:00+01:00 yes https://vueschool.io/lessons/list-with-listitem-pattern 2026-04-23 monthly 0.8 https://i.vimeocdn.com/video/1959784117-bf9d9da96deabb54635b81780032901eae064a64a7cc4580482c44ddae07506b-d_1280x720?r=pad List with ListItem Pattern Video Lesson In this lesson, learn how to implement the “List with ListItem” pattern in Vue to make list code easier to read and easier to re-use. https://player.vimeo.com/video/ 572 yes no 2024-12-10T09:00:00+01:00 yes https://vueschool.io/lessons/smart-vs-dumb-components 2026-04-23 monthly 0.8 https://i.vimeocdn.com/video/1962126524-410812d0abd8b34a0241a3ef9a11e488c4acf9fb8ccfc77042be657fd82f7c64-d_1280x720?r=pad Smart vs Dumb Components Video Lesson What are dumb and smart components in Vue.js? What are base components and app specific components? In this lesson, learn how knowing these different component categories can help you build better... https://player.vimeo.com/video/ 466 yes no 2024-12-17T09:00:00+01:00 yes https://vueschool.io/lessons/form-component-pattern 2026-04-23 monthly 0.8 https://i.vimeocdn.com/video/1962125771-09a33e37accc42d57f9c788a08753d15e62e703849639608783298e02457004d-d_1280x720?r=pad Form Component Pattern Video Lesson In this lesson, learn how to implement the form component pattern to make entire forms work with v-model , just like individual inputs do.: `<UserForm v-model="user" />`. This approach also takes a... https://player.vimeo.com/video/ 621 yes no 2024-12-17T09:00:00+01:00 no https://vueschool.io/lessons/some-advanced-patterns-tightly-coupled-components-recursive-components-and-lazy-components 2026-04-23 monthly 0.8 https://i.vimeocdn.com/video/1962129088-13b3630738e86fbf51c02298c0428669d588539df1cb5a4fdbf35393403b504c-d_1280x720?r=pad Some Advanced Patterns: Tightly Coupled Components, Recursive Components, and Lazy Components Video Lesson In this lesson, learn a few advanced component patterns like tightly coupled components, recursive components, and lazy dynamic components. https://player.vimeo.com/video/ 505 yes no 2024-12-17T09:00:00+01:00 yes https://vueschool.io/lessons/course-conclusion-6 2026-04-23 monthly 0.8 https://i.vimeocdn.com/video/1962897113-63b7a604410ab01b2775e685ce30ebb17e0e7eb504b826a1da4ef26d0e90500e-d_1280x720?r=pad Course Conclusion Video Lesson Congratulations! You've made it to the end of Vue Component Design! Let's take a moment to review what we've covered and talk about where you can go from here. https://player.vimeo.com/video/ 180 yes no 2024-12-24T09:00:00+01:00 no https://vueschool.io/courses/what-s-new-in-nuxt-4 2026-05-12 monthly 0.8 https://vueschool.io/lessons/intro-to-nuxt-4 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1951685055-1e4966b0006bd8699d06fa5d4bdb9082bd753b4b81879c2bf352d7e88c8321c4-d_1280x720?r=pad Intro to Nuxt 4 Video Lesson In this course, we’ll look into what’s changing between Nuxt major versions 3 and 4. In this lesson, let us introduce you to what’s coming before we dive more deeply into specific changes. https://player.vimeo.com/video/ 138 yes no 2024-11-19T08:30:00+01:00 no https://vueschool.io/lessons/nuxt-4-directory-structure-the-most-significant-change 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1951686082-c08021f36b06d12ac2b18de2aa1f3b80d5faaedeba413b7efcc48b5033cba61a-d_1280x720?r=pad Nuxt 4 Directory Structure - The Most Significant Change Video Lesson The most significant change in Nuxt 4 is the new file structure. Many files and folders will now be nested under a directory called `app` providing a clear distinction between code that runs in the... https://player.vimeo.com/video/ 157 yes no 2024-11-19T08:33:00+01:00 no https://vueschool.io/lessons/shallow-data-reactivity-in-useasyncdata-and-usefetch 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1951686699-6daa8fc5faf1383e3d7c5ec4618e1e1b72ae8918e99f40c4acaf7060d75d4281-d_1280x720?r=pad Shallow Data Reactivity in useAsyncData and useFetch Video Lesson This lesson explores how Nuxt has changed its data handling. When using useAsyncData or useFetch, the data variable now returns a shallowRef instead of a regular ref, increasing performance for mos... https://player.vimeo.com/video/ 170 yes no 2024-11-19T08:35:00+01:00 yes https://vueschool.io/lessons/normalized-component-names 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1951683685-c35a9ddd24618ad1dbab3d276df03521cb682998c6a343576b99067aebbe71f7-d_1280x720?r=pad Normalized Component Names Video Lesson In this lesson, let’s take a look at how Nuxt generates component names based on folder structure and how that name is now normalized even for the `exclude` and `include` options of keep alive in... https://player.vimeo.com/video/ 265 yes no 2024-11-19T08:37:00+01:00 yes https://vueschool.io/lessons/overview-of-other-breaking-changes-in-nuxt-4 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1951687978-e5c1c669db3ff8b52e581e42d109d0d018ab4efd2e87a834f6d16281197163f0-d_1280x720?r=pad Overview of Other Breaking Changes in Nuxt 4 Video Lesson In this lesson, we briefly scroll through the Nuxt 4 upgrade guide and take a quick look at some other pertinent breaking changes including: Removal of Experimental Features, Removal of window.__NU... https://player.vimeo.com/video/ 197 yes no 2024-11-19T08:39:00+01:00 no https://vueschool.io/lessons/nuxt-4-using-codemod-as-an-easy-upgrade-path 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1951684162-dd20f03527102cca3f9e11c95718da81dd3a6d1013828cb650eb13a84d6096c5-d_1280x720?r=pad Nuxt 4 - Using CodeMod As An Easy Upgrade Path Video Lesson In this lesson, we try our hand at using Codemod to automate the Nuxt 3 to Nuxt 4 migration process. https://player.vimeo.com/video/ 424 yes no 2024-11-19T08:41:00+01:00 yes https://vueschool.io/lessons/what-s-landing-after-nuxt-4-major-delayed-hydration 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1951689078-3e60e6fbb2cba5859210c6f96d63a7bee367a2f33d63929b36cbf0a8237dc590-d_1280x720?r=pad What’s Landing After Nuxt 4 Major - Delayed Hydration Video Lesson In this lesson, learn about the planned “delayed hydration” feature for Nuxt 4. It promises more control over when components hydrate such as only when it’s visible in the viewport, only when... https://player.vimeo.com/video/ 153 yes no 2024-11-19T08:44:00+01:00 no https://vueschool.io/lessons/shared-directory-for-app-and-server-code 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1951689742-740a8e86a8ab12889c21190012e9d49ef6f196c908ee0d12da8535c1eec35e24-d_1280x720?r=pad Shared Directory for App and Server Code Video Lesson Nuxt 3.14.0 introduces an awesome new feature for sharing auto-imported utility functions and types to both application code and nitro server side code (typically API endpoints). The shared directo... https://player.vimeo.com/video/ 383 yes no 2024-11-19T08:46:00+01:00 yes https://vueschool.io/lessons/conclusion-and-further-resources 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1951690313-00b86cf2ebb15ca2b0a127416bd82cdecbefb62900c1defbd0ca1ee31d554d47-d_1280x720?r=pad Conclusion and Further Resources Video Lesson Thanks for watching! https://player.vimeo.com/video/ 106 yes no 2024-11-19T08:48:00+01:00 yes https://vueschool.io/lessons/singleton-data-fetching-layer 2025-06-13 monthly 0.8 https://i.vimeocdn.com/video/2026401868-fee62cca45b74ad210434e6726e9fc864cd99ba0e3bc1a9a7197d88f5f8104d4-d_1280x720?&r=pad&region=us Singleton Data Fetching Layer Video Lesson In this lesson, learn how the singleton data layer changes impact Nuxt 4. Data fetchers with shared keys share the SAME reactive ref for data, status, and error states. getCachedData now fires when... https://player.vimeo.com/video/1093149430 467 yes no 2025-06-13T18:02:00+02:00 yes https://vueschool.io/courses/the-complete-guide-to-data-fetching-in-nuxt 2026-05-12 monthly 0.8 https://vueschool.io/lessons/intro-to-data-fetching-in-nuxt 2026-05-08 monthly 0.8 https://i.vimeocdn.com/video/1940871169-2bfa088832bba37b6e633ef28f48593e46a29a759096059b52c77fb9e5ef5309-d_1280x720?r=pad Intro to Data Fetching in Nuxt Video Lesson Hello! 👋 Welcome to the course! https://player.vimeo.com/video/ 290 yes no 2024-10-22T14:42:00+02:00 no https://vueschool.io/lessons/usefetch-vs-useasyncdata-vs-fetch 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1940870639-896918d911d602a85a20a268656ef869ec37fc1913a65bdb5d38d4f413135f0f-d_1280x720?r=pad useFetch vs useAsyncData vs $fetch Video Lesson In this video, we break down how `$fetch`, `useFetch`, and `useAsyncData` differ. `$fetch` is great for responding to user interactions while `useAsyncData` and `useFetch` are good for fetching dat... https://player.vimeo.com/video/ 625 yes no 2024-10-22T14:43:00+02:00 no https://vueschool.io/lessons/another-use-case-for-fetch-in-api-endpoints 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1940871342-c18749b56d1ecc4688b30e10db77d43abbb19b7063cda2e63dec96e7ce0e17f9-d_1280x720?r=pad Another Use Case for $fetch - in API Endpoints Video Lesson In this lesson, we take a look at one more use case for `$fetch` , that is for making HTTP requests from a Nuxt API endpoint defined in `server/api`. You should NOT use `useFetch` or `useAsyncData... https://player.vimeo.com/video/ 161 yes no 2024-10-22T14:48:00+02:00 yes https://vueschool.io/lessons/to-await-or-not-await-usefetch-blocking-vs-non-blocking 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1940871624-170d47b2e0608b34825c10abcae617185426695c7ca1580394edf5fcd9a67163-d_1280x720?&r=pad To Await or Not Await useFetch (Blocking vs Non-Blocking) Video Lesson A common question I’ve heard about Nuxt’s `useFetch` and `useAsyncAwait` is: should I always `await` the result? The answer is: it depends! Awaiting the request will result in blocking navigati... https://player.vimeo.com/video/ 326 yes no 2024-10-22T14:46:00+02:00 no https://vueschool.io/lessons/loading-indicators-on-blocking-and-non-blocking-requests 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1943574102-f8b465849ff4514542da979463cd550116e3c339f19f4e0b686d74d682078bc5-d_1280x720?r=pad Loading Indicators on Blocking and Non-Blocking Requests Video Lesson In this lesson, learn the various techniques for showing loading indicators while data fetches in Nuxt. Blocking navigation with `useFetch` can be handled with the `NuxtLoadingIndicator` while non-... https://player.vimeo.com/video/ 368 yes no 2024-10-29T08:51:00+01:00 yes https://vueschool.io/lessons/rerunning-fetch-requests-automatically-and-manually 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1943574945-f5ecd47c734dcb2d1785dd8b6dadf55746f247133711c681b3bcd4cbcefee65f-d_1280x720?r=pad ReRunning Fetch Requests Automatically and Manually Video Lesson In this lesson, learn how to trigger a new request whenever data changes or manually with the `execute` function. With Nuxt’s `useFetch` composable, re-running a request is easy and intuitive. https://player.vimeo.com/video/ 458 yes no 2024-10-29T08:54:00+01:00 yes https://vueschool.io/lessons/error-handling-with-usefetch 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1943575743-9162217579878164129fec1fc105d06c3615a003b381bee612296ea8a07907d3-d_1280x720?r=pad Error Handling with useFetch Video Lesson In this lesson, learn how to handle errors caused by failed requests with `useFetch`. When working with errors from `useFetch` in a Nuxt app, it’s important to remember that error’s can happen... https://player.vimeo.com/video/ 352 yes no 2024-10-29T08:56:00+01:00 no https://vueschool.io/lessons/making-parallel-requests-in-nuxt 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1943576967-77f2d366d09ab6d37cf5311d29660aa626c0fa9a5338494d7f7b471bb5fdc8bd-d_1280x720?&r=pad Making Parallel Requests in Nuxt Video Lesson In this lesson, learn how to make multiple requests in parallel using useAsyncData. This is perfect for boosting performance when one request doesn’t rely on the response of another request. https://player.vimeo.com/video/ 282 yes no 2024-10-29T09:00:00+01:00 no https://vueschool.io/lessons/how-to-cache-data-with-the-key-option-for-useasyncdata-and-usefetch 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1946191263-9236084be6fa6328886393ce6fcc96335e4231d76e21ac866f1c5c499b7c0799-d_1280x720?r=pad How to Cache Data with the Key Option for useAsyncData and useFetch Video Lesson In this lesson, learn how the `key` affects how data is cached with Nuxt’s `useFetch` and `useAsyncData` composables. When combined with the `lazy` option, it can be useful for showing stale data... https://player.vimeo.com/video/ 419 yes no 2024-11-05T08:48:00+01:00 no https://vueschool.io/lessons/how-to-minimize-the-payload-size-with-nuxt-usefetch 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1946194129-da0b6744e766b13f52233c7ca011083a30d4786dad592b471997501f92082781-d_1280x720?&r=pad How to Minimize the Payload Size with Nuxt useFetch Video Lesson In this lesson, learn how to use `pick` and `transform` to make your payloads as small as possible with Nuxt’s `useFetch` composable. https://player.vimeo.com/video/ 356 yes no 2024-11-05T08:55:00+01:00 no https://vueschool.io/lessons/a-brief-overview-of-other-nuxt-usefetch-configuration-options 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1946194821-407d4c91ef2cea8c5dbbb3c93f60c45d4ba00f67ccabf4b532ee8c82011c5958-d_1280x720?r=pad A Brief Overview of Other Nuxt useFetch Configuration Options Video Lesson In this lesson, we quickly go over the rest of the `useFetch` options available that we have not covered in the course so far. https://player.vimeo.com/video/ 422 yes no 2024-11-05T08:58:00+01:00 no https://vueschool.io/lessons/how-data-is-serialized-from-server-to-client-in-nuxt 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1948910585-f6fdd53563d72de46c32f0f4fd52d70b9063733985489877a4a74315535b378e-d_1280x720?r=pad How Data is Serialized from Server to Client In Nuxt Video Lesson In this lesson, we take a look at what it means when the Nuxt docs say that they use devalue to serialize data from the server to the client. It does NOT mean they use devalue when serializing data... https://player.vimeo.com/video/ 271 yes no 2024-11-12T08:28:00+01:00 yes https://vueschool.io/lessons/conclusion-4 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1948912848-d824bacfc205f6d31e78e1f191a0d1efc4dfbd2e9ec407dace66bfa38ccbb7dd-d_1280x720?r=pad Conclusion Video Lesson Thanks for watching! https://player.vimeo.com/video/ 54 yes no 2024-11-12T08:35:00+01:00 yes https://vueschool.io/lessons/caching-responses-with-usefetch-and-useasyncdata-in-nuxt 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1946193290-3ac50b8c98b83aa981e8589ccbc8589d9c6206b08105a1edc773dd00d28b1f14-d_1280x720?r=pad Caching Responses with useFetch and useAsyncData in Nuxt Video Lesson In this lesson, learn how to get complete control over cached data with the `getCachedData` option on `useAsyncData` and `useFetch`. This allows you to cache data based on a callback function where... https://player.vimeo.com/video/ 368 yes no 2024-11-05T08:52:00+01:00 yes https://vueschool.io/lessons/data-serialization-from-internal-api-endpoints-in-nuxt 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1948911460-816634d9097ba0abde9ae9e01b15b36a3d3597e64c373f33f36f5162090e11bb-d_1280x720?r=pad Data Serialization from Internal API Endpoints in Nuxt Video Lesson In this lesson, learn how to customize data serialization from Nuxt API endpoints using devalue and toJSON. https://player.vimeo.com/video/ 693 yes no 2024-11-12T08:30:00+01:00 yes https://vueschool.io/lessons/create-a-custom-usefetch-nuxt-composable 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1948912197-de5dd748f5af6ad33940ac1f8542269721c3868a7e9311db04d124fb5d8c4692-d_1280x720?r=pad Create a Custom useFetch Nuxt Composable Video Lesson In this lesson, learn what resources are available for creating a wrapper around `useFetch` as well as some of the current limitations. If anyone has any tips and tricks to make this work today, de... https://player.vimeo.com/video/ 119 yes no 2024-11-12T08:33:00+01:00 yes https://vueschool.io/courses/generating-fake-data-with-faker-js 2026-05-12 monthly 0.8 https://vueschool.io/lessons/discovering-fakerjs 2026-03-18 monthly 0.8 https://i.vimeocdn.com/video/1957010752-743c5de0f17570041b64ea0a203a22d9b9ccc2622e7e8a141810066b0a1699b1-d_1280x720?r=pad Discovering FakerJS Video Lesson In this episode, we introduce **Faker.js**, a powerful JavaScript library that helps developers generate realistic mock data with ease. Faker.js offers a rich set of functions to help you account f... https://player.vimeo.com/video/ 330 yes no 2024-12-03T08:23:00+01:00 no https://vueschool.io/lessons/generating-basic-data 2026-03-18 monthly 0.8 https://i.vimeocdn.com/video/1957016091-5f8deaeee0c44055e980364190219fd035a9c5347b1c8bce559cfa04402d264f-d_1280x720?r=pad Generating Basic Data Video Lesson In this episode, we dive deeper into the versatile capabilities of **Faker.js**, showcasing its ability to generate a wide range of realistic mock data, from addresses to commercial items and price... https://player.vimeo.com/video/ 516 yes no 2024-12-03T08:26:00+01:00 no https://vueschool.io/lessons/generating-data-for-different-locale 2026-03-18 monthly 0.8 https://i.vimeocdn.com/video/1957016679-bbc84f46d98ecbeb81731e2ad9ff623eaf57bcd32826012cb7f8b5e762d2e860-d_1280x720?r=pad Generating Data for different Locale Video Lesson In this episode, we’ll explore how to use different locales in Faker.js to generate region-specific data beyond the default en-US. We’ll cover how to dynamically load various locales, making yo... https://player.vimeo.com/video/ 495 yes no 2024-12-03T08:29:00+01:00 yes https://vueschool.io/lessons/generating-advanced-data 2026-03-18 monthly 0.8 https://i.vimeocdn.com/video/1957017893-ce0f928c2324ff6157f93a3674efcc7b27cfea98477500b9d488242abc2497cf-d_1280x720?r=pad Generating Advanced Data Video Lesson In this lesson, we’ll dive into generating more complex data types with Faker.js. We’ll explore how to create fake dates, commerce-related data, currency values, and how to enforce uniqueness u... https://player.vimeo.com/video/ 595 yes no 2024-12-03T08:33:00+01:00 yes https://vueschool.io/lessons/data-seeding-and-data-obfuscation 2026-03-18 monthly 0.8 https://i.vimeocdn.com/video/1957018519-9b0ba2250f58fd7eb6a03b2df2bc8ee0deebf2b4fe139a6f617b33fa307ae4fc-d_1280x720?r=pad Data Seeding and Data Obfuscation Video Lesson In this lesson, we’ll explore the practical applications of Faker.js for **database seeding** and **data obfuscation** in a Nuxt project using Prisma. Database seeding is essential for populating... https://player.vimeo.com/video/ 846 yes no 2024-12-03T08:35:00+01:00 yes https://vueschool.io/lessons/conclusion-5 2026-03-18 monthly 0.8 https://i.vimeocdn.com/video/1957019273-ca5052115a903e8973c0ac4b1f2e0ac36e10ac5fe3fdb9d3e146ca277dd53b8c-d_1280x720?r=pad Conclusion Video Lesson Congratulations on reaching the final episode of our Faker.js course! https://player.vimeo.com/video/ 332 yes no 2024-12-03T08:38:00+01:00 yes https://vueschool.io/courses/rich-text-editing-and-beyond-with-tinymce-and-vue 2026-05-12 monthly 0.8 https://vueschool.io/lessons/introduction-to-tinymce 2026-03-25 monthly 0.8 Introduction to TinyMCE Video Lesson In this lesson, we’ll learn what TinyMCE has to offer to your Vue.js applications. Despite its most common use case, TinyMCE is more than just a rich text editor. It has the ability to power rich... https://player.vimeo.com/video/ 175 yes no 2025-01-28T09:00:00+01:00 no https://vueschool.io/lessons/install-tinymce-with-vue 2026-03-25 monthly 0.8 Install TinyMCE with Vue Video Lesson In this lesson, we get hands on installing TinyMCE into a Vue project. It’s easy! Just install the TinyMCE Vue package, grab your API key, and use the `Editor` component to display a rich text ed... https://player.vimeo.com/video/ 301 yes no 2025-01-28T09:00:00+01:00 no https://vueschool.io/lessons/customize-the-editor 2026-03-25 monthly 0.8 Customize the Editor Video Lesson In this lesson, let’s examine a couple basic customization options for configuring TinyMCE via plugins and the toolbar. https://player.vimeo.com/video/ 358 yes no 2025-01-28T09:00:00+01:00 no https://vueschool.io/lessons/setting-up-tinymce-for-email-editing-with-multi-root-editing 2026-03-25 monthly 0.8 Setting Up TinyMCE for Email Editing with Multi-Root Editing Video Lesson In this lesson, learn how to create a powerful newsletter editor using Vue.js and TinyMCE. This tutorial covers setting up TinyMCE for email editing, implementing multi-root editing for selective c... https://player.vimeo.com/video/ 434 yes no 2025-01-28T09:00:00+01:00 no https://vueschool.io/lessons/placeholders-in-tinymce-via-merge-tags 2026-03-25 monthly 0.8 Placeholders in TinyMCE via Merge Tags Video Lesson Learn how to implement dynamic content in email marketing using TinyMCE's merge tags plugin. This lesson covers configuring the TinyMCE editor for personalized email templates, defining custom merg... https://player.vimeo.com/video/ 189 yes no 2025-02-04T09:00:00+01:00 no https://vueschool.io/lessons/add-common-links-with-link-lists 2026-03-25 monthly 0.8 Add Common Links with Link Lists Video Lesson In this lesson, learn how to add link lists to a email editor powered by TinyMCE and Vue.js. Link lists make it easy to add commonly used links to newsletters, e-commerce emails, and more! https://player.vimeo.com/video/ 79 yes no 2025-02-04T09:00:00+01:00 no https://vueschool.io/lessons/pro-tinymce-features-perfectly-fit-for-email 2026-03-25 monthly 0.8 Pro TinyMCE Features Perfectly Fit for Email Video Lesson Master email template styling with TinyMCE's inline CSS plugin. https://player.vimeo.com/video/ 346 yes no 2025-02-04T09:00:00+01:00 no https://vueschool.io/lessons/format-the-tinymce-editor-toolbars 2026-03-25 monthly 0.8 Format the TinyMCE Editor Toolbars Video Lesson In this lesson, learn how to customize the TinyMCE editor’s appearance by hiding and positioning the various editor menus and bars. https://player.vimeo.com/video/ 289 yes no 2025-02-04T09:00:00+01:00 no https://vueschool.io/lessons/auto-resize-the-tinymce-editor-height-based-on-content 2026-03-25 monthly 0.8 Auto Resize the TinyMCE Editor Height Based on Content Video Lesson In this lesson, learn to apply an auto adjusting height to the TinyMCE editor so that your Vue powered CRM can stay as streamlined as possible without superfluous scrollbars cluttering the interface. https://player.vimeo.com/video/ 124 yes no 2025-02-11T09:00:00+01:00 no https://vueschool.io/lessons/enhance-the-crm-challenge 2026-03-25 monthly 0.8 Enhance the CRM Challenge Video Lesson In this lesson, challenge yourself to practice adding merge tag and link list functionality to the TinyMCE powered CRM messenger. https://player.vimeo.com/video/ 81 yes no 2025-02-11T09:00:00+01:00 no https://vueschool.io/lessons/pro-tinymce-features-perfectly-fit-for-a-crm 2026-03-25 monthly 0.8 Pro TinyMCE Features Perfectly Fit for a CRM Video Lesson In this lesson, let’s take a look at how the AI plugin works and discuss how it could benefit your Vue.js powered CRM. https://player.vimeo.com/video/ 236 yes no 2025-02-11T09:00:00+01:00 no https://vueschool.io/lessons/create-custom-style-formats-to-support-buttons-headings-and-more 2026-03-25 monthly 0.8 Create Custom Style Formats to Support Buttons, Headings, And More Video Lesson Transform TinyMCE into a powerful content management system by implementing custom style formats and advanced formatting options. This lesson demonstrates how to configure the styles toolbar, creat... https://player.vimeo.com/video/ 306 yes no 2025-02-11T09:00:00+01:00 no https://vueschool.io/lessons/create-in-page-anchors-with-tinymce 2026-03-25 monthly 0.8 Create In-Page Anchors with TinyMCE Video Lesson In this lesson, master in-page navigation with TinyMCE's anchor plugin to create user-friendly, shareable content sections. https://player.vimeo.com/video/ 115 yes no 2025-02-18T09:00:00+01:00 no https://vueschool.io/lessons/prevent-loosing-unsaved-changes-with-the-autosave-plugin 2026-03-25 monthly 0.8 Prevent Loosing Unsaved Changes with the AutoSave Plugin Video Lesson In this lesson, learn how to protect content creators from data loss with TinyMCE's powerful autosave plugin. https://player.vimeo.com/video/ 235 yes no 2025-02-18T09:00:00+01:00 no https://vueschool.io/lessons/enable-advanced-code-editing-with-tinymce 2026-03-25 monthly 0.8 Enable Advanced Code Editing with TinyMCE Video Lesson In this lesson, enhance your TinyMCE powered CMS with advanced code editing capabilities using the powerful advcode plugin. https://player.vimeo.com/video/ 136 yes no 2025-02-18T09:00:00+01:00 no https://vueschool.io/lessons/pro-tinymce-features-perfectly-fit-for-a-cms 2026-03-25 monthly 0.8 Pro TinyMCE Features Perfectly Fit for a CMS Video Lesson In this lesson, learn to support collaborative content creation with TinyMCE's powerful commenting system and accessibility checker. https://player.vimeo.com/video/ 518 yes no 2025-02-18T09:00:00+01:00 no https://vueschool.io/lessons/conclusion-3 2026-03-25 monthly 0.8 Conclusion Video Lesson Thanks for watching the course! You now have the tools to build rich editing experiences within your Vue.js applications to server an infinite number of use cases. Remember to connect with TinyMCE... https://player.vimeo.com/video/ 114 yes no 2025-02-18T09:00:00+01:00 no https://vueschool.io/courses/vue-composables 2026-06-01 monthly 0.8 https://vueschool.io/lessons/introduction-to-composables 2026-05-03 monthly 0.8 Introduction to Composables Video Lesson In this course, learn all about what composables are, how you can use them to enhance your Vue projects, and most importantly how to build custom composable suited precisely to your needs. https://player.vimeo.com/video/ 471 yes no 2024-08-27T09:51:00+02:00 yes https://vueschool.io/lessons/write-your-first-composable 2026-05-03 monthly 0.8 Write Your First Composable Video Lesson In this video, let’s start writing our very first Vue composable: `useCycleList`. Learn to store your composables in a directory named `composables`, how to define and export a composable functio... https://player.vimeo.com/video/ 185 yes no 2024-08-27T09:53:00+02:00 yes https://vueschool.io/lessons/accept-arguments-for-flexible-composables 2026-05-03 monthly 0.8 Accept Arguments For Flexible Composables Video Lesson In this lesson, learn how to accept arguments for your Vue composable. Some composables will require certain arguments in order to fulfill there purpose while others require no input at all. It’s... https://player.vimeo.com/video/ 121 yes no 2024-08-27T09:56:00+02:00 yes https://vueschool.io/lessons/return-data-and-functions-from-composables 2026-05-03 monthly 0.8 Return Data and Functions From Composables Video Lesson In this lesson, learn what you should return from a composable. To return both state and functions you should return an object. Some simpler composables will return reactive state directly. https://player.vimeo.com/video/ 225 yes no 2024-08-27T09:57:00+02:00 yes https://vueschool.io/lessons/define-reactive-state-and-functions-within-a-composable 2026-05-03 monthly 0.8 Define Reactive State and Functions within a Composable Video Lesson In this lesson, we flesh out the actual implementation details of our Vue composable. We use ref to define reactive state within our composable and the computed function to defined reactive state t... https://player.vimeo.com/video/ 448 yes no 2024-08-27T09:59:00+02:00 yes https://vueschool.io/lessons/accept-reactive-composable-arguments 2026-05-03 monthly 0.8 Accept Reactive Composable Arguments Video Lesson In this lesson, learn how to accept reactive data (ie. `refs`) as arguments to Vue.js composables. https://player.vimeo.com/video/ 216 yes no 2024-09-03T09:00:00+02:00 yes https://vueschool.io/lessons/accept-flexible-component-arguments-reactive-getters-or-plain-data 2026-05-03 monthly 0.8 Accept Flexible Component Arguments (Reactive, Getters, or Plain Data) Video Lesson In this lesson, learn how to make accepting reactive data to your Vue composables as intuitive and flexible as possible. How? Reach for the built-in `toRef` function and the `MaybeRefOrGetter` TS t... https://player.vimeo.com/video/ 201 yes no 2024-09-03T09:00:00+02:00 yes https://vueschool.io/lessons/refine-a-composable-api-with-getter-setter-computed-props 2026-05-03 monthly 0.8 Refine A Composable API with Getter/Setter Computed Props Video Lesson In this video, learn how to refine a Vue composable even further by employing writable computed props. https://player.vimeo.com/video/ 273 yes no 2024-09-03T09:00:00+02:00 yes https://vueschool.io/lessons/extend-composable-functionality-with-a-config-argument 2026-05-03 monthly 0.8 Extend Composable Functionality with a Config Argument Video Lesson In this video, learn how to provide a config argument / config option to your Vue.js composable. Config options let the developer using your composable tweak it’s behavior based on their needs. M... https://player.vimeo.com/video/ 480 yes no 2024-09-03T09:00:00+02:00 yes https://vueschool.io/lessons/extend-composable-functionality-with-a-config-argument-part-2 2026-05-03 monthly 0.8 Extend Composable Functionality with a Config Argument (Part 2) Video Lesson In this lesson, we’ll finish up support for the Vue composable’s configuration options. https://player.vimeo.com/video/ 310 yes no 2024-09-03T09:00:00+02:00 yes https://vueschool.io/lessons/provide-composable-typesafety-with-typescript 2026-05-03 monthly 0.8 Provide Composable TypeSafety with TypeScript Video Lesson In this lesson, learn how to make your Vue.js composable 100% type-safe with TypeScript and learn how to eliminate a pesky `any` code smell. https://player.vimeo.com/video/ 311 yes no 2024-09-03T09:00:00+02:00 yes https://vueschool.io/lessons/conclusion-2 2026-05-03 monthly 0.8 Conclusion Video Lesson Congrats! You now know everything needed to write your own Vue.js composables. Feel free to reach out to us with any questions, comments, etc. and don’t forget to [share the course with your frie... https://player.vimeo.com/video/ 58 yes no 2024-09-03T09:00:00+02:00 yes https://vueschool.io/courses/quasar-fundamentals 2026-05-12 monthly 0.8 https://vueschool.io/lessons/a-taste-of-what-s-to-come 2026-05-17 monthly 0.8 A Taste of What’s to Come… Video Lesson You are going to love the Quasar Framework, I honestly can't wait to show you a lot of the cool stuff it can do! In this video, you’ll get a taste of some of the things that make Quasar special.... https://player.vimeo.com/video/ 561 yes no 2024-08-06T11:57:00+02:00 no https://vueschool.io/lessons/setup-using-quasar-s-vite-cli 2026-05-17 monthly 0.8 Setup Using Quasar's Vite Cli Video Lesson Getting started with Quasar is easy! In this video, you’ll Learn how to install quasar with your favorite package manager like yarn, pnpm, npm, and bun. Then, run it in spa, ssr and electron mode. https://player.vimeo.com/video/ 499 yes no 2024-08-06T12:01:00+02:00 no https://vueschool.io/lessons/setting-up-your-editor 2026-05-19 monthly 0.8 Setting up Your Editor Video Lesson Let’s setup ESLint with Quasar, and make sure everything plays nice in VsCode. We’ll be coding like a Quasar pro in no time 😎 https://player.vimeo.com/video/ 470 yes no 2024-08-06T12:02:00+02:00 no https://vueschool.io/lessons/qbtn 2026-05-19 monthly 0.8 QBtn Video Lesson Let’s get a feel for Quasar’s component API. We’ll start with the **button** component covering size, color, style, roundness and icons. We’ll also use the default slot to add a sweet looki... https://player.vimeo.com/video/ 287 yes no 2024-08-06T12:04:00+02:00 no https://vueschool.io/lessons/layouts 2026-05-19 monthly 0.8 Layouts Video Lesson By default, Quasar organizes the skeleton of our app as “Layouts” and “Pages”. In this video, we’ll explore Quasar’s genius layout system, and how we can configure a layout to our needs! https://player.vimeo.com/video/ 403 yes no 2024-08-06T12:06:00+02:00 yes https://vueschool.io/lessons/pages-and-routing 2026-05-19 monthly 0.8 Pages and Routing Video Lesson Let’s learn how to add a page in Quasar! We’ll setup some routes for pretty navigation, and explore using route params to pass data to our page! https://player.vimeo.com/video/ 467 yes no 2024-08-06T12:11:00+02:00 yes https://vueschool.io/lessons/building-a-mobile-app-capacitor-android-window 2026-05-19 monthly 0.8 Building A Mobile App (Capacitor - Android - Window) Video Lesson In this video, we'll install android studio on Windows, and run our first mobile app with Quasar using capacitor. You're going to love this, building mobile apps with Quasar is awesome!!! https://player.vimeo.com/video/ 542 yes no 2024-08-13T10:13:00+02:00 yes https://vueschool.io/lessons/building-a-mobile-app-capacitor-android-mac 2026-05-19 monthly 0.8 Building A Mobile App (Capacitor - Android - Mac) Video Lesson In this video, we'll install android studio on Mac, and run our first mobile app with Quasar using capacitor. You're going to love this, building mobile apps with Quasar is awesome!!! https://player.vimeo.com/video/ 611 yes no 2024-08-13T10:15:00+02:00 yes https://vueschool.io/lessons/building-a-mobile-app-capacitor-android-linux 2026-05-19 monthly 0.8 Building A Mobile App (Capacitor - Android - Linux) Video Lesson In this video, we'll install android studio on Linux, and run our first mobile app with Quasar using capacitor. You're going to love this, building mobile apps with Quasar is awesome!!! https://player.vimeo.com/video/ 596 yes no 2024-08-13T10:16:00+02:00 yes https://vueschool.io/lessons/building-a-mobile-app-capacitor-ios-mac 2026-05-19 monthly 0.8 Building A Mobile App (Capacitor - iOS - Mac) Video Lesson **Links** https://player.vimeo.com/video/ 535 yes no 2024-08-13T10:19:00+02:00 yes https://vueschool.io/lessons/qtable-props-and-events 2026-05-19 monthly 0.8 QTable (Props and Events) Video Lesson Quasar’s “API Cards” are going to rock your world! With a few tips and tricks about Quasar’s docs, you’ll be able to master just about any Quasar component. By the end of this video you�... https://player.vimeo.com/video/ 1102 yes no 2024-08-13T10:21:00+02:00 yes https://vueschool.io/lessons/qtable-slots-methods-and-computeds 2026-05-19 monthly 0.8 QTable (Slots, Methods and Computeds) Video Lesson Quasar’s “API Cards” are going to rock your world! With a few tips and tricks about Quasar’s docs, you’ll be able to master just about any Quasar component. By the end of this video you�... https://player.vimeo.com/video/ 890 yes no 2024-08-13T10:24:00+02:00 yes https://vueschool.io/lessons/icons 2026-05-19 monthly 0.8 Icons Video Lesson The way Quasar uses icons is pretty dang smart! In this video we’ll add different webfont icons to our app, then see how we can drasticlly reduce our apps file size with SVG icons. After that, I�... https://player.vimeo.com/video/ 701 yes no 2024-08-20T10:50:00+02:00 no https://vueschool.io/lessons/forms-creating-a-form 2026-05-19 monthly 0.8 Forms - Creating a Form Video Lesson In this video, we’ll cover the basics of making forms with Quasar. We’ll use QInput, QSelect, QCheckbox, QColor and QDialog to craft a form that can be displayed with the click of a button! https://player.vimeo.com/video/ 933 yes no 2024-08-20T10:52:00+02:00 yes https://vueschool.io/lessons/forms-extracting-the-form-to-a-dialog 2026-05-19 monthly 0.8 Forms - Extracting the Form to a Dialog Video Lesson In this video, we’ll cover the basics of making forms with Quasar. We’ll use QInput, QSelect, QCheckbox, QColor and QDialog to craft a form that can be displayed with the click of a button! https://player.vimeo.com/video/ 535 yes no 2024-08-20T10:53:00+02:00 yes https://vueschool.io/lessons/forms-basic-validation 2026-05-19 monthly 0.8 Forms - Basic Validation Video Lesson Quasar has awesome support for frontend, and backend validation. Let’s first take a look at how Quasar validates rules, then we’ll go over backend validation, and finish up with some thoughts o... https://player.vimeo.com/video/ 921 yes no 2024-08-20T10:55:00+02:00 yes https://vueschool.io/lessons/qlist 2026-05-19 monthly 0.8 QList Video Lesson Throughout this series, we’ll be exploring common Quasar components. Let’s take a look at QList. A straightforward way to show lots of different kinds of data. Along the way, we’ll use QItem,... https://player.vimeo.com/video/ 833 yes no 2024-08-20T10:56:00+02:00 no https://vueschool.io/lessons/color-typography 2026-05-19 monthly 0.8 Color & Typography Video Lesson Let’s look at a few ways we can change the look and feel of a Quasar app. We’ll talk about changing default colors, adding our own colors, styling text, and a few useful utility classes along t... https://player.vimeo.com/video/ 569 yes no 2024-08-20T10:58:00+02:00 yes https://vueschool.io/lessons/quasar-s-grid-system 2026-05-19 monthly 0.8 Quasar’s Grid System Video Lesson Quasar has a grid system built in, that uses flexbox behind the scenes. In this video we’ll cover the grid system, and touch on responsive layout along the way. https://player.vimeo.com/video/ 632 yes no 2024-08-27T09:00:00+02:00 yes https://vueschool.io/lessons/css-utility-classes-positioning-and-spacing 2026-05-19 monthly 0.8 CSS Utility Classes - Positioning and Spacing Video Lesson Quasar has lots of helpful utility classes that smoothen out the developer experience. You’ll love them! In this video we’ll cover margins, padding, positioning, classes that target devices, an... https://player.vimeo.com/video/ 576 yes no 2024-08-27T09:00:00+02:00 yes https://vueschool.io/lessons/css-utility-classes-body-visibility-and-more 2026-05-19 monthly 0.8 CSS Utility Classes - Body, Visibility and More! Video Lesson Quasar has lots of helpful utility classes that smoothen out the developer experience. You’ll love them! In this video we’ll cover margins, padding, positioning, classes that target devices, an... https://player.vimeo.com/video/ 437 yes no 2024-08-27T09:00:00+02:00 yes https://vueschool.io/lessons/boot-files-creating-a-boot-file-using-wretch 2026-05-20 monthly 0.8 Boot Files - Creating a Boot File (Using Wretch) Video Lesson Quasar’s boot files allow us to tap into the Vue instance, early in our apps lifecycle. One use for this, is adding global properties to Vue. Let’s see how we can expose global properties with... https://player.vimeo.com/video/ 477 yes no 2024-08-27T09:00:00+02:00 yes https://vueschool.io/lessons/boot-files-i18n-translating-a-quasar-app 2026-05-20 monthly 0.8 Boot Files - i18n (Translating A Quasar App) Video Lesson Quasar uses Vue I18n to make it easy to support multiple languages in your app! Let’s take a look at the I18n boot file Quasar create for us, and see how we can globalize the text in our code. https://player.vimeo.com/video/ 469 yes no 2024-08-27T09:00:00+02:00 yes https://vueschool.io/lessons/vite-plugins-unocss 2026-05-20 monthly 0.8 Vite Plugins - UnoCSS Video Lesson Some plugins require imports early on in our applications lifecycle. For example, UnoCSS needs us to import a dynamic CSS file. We want to make sure it’s added early in our application lifecycle.... https://player.vimeo.com/video/ 464 yes no 2024-09-03T09:00:00+02:00 yes https://vueschool.io/lessons/mobile-app-bluetooth-scanning-for-devices 2026-05-20 monthly 0.8 Mobile App - Bluetooth (Scanning For Devices) Video Lesson Ever wanted to build an app that supports bluetooth? Quasar makes this a breeze with the help of Capacitor, and the “bluetooth-le” package. In this video we’ll add bluetooth to our Quasar app... https://player.vimeo.com/video/ 993 yes no 2024-09-03T09:00:00+02:00 yes https://vueschool.io/lessons/mobile-app-gps-geolocation-and-capacitor-docs 2026-05-20 monthly 0.8 Mobile App - GPS (Geolocation) and Capacitor Docs Video Lesson At some point in your app building career, you’ll need to work with GPS coordinates. In this video we’ll setup geolocation with Quasar using Capacitor, and take a look at Capacitors massive lis... https://player.vimeo.com/video/ 571 yes no 2024-09-03T09:00:00+02:00 yes https://vueschool.io/lessons/plugins-notify-dialog-loading 2026-05-20 monthly 0.8 Plugins (Notify, Dialog, Loading) Video Lesson Quasar Plugins are like handy 'shortcuts' for developers, simplifying common tasks. They make it easy to show notifications, handle confirmation/input dialogs, and display full-page loading spinner... https://player.vimeo.com/video/ 628 yes no 2024-09-03T09:00:00+02:00 yes https://vueschool.io/lessons/desktop-app-notifications 2026-05-20 monthly 0.8 Desktop App - Notifications Video Lesson Let’s show a notification to our user using electron. We’ll first explore how this is done in the main process, then using the web notification api. We’ll also touch on the terms “main”,... https://player.vimeo.com/video/ 699 yes no 2024-09-03T09:00:00+02:00 yes https://vueschool.io/lessons/top-of-the-component-tree-app-vue 2026-05-20 monthly 0.8 Top of the Component Tree - App.vue Video Lesson Everything in our Quasar app is wrapped in “App.vue”. We can use this file to show spinners while the user is logging in, or hide our entrie app while the camera is being used. https://player.vimeo.com/video/ 262 yes no 2024-09-03T09:00:00+02:00 yes https://vueschool.io/lessons/top-of-the-component-tree-an-authentication-example 2026-05-20 monthly 0.8 Top of the Component Tree - An Authentication Example Video Lesson Everything in our Quasar app is wrapped in “App.vue”. We can use this file to show spinners while the user is logging in, or hide our entrie app while the camera is being used. https://player.vimeo.com/video/ 646 yes no 2024-09-03T09:00:00+02:00 yes https://vueschool.io/lessons/component-bonanza 2026-05-20 monthly 0.8 Component Bonanza Video Lesson Let’s go on a rampage! This video is designed to give you a wide view of Quasar’s component library, and we’re going to move fast. So abuse that pause button, take as long as you need on each... https://player.vimeo.com/video/ 900 yes no 2024-09-10T09:42:00+02:00 yes https://vueschool.io/lessons/boot-files-understanding-and-using-the-axios-boot-file 2026-05-19 monthly 0.8 Boot Files - Understanding, and Using the Axios Boot File Video Lesson Quasar’s boot files allow us to tap into the Vue instance, early in our apps lifecycle. One use for this, is adding global properties to Vue. Let’s see how we can expose global properties with... https://player.vimeo.com/video/ 561 yes no 2024-08-27T09:00:00+02:00 yes https://vueschool.io/lessons/mobile-app-bluetooth-associating-devices-with-friends 2026-05-20 monthly 0.8 Mobile App - Bluetooth (Associating Devices With Friends) Video Lesson Ever wanted to build an app that supports bluetooth? Quasar makes this a breeze with the help of Capacitor, and the “bluetooth-le” package. In this video we’ll add bluetooth to our Quasar app... https://player.vimeo.com/video/ 1099 yes no 2024-09-03T09:00:00+02:00 yes https://vueschool.io/lessons/tailwind-css 2026-05-20 monthly 0.8 Tailwind CSS Video Lesson In this video, we’ll setup Tailwind with Quasar in minutes. First we’ll install tailwindcss, initialize some files with npx, do a little config and we’ll be good to go! https://player.vimeo.com/video/ 231 yes no 2024-09-03T15:57:00+02:00 no https://vueschool.io/lessons/component-rampage-part-1 2026-05-20 monthly 0.8 Component Rampage Part 1 Video Lesson Let’s go on a rampage! This video is designed to give you a wide view of Quasar’s component library, and we’re going to move fast. So abuse that pause button, take as long as you need on each... https://player.vimeo.com/video/ 804 yes no 2024-09-10T09:46:00+02:00 yes https://vueschool.io/lessons/component-rampage-part-2 2026-05-21 monthly 0.8 Component Rampage Part 2 Video Lesson Let’s go on a rampage! This video is designed to give you a wide view of Quasar’s component library, and we’re going to move fast. So abuse that pause button, take as long as you need on each... https://player.vimeo.com/video/ 732 yes no 2024-09-10T09:49:00+02:00 yes https://vueschool.io/lessons/component-rampage-part-3 2026-05-21 monthly 0.8 Component Rampage Part 3 Video Lesson Let’s go on a rampage! This video is designed to give you a wide view of Quasar’s component library, and we’re going to move fast. So abuse that pause button, take as long as you need on each... https://player.vimeo.com/video/ 659 yes no 2024-09-10T09:50:00+02:00 yes https://vueschool.io/lessons/component-rampage-part-4 2026-05-21 monthly 0.8 Component Rampage Part 4 Video Lesson Let’s go on a rampage! This video is designed to give you a wide view of Quasar’s component library, and we’re going to move fast. So abuse that pause button, take as long as you need on each... https://player.vimeo.com/video/ 823 yes no 2024-09-10T09:53:00+02:00 yes https://vueschool.io/lessons/component-rampage-part-5 2026-05-21 monthly 0.8 Component Rampage Part 5 Video Lesson Let’s go on a rampage! This video is designed to give you a wide view of Quasar’s component library, and we’re going to move fast. So abuse that pause button, take as long as you need on each... https://player.vimeo.com/video/ 884 yes no 2024-09-10T09:55:00+02:00 yes https://vueschool.io/lessons/component-rampage-part-6 2026-05-21 monthly 0.8 Component Rampage Part 6 Video Lesson Let’s go on a rampage! This video is designed to give you a wide view of Quasar’s component library, and we’re going to move fast. So abuse that pause button, take as long as you need on each... https://player.vimeo.com/video/ 548 yes no 2024-09-10T09:58:00+02:00 yes https://vueschool.io/courses/real-time-data-with-laravel-reverb-and-vue-js 2026-05-12 monthly 0.8 https://vueschool.io/lessons/what-is-laravel-reverb 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1873566157-4949eb07a655d548481d73021f9accf37dee509413f413009a4342e1676e473a-d_1280x720?r=pad What is Laravel Reverb? Video Lesson In this lesson, learn what Laravel Reverb is and why you might need it for you applications. Laravel Reverb provides real time data support and is a great addition to the Laravel + Vue.js stack. https://player.vimeo.com/video/ 95 yes no 2024-06-18T09:00:00+02:00 no https://vueschool.io/lessons/bootstrap-a-laravel-application-and-install-reverb 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1873567216-465ef47f67480f442278ff2df9d0eccc63bcbfef5fea80f7b3f12d30ae34e5e6-d_1280x720?r=pad Bootstrap a Laravel Application and Install Reverb Video Lesson In this lesson, setup a new Laravel Project with Laravel Breeze and Reverb. Get an overview of the various files added and amended during the installation process. https://player.vimeo.com/video/ 358 yes no 2024-06-18T09:00:00+02:00 no https://vueschool.io/lessons/your-first-event-how-every-real-time-message-starts 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1873568305-ab8ee61748c9feb17c46cc866a78567d26431ff93b0df38e0fc24b3e1ec9da33-d_1280x720?r=pad Your First Event (How Every Real-Time Message Starts) Video Lesson In this lesson, create a Laravel Event to broadcast to the client via Laravel Reverb. Use Echo to listen for the event on the client side. Finally, make sure you have all the proper processes runni... https://player.vimeo.com/video/ 331 yes no 2024-06-18T09:00:00+02:00 no https://vueschool.io/lessons/the-laravel-queue-and-reverb 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1873569029-5a7f33f97942189ad48a5d4538a7cdafdb2997ef2422e5853904d46aa891e502-d_1280x720?r=pad The Laravel Queue and Reverb Video Lesson In this lesson, learn the relationship between Laravel Reverb, Events, and the Job Queue. By default events that implement `ShouldBroadcast` run on the JobQueue. If you want to run the synchronousl... https://player.vimeo.com/video/ 201 yes no 2024-06-18T09:00:00+02:00 no https://vueschool.io/lessons/listening-to-laravel-reverb-events-in-vue 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1873569864-90fde08f5c88f73302585d3587ff7bba221040c83e70fe8c3e1c56bb67b2b591-d_1280x720?r=pad Listening to Laravel Reverb Events in Vue Video Lesson In this lesson, learn how to react to real time events from Laravel Reverb in the context of a Vue.js component. https://player.vimeo.com/video/ 246 yes no 2024-06-18T09:00:00+02:00 no https://vueschool.io/lessons/send-messages-in-real-time-with-vue 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1879511041-0d504fd61011d9a9662011d7d53ff15e9dcd6aef7378d99053f3a458f9a1fb2c-d_1280x720?r=pad Send Messages in Real Time With Vue Video Lesson In this lesson, we’ll walk through a more realistic example of sending real time data with Laravel Reverb to a Vue.js front-end. https://player.vimeo.com/video/ 853 yes no 2024-06-25T09:00:00+02:00 no https://vueschool.io/lessons/sending-private-real-time-data-with-reverb 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1879513208-aeb706127059e6c3a362d2037aebfa4b699516073034df3a6c9c8e4ab8c31717-d_1280x720?r=pad Sending Private Real Time Data with Reverb Video Lesson In this lesson, learn how to limit who can subscribe to Reverb’s real time data events by allowing only logged in users to send messages. https://player.vimeo.com/video/ 292 yes no 2024-06-25T09:00:00+02:00 no https://vueschool.io/lessons/sending-private-scoped-real-time-data-with-reverb 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1879515245-4181f9495d927a81872fd97751ca5eaa6d5e564424f56140647d4f53c2a77d65-d_1280x720?r=pad Sending Private Scoped Real Time Data with Reverb Video Lesson In this lesson, learn how to scope down subscriptions even further by limiting a channel to only a single user. https://player.vimeo.com/video/ 234 yes no 2024-06-25T09:00:00+02:00 no https://vueschool.io/lessons/real-time-data-with-laravel-reverb-and-vue-js-conclusion 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1879517150-fe0d0df212dc7439ce7dac1ca090bc2c9d32a107b52f8727025aee0c21834a5f-d_1280x720?r=pad Conclusion Video Lesson Thanks for watching the course! We hope you enjoyed this quick guide through working with Laravel Reverb and Vue.js for easy real-time data support. https://player.vimeo.com/video/ 78 yes no 2024-06-25T09:00:00+02:00 no https://vueschool.io/courses/the-vuejs-3-master-class 2026-02-04 monthly 0.8 https://vueschool.io/lessons/introduction-and-project-over-vue 2025-09-03 monthly 0.8 https://i.vimeocdn.com/video/1859882797-d5d60d37a3705d695ef9e7c4a9eb80a93371e8e234286d5f652678d5d0709485-d_1280x720?r=pad Introduction and Project Over-Vue Video Lesson In this introductory video, you'll meet the instructor, Mostafa (Hi!), and get a glimpse of what you'll be learning. Here's what you can expect: https://player.vimeo.com/video/ 179 yes no 2024-05-28T13:46:00+02:00 no https://vueschool.io/lessons/learning-environment-intro 2026-05-25 monthly 0.8 https://i.vimeocdn.com/video/1859942782-328de9be75522d467b3923c01b092ed4003e84cfaef818cf5ba1390f0b7bcbf4-d_1280x720?r=pad Learning Environment Intro Video Lesson This video will guide you through the features available in the Vue.js 3 Masterclass learning environment. https://player.vimeo.com/video/ 195 yes no 2024-05-28T13:46:00+02:00 no https://vueschool.io/lessons/prerequisites-and-initial-environment 2026-05-16 monthly 0.8 https://i.vimeocdn.com/video/1859894099-ab913e136f4b9634243fa33311c55b70bf7e6dff03dafbf8a33a0c0767bb7921-d_1280x720?r=pad Prerequisites and Initial Environment Video Lesson This lesson equips you with the essential tools you'll need to kickoff your Vue.js 3 development journey: https://player.vimeo.com/video/ 321 yes no 2024-05-28T13:46:00+02:00 yes https://vueschool.io/lessons/scaffolding-a-lightning-fast-vue-js-3-app-with-vite 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1859894952-01855e4de33404dc2cdb917fa2e3dc0419435a5ab19ed893a5d1d0129a380de5-d_1280x720?r=pad Scaffolding a Lightning-Fast Vue.js 3 App with Vite Video Lesson Vue.js is so easy to start working with. We’ll explore two different ways you can install Vue.js, depending on your needs: https://player.vimeo.com/video/ 211 yes no 2024-05-28T13:46:00+02:00 yes https://vueschool.io/lessons/powering-up-vs-code-p1-vue-js-3-official-extension 2025-09-03 monthly 0.8 https://i.vimeocdn.com/video/1859895644-9a56a2e922fd47bbe569161a6cf68b58711089c70c75e2be16cfbf21cded90a0-d_1280x720?r=pad Powering Up VS Code P1: Vue.js 3 Official Extension Video Lesson This lesson equips you with the essential tools to kickstart your Vue.js development. We'll guide you through configuring Visual Studio Code (VS Code) for a smooth Vue.js experience. We’ll learn... https://player.vimeo.com/video/ 315 yes no 2024-05-28T13:46:00+02:00 yes https://vueschool.io/lessons/powering-up-vs-code-p2-eslint-for-vue-js-3 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1859896285-522d6044967c9a8f9132c8c882447c02d3ac0624633507a1c01d64d4ca5ba7e7-d_1280x720?r=pad Powering Up VS Code P2: Eslint for Vue.js 3 Video Lesson **⚠️ Update:** Vue.js now uses ESLint 9 by default for new projects. We’ve released a video that walks you through upgrading to ESLint 9 and setting up the flat config — [check it out](http... https://player.vimeo.com/video/ 669 yes no 2024-05-28T13:46:00+02:00 yes https://vueschool.io/lessons/powering-up-vs-code-p3-prettier-for-vue-js-3 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1859896971-90774b2b9474b05ca39008663553fb67a07fe9d59ba33c6217b8f6821c1c6839-d_1280x720?&r=pad Powering Up VS Code P3: Prettier for Vue.js 3 Video Lesson Meet Prettier! A code formatter that enforces consistent styling across your entire Vue.js project. Consistent formatting improves code readability, maintainability, and collaboration. https://player.vimeo.com/video/ 339 yes no 2024-05-28T13:46:00+02:00 yes https://vueschool.io/lessons/git-basics-for-every-developer 2026-05-12 monthly 0.8 https://i.vimeocdn.com/video/1859953624-bde02cd771074d7b650491abe4a01c59a4ace24b8f2369c6d9c159af3c6748ed-d_1280x720?r=pad Git Basics for Every Developer Video Lesson This lesson provides a crash course on Git, a fundamental version control system for developers, and Github, the home for your Git repositories. https://player.vimeo.com/video/ 431 yes no 2024-05-28T13:46:00+02:00 no https://vueschool.io/lessons/navigating-the-project-directories-and-boilerplate-cleanup 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1859898449-c141e84234bfcb92e66c6042ea948d8b118f5e3c8104d95f453db0612e42ca2e-d_1280x720?r=pad Navigating the Project Directories and Boilerplate Cleanup Video Lesson In this video, we'll kick off our Vue.js app development by exploring the project structure generated by the **`create-vue`** command. Next, we'll clean up the boilerplate code to prepare for our c... https://player.vimeo.com/video/ 456 yes no 2024-05-28T13:46:00+02:00 yes https://vueschool.io/lessons/setting-up-vue-router-and-navigation-with-router-link 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1859899164-ce0e2dbebe1bcf905af0b9fc59aeeeba642f93719cb0d8d94d99db6e886e8e2a-d_1280x720?r=pad Setting Up Vue Router and Navigation with Router Link Video Lesson As we plan our project management app, organizing it into different pages is essential. We need a page for viewing all projects and another for viewing a specific project. To navigate smoothly betw... https://player.vimeo.com/video/ 450 yes no 2024-05-28T13:46:00+02:00 yes https://vueschool.io/lessons/lazy-load-routes-with-vite-s-dynamic-imports-in-vue-router 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1859899832-5f2bc3ff7e8818f61e579a6a92d8b14f515aaf179a78e6e2fcfa6b1159619a37-d_1280x720?r=pad Lazy Load Routes with Vite’s Dynamic Imports in Vue Router Video Lesson Even well-structured Vue Router setups can have hidden performance issues. One common pitfall while working with Vue Router is shipping all page view components to the browser upfront. This can blo... https://player.vimeo.com/video/ 137 yes no 2024-05-28T13:46:00+02:00 yes https://vueschool.io/lessons/create-dynamic-routes-with-wildcards-in-vue-router 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1859900558-21932cd1a43249793a514f0e305d9723a77f48c163777273138d551deb1b2ff4-d_1280x720?r=pad Create Dynamic Routes with Wildcards in Vue Router Video Lesson It's time to enhance our routing setup with dynamic routes using wildcards in Vue Router. This feature allows us to create dedicated pages for each project. We'll also explore Vue Router’s **`use... https://player.vimeo.com/video/ 258 yes no 2024-05-28T13:46:00+02:00 yes https://vueschool.io/lessons/supabase-the-perfect-backend-for-vue-js-frontend 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1863366009-064d48ecd7c4fc31a8936c3932f96197e065c044ee6504c9e672617a13c943a9-d_1280x720?&r=pad Supabase: The Perfect Backend for Vue.js Frontend Video Lesson Building a frontend is only half the story! We need a powerful backend to store our app's data, handle user authentication, and keep things running smoothly. That's where Supabase comes in. This op... https://player.vimeo.com/video/ 156 yes no 2024-06-04T09:00:00+02:00 yes https://vueschool.io/lessons/getting-started-with-shadcn-ui-and-vuejs 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1896464977-22841674ca149a5721d4d4abcfb0aaae6bd388af9c8f944fb124a270bb6cb2c9-d_1280x720?r=pad Getting Started with Shadcn UI and Vue.js Video Lesson Shadcn is a great option to quickly build robust Vue apps. It provides a set of re-usable components that we can copy and paste into our app. In this lesson, we’ll introduce you to Shadcn-vue and... https://player.vimeo.com/video/ 398 yes no 2024-07-09T09:52:00+02:00 yes https://vueschool.io/lessons/integrate-unplugin-auto-import-with-vue-and-vite 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1907802184-e3241797eb7a53cd2638c5dec5495ec105ab0c430d269ddef9b332fc92e17f89-d_1280x720?r=pad Integrate unplugin-auto-import with Vue and Vite Video Lesson In this lesson, we streamline our Vue.js project setup using `unplugin-auto-import` to automate imports and keep our dependencies up to date. We'll cover: https://player.vimeo.com/video/ 433 yes no 2024-07-30T09:17:00+02:00 yes https://vueschool.io/lessons/create-dynamic-user-profiles 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1943563547-7925320bfea52c36308c768ee601a2d830ce83d30e7ae1b84dce505cb294c8c5-d_1280x720?r=pad Create Dynamic User Profiles Video Lesson This lesson covers creating a dynamic user profile page that fetches and displays user data based on the username in the URL. We’ll adjust the `profileQuery` to allow flexible, column-based searc... https://player.vimeo.com/video/ 423 yes no 2024-10-29T08:28:00+01:00 yes https://vueschool.io/lessons/catch-all-undefined-routes-and-create-404-not-found-page-in-vue-router 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1859901205-474fd92e8695a02b7cd792d65ee62f96861b5cba20a1121830c1a5479dce1a84-d_1280x720?r=pad Catch All Undefined Routes and Create 404 Not Found Page in Vue Router Video Lesson Handling undefined routes is crucial to providing proper feedback to users when they land on a non-existent page. We’ll set up catch-all routes in Vue Router to manage 404 errors effectively. By... https://player.vimeo.com/video/ 308 yes no 2024-06-04T09:00:00+02:00 yes https://vueschool.io/lessons/set-up-auto-routes-in-vue-router-with-typescript-support 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1877291476-8db32cd126a7be50e196a6804f153d64eac63da26c53268b967d168961ddb8d1-d_1280x720?r=pad Set Up Auto Routes in Vue Router with TypeScript Support Video Lesson Setting up auto routes in Vue Router using file-based routing and TypeScript simplifies our routing setup, making our codebase cleaner and more manageable. We'll use **`unplugin-vue-router`** to au... https://player.vimeo.com/video/ 357 yes no 2024-06-04T09:00:00+02:00 no https://vueschool.io/lessons/refactor-vue-js-codebase-for-file-based-routing 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1863365612-0d93bdb0beeea6604330bc9d8f7ada7bcc272dd1e2113aa42c7df41d1dd8a00f-d_1280x720?r=pad Refactor Vue.js Codebase for File-Based Routing Video Lesson In this lesson, we refactor the codebase to apply the concept of file-based routing in our Vue.js app. Discover how to effortlessly map directories and file names to routes, create dynamic and nest... https://player.vimeo.com/video/ 339 yes no 2024-06-04T09:00:00+02:00 yes https://vueschool.io/lessons/integrate-supabase-and-connect-with-vue-js 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1863366391-4f50af8bd2bcff5308ced81a3cdc9a426129525cfaeacfb4de66294955f807c7-d_1280x720?&r=pad Integrate Supabase and Connect with Vue.js Video Lesson In this video, we’ll show you how to set up Supabase, your open-source backend solution. We'll guide you through creating a Supabase account, organization, and project. This project acts as your... https://player.vimeo.com/video/ 365 yes no 2024-06-04T09:00:00+02:00 yes https://vueschool.io/lessons/secure-secret-app-data-with-vite-environment-variables 2025-09-04 monthly 0.8 https://i.vimeocdn.com/video/1863366747-0c339b07de83619b9b3979fac8c113ef25ce4a8574e37541e6032fba31fc3b15-d_1280x720?r=pad Secure Secret App Data with Vite Environment Variables Video Lesson Our application's security should always be a priority. Therefore, we need to spend some time understanding how to secure and hide sensitive data. https://player.vimeo.com/video/ 449 yes no 2024-06-04T09:00:00+02:00 yes https://vueschool.io/lessons/use-supabase-ui-to-create-tables-and-rows 2025-09-04 monthly 0.8 https://i.vimeocdn.com/video/1867971314-326e4ce4ea81476fc9c0265927b86765130cc9496b8a2b2c97ef2640d8bece69-d_1280x720?r=pad Use Supabase UI to Create Tables and Rows Video Lesson In this lesson, we’ll start setting up and populating our PostgreSQL database using the Supabase UI for the PostgreSQL. We’ll create a table for our projects and add columns to it. https://player.vimeo.com/video/ 306 yes no 2024-06-11T09:00:00+02:00 yes https://vueschool.io/lessons/use-supabase-sql-editor-to-create-tables-and-rows 2025-09-04 monthly 0.8 https://i.vimeocdn.com/video/1867971779-b85f0f1181091f6b9c68a7a42858ee3163d0d76aee5a5d9b827aaedc66977072-d_1280x720?&r=pad&region=us Use Supabase SQL Editor to Create Tables and Rows Video Lesson In this lesson, you'll learn how to use PostgreSQL syntax for defining types and building queries. https://player.vimeo.com/video/ 342 yes no 2024-06-11T09:00:00+02:00 yes https://vueschool.io/lessons/use-supabase-cli-in-vue-js-and-connect-to-the-remote-project 2025-09-04 monthly 0.8 https://i.vimeocdn.com/video/1867972116-41aa24b152abae95b2ed172adc281f23c58d0d1b06855465e97d45efc1a29b5d-d_1280x720?r=pad Use Supabase CLI in Vue.js and Connect to the Remote Project Video Lesson In this lesson, we'll initialize local Supabase playground using the Supabase CLI, then connect it to your live Supabase project. This will allow us to control the remote Database without leaving o... https://player.vimeo.com/video/ 307 yes no 2024-06-11T09:00:00+02:00 yes https://vueschool.io/lessons/create-supabase-database-migration-files-in-vue-js 2025-09-04 monthly 0.8 https://i.vimeocdn.com/video/1867972351-33104f307a970ab779266b4cd3bf895da7449c5505d8fb6d58c08dea573b3e3c-d_1280x720?r=pad Create Supabase Database Migration Files in Vue.js Video Lesson In this lesson, we'll create a migration file inside your Vue.js app that acts like a guide for the Database. This guide will tell Supabase how to build the "projects" table. https://player.vimeo.com/video/ 281 yes no 2024-06-11T09:00:00+02:00 yes https://vueschool.io/lessons/getting-started-with-fakerjs 2025-09-04 monthly 0.8 https://i.vimeocdn.com/video/1873583639-49ae89f539115820fd5e01a6a105f89563259efcbefa2fcdc8b1e1dd2f3fa6ae-d_1280x720?r=pad Getting Started with Fakerjs Video Lesson During the development process of our app, filling the database with manual data can be slow and tedious. This repetitive task takes time away from focusing on core functionalities. https://player.vimeo.com/video/ 297 yes no 2024-06-18T08:55:00+02:00 yes https://vueschool.io/lessons/set-up-supabase-javascript-client-in-node-environment 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1873580079-3a8fc133cb3c4c70de67be15fa700ccca57feeb0e912b757196461791a5dab14-d_1280x720?r=pad Set Up Supabase JavaScript Client in Node Environment Video Lesson In this lesson, we'll set up the Supabase client in the `seed.js` file and configure our environment variables using the new Node v20+ experimental feature for `.env` files. https://player.vimeo.com/video/ 324 yes no 2024-06-18T08:57:00+02:00 yes https://vueschool.io/lessons/seeding-the-supabase-remote-database-with-fakerjs 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1873580159-409880921dbdd019ecc3023da69147c468afaffa3de5637747a0fcef02e4142f-d_1280x720?r=pad Seeding the Supabase Remote Database with Fakerjs Video Lesson In this lesson, we’ll use Fakerjs to generate our data and seed the remote database. https://player.vimeo.com/video/ 365 yes no 2024-06-18T08:59:00+02:00 yes https://vueschool.io/lessons/insert-bulk-entries-into-supabase-database 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1873589202-288f2d6a203ac6a0408194e742fe339d456b4e3aa33f96e28fe2674345d62753-d_1280x720?r=pad Insert Bulk Entries Into Supabase Database Video Lesson In this lesson, we’ll use Supabase Bulk Create feature to insert multiple rows to a table. https://player.vimeo.com/video/ 177 yes no 2024-06-18T09:02:00+02:00 yes https://vueschool.io/lessons/query-supabase-from-vue-js-script-setup 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1880619914-1e224d5d2c5431a2662204e6c9322ac5fead24e34cdfc6e63d67ff794098c785-d_1280x720?r=pad Query Supabase from Vue.js Script Setup Video Lesson With the database setup and seeded with some test data, it’s time we start fetching our data from the Supabase Database and display it in the Vue.js App. https://player.vimeo.com/video/ 320 yes no 2024-06-25T09:32:00+02:00 yes https://vueschool.io/lessons/use-immediately-invoked-function-expression-in-script-setup 2025-09-04 monthly 0.8 https://i.vimeocdn.com/video/1880617881-47d32b08a61ef51742f09e5861a7ce52ba1e68c8bdf290ca7cf1ec7b4d8e9e9f-d_1280x720?r=pad Use Immediately Invoked Function Expression in Script Setup Video Lesson In this lesson, we’ll explore how to use Immediately Invoked Function Expressions (IIFEs) in Vue.js with the script setup. You’ll learn how self-executing anonymous functions can be handy for t... https://player.vimeo.com/video/ 187 yes no 2024-06-25T09:34:00+02:00 yes https://vueschool.io/lessons/introduction-to-vue-js-reactivity-system-and-using-refs 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1888045181-6648b2cf867125c958af3ea533fd1d200b82ee75de48739428a9d66717a593bd-d_1280x720?r=pad Introduction to Vue.js Reactivity System and Using Refs Video Lesson Time to utilize Vue.js reactivity system to make our app dynamic. In this lesson, we'll start with a simple JavaScript approach to highlight the difference between typical variables and reactive va... https://player.vimeo.com/video/ 322 yes no 2024-07-02T09:10:00+02:00 yes https://vueschool.io/lessons/provide-typescript-type-definitions-for-refs-in-vue-js-script-setup 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1888046195-45fac8af13cd1ff24892eac9c4f6bf41ea4b27417a7481909163b597377e5b54-d_1280x720?r=pad Provide TypeScript Type Definitions for Refs in Vue.js Script Setup Video Lesson In this lesson, we’ll step up our game by integrating TypeScript into our Vue.js project. You’ll learn how to add precise type definitions for refs, ensuring our code is safe and error-free. We... https://player.vimeo.com/video/ 228 yes no 2024-07-02T09:12:00+02:00 yes https://vueschool.io/lessons/add-typescript-support-to-supabase-in-vue-js 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1888049494-fdb130f739581b70ca1d5d0e05a39f2fcca62d8f24807ce3908a939c52cb84e1-d_1280x720?r=pad Add TypeScript Support to Supabase in Vue.js Video Lesson With TypeScript, we’ll have a clearer view of our database structure right from your code editor, making development more efficient and enjoyable. In this lesson, we’ll teach you how to enhance... https://player.vimeo.com/video/ 398 yes no 2024-07-02T09:14:00+02:00 yes https://vueschool.io/lessons/create-a-new-page-for-tasks-with-database-migration-seed-and-types 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1888042749-60d8871044517f0f4ec02463e2f004e72448d1f618d24f8dcfcfd536ec52441e-d_1280x720?r=pad Create a New Page for Tasks with Database Migration, Seed and Types Video Lesson In this lesson, we'll put everything we learnt together and create a new page for tasks. We’ll start by designing the table schema and generate TypeScript types for it. Then, we'll write a seedin... https://player.vimeo.com/video/ 474 yes no 2024-07-02T09:17:00+02:00 yes https://vueschool.io/lessons/prepare-the-vue-app-layout-with-tailwindcss 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1896461231-3fcdc599412ea4ffd1790785ec1116d7d70db9f00825e025664f814d819bd846-d_1280x720?r=pad Prepare the Vue App Layout with TailwindCSS Video Lesson In this lesson, we’ll manually enable Shadcn dark theme using TailwindCSS classes. We’ll also build a top navigation bar to provide our users with easy access to important features and pages. https://player.vimeo.com/video/ 360 yes no 2024-07-09T09:57:00+02:00 yes https://vueschool.io/lessons/utilize-shadcn-input-and-dropdown-components 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1896472557-143f17a8d2d10fecce528d99e6faeed849f337ec8b5862708bc8226ad3a5fe4c-d_1280x720?r=pad Utilize Shadcn Input and Dropdown Components Video Lesson We’re getting started with Shadcn to improve our development workflow. In this lesson, we’ll grab components from Shadcn-Vue into our app to polish the top navigation bar. https://player.vimeo.com/video/ 352 yes no 2024-07-09T09:59:00+02:00 yes https://vueschool.io/lessons/use-lucide-icons-with-iconify-and-vue-js 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1896474727-2fadbb68ac0bb299077cc565baca6a42ac5af7d89193f8c609ccf26ffed3d4d6-d_1280x720?r=pad Use Lucide Icons with Iconify and Vue.js Video Lesson In this lesson, learn about Iconify and gain access to thousands of icons. In this video, we’ll introduce Iconify and show you how to utilize it from within our Vue project. https://player.vimeo.com/video/ 230 yes no 2024-07-09T10:02:00+02:00 yes https://vueschool.io/lessons/iconify-icon-web-component-in-vue-js 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1900217041-2cdeace7b3a89479d628c0baa23eebd904fb2679ed602c25c30fc64aab978019-d_1280x720?r=pad Iconify Icon Web Component in Vue.js Video Lesson In this lesson, we'll integrate Iconify's icon web component into our Vue.js project for a consistent and optimized way of using icons. You'll learn about web components, how to register them with... https://player.vimeo.com/video/ 379 yes no 2024-07-16T09:36:00+02:00 yes https://vueschool.io/lessons/create-a-sidebar-and-organize-code-with-vue-components 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1900218438-35baa8dff28d9aef17b09339eec5115363418d4c390415a391494a3240c2f493-d_1280x720?r=pad Create a Sidebar and Organize Code with Vue Components Video Lesson In this lesson, we'll add a sidebar for easier navigation and extract the top navbar and sidebar into separate components. https://player.vimeo.com/video/ 294 yes no 2024-07-16T09:38:00+02:00 yes https://vueschool.io/lessons/extract-a-reusable-vue-component-for-sidebar-links 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1900219946-d0f5d4482879b64c70e5ea050dcf309bee6fe178bdbb65b117aa32ba053bdd18-d_1280x720?r=pad Extract a Reusable Vue Component for Sidebar Links Video Lesson In this lesson, we’ll create a reusable Vue component for sidebar links to streamline navigation in our project. We’ll start by moving existing sidebar link code into a new `SidebarLinks.vue` c... https://player.vimeo.com/video/ 417 yes no 2024-07-16T09:40:00+02:00 yes https://vueschool.io/lessons/configure-vue-router-active-links-with-tailwindcss 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1900221484-7cbe4047c411af6c7de867c7a0dc269e04ab21a137f43c695d9ceacfa0f225b6-d_1280x720?r=pad Configure Vue Router Active Links with TailwindCSS Video Lesson In this lesson, we’ll explore how to style active links in our Vue.js project using Tailwind CSS. We’ll learn how to leverage Vue Router’s ability to customize default classes for active link... https://player.vimeo.com/video/ 218 yes no 2024-07-16T09:42:00+02:00 yes https://vueschool.io/lessons/create-layout-vue-js-component 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1904461571-0f71915bc8ebf23f6f79e3d47d5860eb5285937409403399fa0aebff18bf7b11-d_1280x720?r=pad Create Layout Vue.js Component Video Lesson In this lesson, we’ll reorganize our layout structure for better maintainability by creating an `AuthLayout.vue` component. This setup allows us to dynamically switch between layouts, such as dif... https://player.vimeo.com/video/ 290 yes no 2024-07-23T10:31:00+02:00 yes https://vueschool.io/lessons/build-a-vue-js-data-table-component-with-shadcn-and-tanstack 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1904456950-27fc7199e49088ff2b8b40e429a6f7e2357446ef32f38ae7297013204043ae5a-d_1280x720?r=pad Build a Vue.js Data Table Component with Shadcn and TanStack Video Lesson In this video, we’ll use Shadcn-vue and TanStack Table to create a dynamic, reusable data table in Vue.js. You’ll learn how to install and integrate these tools, define a table structure, and r... https://player.vimeo.com/video/ 384 yes no 2024-07-23T10:33:00+02:00 no https://vueschool.io/lessons/customize-the-data-table-implementation-for-our-vue-js-app 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1904471277-00845d5919b7ab29fdc32be4cb01d65a0e56510ef0df88262a1c6aaf6b3425df-d_1280x720?r=pad Customize the Data Table Implementation for Our Vue.js App Video Lesson In this lesson, we'll customize the DataTable implementation to better fit our Vue.js application. You'll learn how to tailor column definitions, integrate your data seamlessly, and make necessary... https://player.vimeo.com/video/ 373 yes no 2024-07-23T10:35:00+02:00 yes https://vueschool.io/lessons/create-a-data-table-for-the-projects-page 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1904471863-8977c5b237b5cb76a43cd543ffa1a2944796a0574f028fcf58b9e951a1fc214e-d_1280x720?r=pad Create a Data Table for the Projects Page Video Lesson In this lesson, you'll learn how to extend your `DataTable` component to support both projects and tasks. https://player.vimeo.com/video/ 243 yes no 2024-07-23T10:39:00+02:00 yes https://vueschool.io/lessons/make-the-data-table-cells-clickable-with-routerlink 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1907799510-31eea960a1c7610d7f3180569b400de2007e27bef45d39c63d23c9a6a65121a9-d_1280x720?r=pad Make the Data Table Cells Clickable with RouterLink Video Lesson In this lesson, we’ll enhance the DataTable component to make table cells clickable for dynamic navigation. https://player.vimeo.com/video/ 418 yes no 2024-07-30T09:09:00+02:00 yes https://vueschool.io/lessons/exploring-alternative-ways-to-integrate-shadcn-and-tanstack-datatable 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1907800885-d7950630673cd49df3da6f28b037e1eef2fd7e80dddbf611762854bf62f6537a-d_1280x720?r=pad Exploring Alternative Ways to Integrate Shadcn and TanStack DataTable Video Lesson In this lesson, we dive into the flexibility of Vue.js by exploring different methods for rendering table columns in our DataTable component. We'll revisit our DataTable component setup and experim... https://player.vimeo.com/video/ 556 yes no 2024-07-30T09:12:00+02:00 yes https://vueschool.io/lessons/configure-unplugin-auto-import-for-unplugin-vue-router 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1907803147-a97647f63b2912b5ca4d3fb816cd55f0ad1943258aa2864e5c72d025abbb9a6f-d_1280x720?r=pad Configure unplugin-auto-import for unplugin-vue-router Video Lesson The Vue Router preset we get from unplugin-auto-import won’t be the perfect match for our app. This is because our app isn’t just using vue-router, it uses unplugin-vue-router package instead.... https://player.vimeo.com/video/ 306 yes no 2024-07-30T09:20:00+02:00 yes https://vueschool.io/lessons/implement-components-auto-importing-feature-in-vue-js-3 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1911371070-2775a2c3b76bc943dac0d472abb42447cc86b6892a983e624f708e2f6a13d78a-d_1280x720?r=pad Implement Components Auto Importing Feature in Vue.js 3 Video Lesson Following our workflow improvements campaign, in this video, we'll show you how to implement on-demand auto-importing for Vue.js components. https://player.vimeo.com/video/ 399 yes no 2024-08-06T09:45:00+02:00 yes https://vueschool.io/lessons/use-vue-js-suspense-component-to-handle-async-dependencies 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1911371299-afad415652277aabcf37fceebb23c23b4331304a7195f356d02dcbf469da4a25-d_1280x720?r=pad Use Vue.js Suspense Component to Handle Async Dependencies Video Lesson In this lesson, we’ll master handling async dependencies in Vue using the `Suspense` component. By leveraging this Vue.js feature, we'll manage top-level promises and their loading states, ensuri... https://player.vimeo.com/video/ 384 yes no 2024-08-06T09:48:00+02:00 no https://vueschool.io/lessons/enhance-vue-router-with-suspense-for-async-components 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1911371500-0d58552aaefb8e556f925283fc169ea11ef4a8ee6dd0e31bede84909edc7f5d2-d_1280x720?r=pad Enhance Vue Router with Suspense for Async Components Video Lesson In this lesson, we'll take our async handling a step further by integrating the `Suspense` component with `RouterView` from Vue Router. This integration will enable dynamic rendering of page compon... https://player.vimeo.com/video/ 413 yes no 2024-08-06T09:50:00+02:00 yes https://vueschool.io/lessons/dynamic-page-titles-with-pinia 2025-09-05 monthly 0.8 https://i.vimeocdn.com/video/1911371667-3feb06c893c75fcb857ae77276c3e2c13a394c9d8fdea9dc6a28b933a1d78e09-d_1280x720?&r=pad Dynamic Page Titles with Pinia Video Lesson In this lesson, we'll make our Vue app's page titles dynamic using Pinia, Vue's state management solution. We'll set up a Pinia store to manage the `title` property globally and integrate it into o... https://player.vimeo.com/video/ 550 yes no 2024-08-06T09:52:00+02:00 yes https://vueschool.io/lessons/retrieve-project-details-for-tasks-querying-nested-database-tables 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1914226842-5a050caaac9fe7c67bbe4c274eb8762b91e8e0df6cf1fe84be8bb319331081d4-d_1280x720?r=pad Retrieve Project Details for Tasks: Querying Nested Database Tables Video Lesson In this lesson, we’ll enhance our tasks table by replacing the plain `project_id` with dynamic links to project pages. Leveraging Supabase’s `select()` method, we’ll fetch and display project... https://player.vimeo.com/video/ 252 yes no 2024-08-13T09:59:00+02:00 yes https://vueschool.io/lessons/handle-complex-supabase-queries 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1914227044-31d772418d9c9e4bc1b3f1e9862c6e33fdd450a3b41fbf5fc75e5fa18072ff26-d_1280x720?r=pad Handle Complex Supabase Queries Video Lesson Let’s tackle the TypeScript errors in our tasks page by properly defining types for complex Supabase queries. The issue arises because TypeScript doesn’t recognize the `projects` property added... https://player.vimeo.com/video/ 367 yes no 2024-08-13T10:01:00+02:00 yes https://vueschool.io/lessons/cleaning-time-p1-separating-supabase-queries-and-types 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1914227226-75d564eb9e889b445bda49d6f490758e419d10a9762dbedacd0e5c23f768d090-d_1280x720?r=pad Cleaning Time P1: Separating Supabase Queries and Types Video Lesson As our project grows, keeping code organized becomes crucial. In this lesson, we’ll move those Supabase queries out of our components. The queries are simple now, but they won’t stay that way.... https://player.vimeo.com/video/ 313 yes no 2024-08-13T10:05:00+02:00 yes https://vueschool.io/lessons/cleaning-time-p2-separating-column-definitions 2025-09-05 monthly 0.8 https://i.vimeocdn.com/video/1914227454-91df1c5bb386221c7ca8a521f24f1b9f1840409ef0fe43d587755dd03caea1d9-d_1280x720?r=pad Cleaning Time P2: Separating Column Definitions Video Lesson Continuing our cleanup, let’s clean our Vue.js component’s script setup by moving out the bulky TanStack columns definitions. https://player.vimeo.com/video/ 192 yes no 2024-08-13T10:07:00+02:00 yes https://vueschool.io/lessons/fetch-the-data-for-the-individual-project-page 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1916811670-5b33851b50e0bc9f154840b49ba058faf7c9682b1cb9041edb883fac724eba3a-d_1280x720?r=pad Fetch the Data for the Individual Project Page Video Lesson In this lesson, we’ll fetch data for individual project pages based on their slug. Instead of using a constant for the query, we’ll create a function and define its type using `ReturnType` for... https://player.vimeo.com/video/ 434 yes no 2024-08-20T10:39:00+02:00 yes https://vueschool.io/lessons/use-the-vue-watch-api-to-update-pinia-store-with-the-project-name 2025-09-05 monthly 0.8 https://i.vimeocdn.com/video/1916811949-7c0ddc984eb3379b93f873603553ff15cfb5314b1157ecf55f910f1ab0d08639-d_1280x720?r=pad Use the Vue Watch API to Update Pinia Store with the Project Name Video Lesson Every page should have a title, and when it was just a static title, that was easy. But for our individual project pages, the title needs to be dynamic, based on the project name we get from the da... https://player.vimeo.com/video/ 229 yes no 2024-08-20T10:41:00+02:00 yes https://vueschool.io/lessons/make-the-project-page-template-dynamic 2025-09-05 monthly 0.8 https://i.vimeocdn.com/video/1916810788-9ca603001cb8d24d6e9e45abdd2b3d123fc5a8b51873513c0d3b300fd697143b-d_1280x720?r=pad Make the Project Page Template Dynamic Video Lesson To wrap up the project page, it's time to make the template fully dynamic. We'll use Vue's mustache syntax to inject dynamic values right into the template. Along the way, we realized we missed an... https://player.vimeo.com/video/ 321 yes no 2024-08-20T10:43:00+02:00 yes https://vueschool.io/lessons/exercise-create-dynamic-indvidual-task-page 2025-09-05 monthly 0.8 https://i.vimeocdn.com/video/1916812175-21224417416b2627f0e0806a8b349f6c5b519a963ebc061eb24449f97740ccd6-d_1280x720?r=pad Exercise: Create Dynamic Indvidual Task Page Video Lesson In this video, we will do a quick exercise to get the individual task page to work dynamically. https://player.vimeo.com/video/ 423 yes no 2024-08-20T10:45:00+02:00 yes https://vueschool.io/lessons/intro-why-error-handling-matters-for-developers-and-users 2026-05-17 monthly 0.8 https://i.vimeocdn.com/video/1919449245-0bd42cce94c00fa98f8b536451e1339af307fd9d2ea22cabe5a742ba4a55dcec-d_1280x720?r=pad Intro: Why Error Handling Matters for Developers and Users Video Lesson Time to kick off our journey into error handling in Vue. We'll explore why presenting errors differently for developers and users is crucial, and set the stage for building clean, informative error... https://player.vimeo.com/video/ 328 yes no 2024-08-27T09:27:00+02:00 yes https://vueschool.io/lessons/create-global-error-handler-in-vue-js-with-pinia-and-vue-router 2026-05-17 monthly 0.8 https://i.vimeocdn.com/video/1919449448-fa9f606d9c3f8a1d75ec5c79f722c167980234315e400b93f03f9800b1b61ed8-d_1280x720?r=pad Create Global Error Handler in Vue.js with Pinia and Vue Router Video Lesson In this lesson, we'll explore how to create a global error handling system in Vue.js using Pinia and Vue Router. Instead of embedding error components on every page, we'll develop a centralized fun... https://player.vimeo.com/video/ 334 yes no 2024-08-27T09:29:00+02:00 yes https://vueschool.io/lessons/adjust-the-error-page-for-custom-errors 2026-05-17 monthly 0.8 https://i.vimeocdn.com/video/1919447947-3f800b8a5e38d197a0349730deaa837981b5f6a6fe2ad704e6d831e2d3e05478-d_1280x720?r=pad Adjust the Error Page for Custom Errors Video Lesson In this lesson, we take our error handling to the next level by making the Error Page dynamic. You'll learn how to store and display custom error messages and codes using Pinia's global state. We�... https://player.vimeo.com/video/ 463 yes no 2024-08-27T09:31:00+02:00 yes https://vueschool.io/lessons/adjust-the-error-page-for-supabase-errors 2026-05-17 monthly 0.8 https://i.vimeocdn.com/video/1919449645-2f1cc48c81eaffb7f127c1f171a78c53854be26f2c44f77969003d0d88197af4-d_1280x720?r=pad Adjust the Error Page for Supabase Errors Video Lesson In this lesson, we'll focus on how to present errors returned by Supabase queries in our Vue.js application. You'll learn how to tweak the error handler to accommodate `PostgrestError` types, enabl... https://player.vimeo.com/video/ 608 yes no 2024-08-27T09:32:00+02:00 yes https://vueschool.io/lessons/adjust-the-error-page-for-native-javascript-errors 2026-05-17 monthly 0.8 https://i.vimeocdn.com/video/1922334063-9ec6a951ba71e96529e2e71c0c51c328930aa40bc80ac2d694e3af3fb71a73d5-d_1280x720?r=pad Adjust the Error Page for Native JavaScript Errors Video Lesson In this lesson, we will tweak our Pinia store’s method `setError()` to accept a native JavaScript error. https://player.vimeo.com/video/ 207 yes no 2024-09-03T09:33:00+02:00 yes https://vueschool.io/lessons/handle-uncaught-javascript-errors-in-vue-js-with-onerrorcaptured-hook 2026-05-17 monthly 0.8 https://i.vimeocdn.com/video/1922337719-cdd457c01b018fffcb37329760d4cec4ed76d1842f3649ca51b1974498987476-d_1280x720?r=pad Handle Uncaught JavaScript Errors in Vue.js with onErrorCaptured Hook Video Lesson In this lesson, you'll learn how to handle native JavaScript errors in Vue.js using the `onErrorCaptured` hook. We'll show you how to enhance your error handling system to capture uncaught JavaScri... https://player.vimeo.com/video/ 265 yes no 2024-09-03T09:35:00+02:00 yes https://vueschool.io/lessons/use-props-and-vue-js-deep-pseudo-class-to-create-a-dev-error-component 2026-05-17 monthly 0.8 https://i.vimeocdn.com/video/1922338096-dc1fdeb5c64a2160764887dbf12929dc11705c55642308dddb6fdd7b827bc5b0-d_1280x720?r=pad Use Props and Vue.js Deep Pseudo-class to Create a Dev Error Component Video Lesson In this lesson, you'll learn how to create a development-specific error component in Vue.js using props and the `:deep()` pseudo-class for style encapsulation. We'll extract the detailed error disp... https://player.vimeo.com/video/ 310 yes no 2024-09-03T09:37:00+02:00 yes https://vueschool.io/lessons/create-an-error-page-for-the-production-server 2025-09-05 monthly 0.8 https://i.vimeocdn.com/video/1922339145-710572ab7dcfcbd3aa25684780be4c5003517f2024b4a517378531dd9cbef31f-d_1280x720?r=pad Create an Error Page for the Production Server Video Lesson In this lesson, we will create a new error component specifically for production server use. https://player.vimeo.com/video/ 326 yes no 2024-09-03T09:42:00+02:00 yes https://vueschool.io/lessons/use-defineasynccomponent-to-conditionally-render-the-appropriate-error-page 2026-05-17 monthly 0.8 https://i.vimeocdn.com/video/1922339373-bf7909a7adb674bfcf792961a2561289ddfcd10426e92f4b971486f9058da982-d_1280x720?r=pad Use defineAsyncComponent to Conditionally Render the Appropriate Error Page Video Lesson In this lesson, we'll explore how to use Vue's `defineAsyncComponent` to conditionally load different error components based on the environment—development or production. By dynamically importing... https://player.vimeo.com/video/ 258 yes no 2024-09-03T09:45:00+02:00 yes https://vueschool.io/lessons/set-up-vue-js-and-supabase-for-seamless-auth-integration 2026-05-28 monthly 0.8 https://i.vimeocdn.com/video/1924889250-89682ab230ec88aefc394423e82b4e8717bf69a4b3dc979aa2513da99c245c9c-d_1280x720?r=pad Set Up Vue.js and Supabase for Seamless Auth Integration Video Lesson We’re diving into setting up Supabase auth for our Vue.js project. Supabase already gives us a solid foundation with an authentication schema, but we’ll take it further by creating a new profil... https://player.vimeo.com/video/ 332 yes no 2024-09-10T09:01:00+02:00 yes https://vueschool.io/lessons/use-v-model-to-collect-form-data-values 2026-05-28 monthly 0.8 https://i.vimeocdn.com/video/1924890039-9b90254b3b485263ea682b4ad2f5805c3a9b1dc6b2f2409ac7ffe1e84ee50772-d_1280x720?r=pad Use v-model to Collect Form Data Values Video Lesson In this lesson, we'll build a registration page using Vue.js, focusing on form data management and two-way binding. We'll create a reactive form data object using Vue's ref, then implement two-way... https://player.vimeo.com/video/ 269 yes no 2024-09-10T09:04:00+02:00 yes https://vueschool.io/lessons/register-new-users-with-supabase-auth-and-vue-js 2025-09-05 monthly 0.8 https://i.vimeocdn.com/video/1924891611-5bd16cecb73a63392c1ed4a6e8e75f1d857e1f9cfd9e74816e0c43e9d526f9d7-d_1280x720?r=pad Register new Users with Supabase Auth and Vue.js Video Lesson In this lesson, you'll learn how to register new users in your Vue.js app using Supabase Auth. We'll walk through the process of capturing form data, modifying key Supabase settings to streamline r... https://player.vimeo.com/video/ 330 yes no 2024-09-10T09:10:00+02:00 yes https://vueschool.io/lessons/automatically-generate-user-profiles-on-registration 2026-05-28 monthly 0.8 https://i.vimeocdn.com/video/1924892349-31dade0d49a71ea0ae26d0dc116dce7546e5a9aa212765e2b4b6576ebadee8bd-d_1280x720?r=pad Automatically Generate User Profiles on Registration Video Lesson After registering new users, the next step is to automatically generate a profile for each user. In this lesson, we’ll build on the previous work and ensure that every registered user has a profi... https://player.vimeo.com/video/ 213 yes no 2024-09-10T09:12:00+02:00 yes https://vueschool.io/lessons/login-users-with-supabase-auth-and-vue-js 2025-09-05 monthly 0.8 https://i.vimeocdn.com/video/1927432999-08052db500cab8027cb14de8f81ba7a2d18979bf92554567035d4e2b5012b593-d_1280x720?r=pad Login Users with Supabase Auth and Vue.js Video Lesson In this lesson, we’ll work on the form to collect user credentials, implement a sign-in method using Supabase's signInWithPassword function, and redirect the user to the homepage on successful lo... https://player.vimeo.com/video/ 277 yes no 2024-09-17T09:37:00+02:00 yes https://vueschool.io/lessons/quick-cleanup-for-the-login-and-register-pages 2025-09-05 monthly 0.8 https://i.vimeocdn.com/video/1927435250-d53fb95429dd5993bc7d4920eb6a369bd7c88c7ec1078740fc16772778aec0f4-d_1280x720?r=pad Quick Cleanup for the Login and Register Pages Video Lesson In this lesson, we'll streamline our authentication logic by organizing the code more efficiently. Instead of having separate auth functions scattered across different components, we'll create a de... https://player.vimeo.com/video/ 366 yes no 2024-09-17T09:39:00+02:00 yes https://vueschool.io/lessons/set-up-auth-store-and-integrate-it-with-utility-functions 2026-05-28 monthly 0.8 https://i.vimeocdn.com/video/1927435427-80316941e8a0931007abdf4f7456623801732eb37cb088c11cfda3832db19bf1-d_1280x720?r=pad Set Up Auth Store and Integrate It with Utility Functions Video Lesson In this lesson, we're enhancing the authentication flow by introducing a global store to manage the logged-in user's data. We'll set up a Pinia store called `useAuthStore` to keep track of the user... https://player.vimeo.com/video/ 342 yes no 2024-09-17T09:42:00+02:00 yes https://vueschool.io/lessons/fetch-the-user-profile-and-update-the-auth-store 2026-05-28 monthly 0.8 https://i.vimeocdn.com/video/1927432666-0e041474a621208def4ba9a92af31d94c21457fe27b759c93f187fb5be4182b0-d_1280x720?r=pad Fetch the User Profile and Update the Auth Store Video Lesson In this lesson, we're taking the authentication flow a step further by fetching and storing the user's profile whenever the authentication state changes. https://player.vimeo.com/video/ 373 yes no 2024-09-17T09:44:00+02:00 yes https://vueschool.io/lessons/retrieve-the-auth-session-using-supabase-client 2026-05-28 monthly 0.8 https://i.vimeocdn.com/video/1930035464-07f67869a905493e697b4c944d46aba8305128678be11bcf933ca3bc543dc192-d_1280x720?r=pad Retrieve the Auth Session using Supabase Client Video Lesson We’ll retrieve an active user session using Supabase's `getSession` method. By placing the session check in `app.vue` with the `onMounted` hook, the app will recognize logged-in users across all... https://player.vimeo.com/video/ 308 yes no 2024-09-24T09:31:00+02:00 yes https://vueschool.io/lessons/create-a-vue-router-guard-to-validate-the-supabase-auth-session 2026-05-28 monthly 0.8 https://i.vimeocdn.com/video/1930033413-ed5375c3e4c5226ab6d5e7729528a2892073fd4e12228d65b9c8b794dec4f22d-d_1280x720?r=pad Create a Vue Router Guard to Validate the Supabase Auth Session Video Lesson We will use Vue Router’s `beforeEach` route guard to verify the session before each navigation. https://player.vimeo.com/video/ 172 yes no 2024-09-24T09:33:00+02:00 yes https://vueschool.io/lessons/manage-v-for-loops-with-v-if-in-vue-js-using-filters 2026-05-28 monthly 0.8 https://i.vimeocdn.com/video/1930033837-899824096c1a12770e160703ba1f366a600eb1052b1b422dc8d5592d834f3045-d_1280x720?r=pad Manage v-for loops with v-if in Vue.js Using Filters Video Lesson In this lesson, we’ll dive into refactoring Vue components to handle conditional rendering, focusing on how to differentiate between `routerLink` elements and action links that trigger JavaScript... https://player.vimeo.com/video/ 501 yes no 2024-09-24T09:35:00+02:00 yes https://vueschool.io/lessons/use-the-vue-js-template-special-element-with-v-for-loops 2025-09-05 monthly 0.8 https://i.vimeocdn.com/video/1930035724-23e88c4e123c4ac56c8a533a91958b5fa13a20884c57427533864738f53022ed-d_1280x720?r=pad Use the Vue.js Template Special Element with v-for Loops Video Lesson We'll streamline our component by leveraging Vue's `<template>` element to manage conditional rendering of links. By nesting both `routerLink` and action links inside a `<template>`, we can efficie... https://player.vimeo.com/video/ 235 yes no 2024-09-24T09:37:00+02:00 yes https://vueschool.io/lessons/emit-custom-events-from-child-to-parent-in-vue-js 2026-05-28 monthly 0.8 https://i.vimeocdn.com/video/1932761846-2d3f3e8fd2d6b1998e2597e448a698337ff1575170db905ed32daab41f4c7be3-d_1280x720?r=pad Emit Custom Events from Child to Parent in Vue.js Video Lesson When building reusable Vue components, you might want the parent to handle specific logic while the child simply triggers it. That’s where emitting custom events comes in handy. In this lesson, y... https://player.vimeo.com/video/ 442 yes no 2024-10-01T09:34:00+02:00 yes https://vueschool.io/lessons/overcome-challenges-of-using-pinia-stores-in-external-files 2026-05-28 monthly 0.8 https://i.vimeocdn.com/video/1932771130-a73f80641c7d53fc935b549b5efde077972dee74fada07da8959a518e4eb356a-d_1280x720?r=pad Overcome Challenges of Using Pinia Stores in External Files Video Lesson While implementing a logout function, we stumbled upon a challenge with using Pinia in external files, leading to unexpected errors in the sidebar component. The issue arose because Pinia wasn’t... https://player.vimeo.com/video/ 428 yes no 2024-10-01T09:57:00+02:00 yes https://vueschool.io/lessons/watch-for-supabase-auth-changes-and-update-auth-store 2025-09-05 monthly 0.8 https://i.vimeocdn.com/video/1932771778-3c6666ad8941037f7a8373221679eefface7daf44cb61c9a1b17157afb60bc18-d_1280x720?r=pad Watch for Supabase Auth changes and Update Auth Store Video Lesson Keeping track of user authentication can feel repetitive, but there’s a more efficient way to handle session updates. In this lesson, you’ll learn how to move away from route guards and constan... https://player.vimeo.com/video/ 324 yes no 2024-10-01T09:59:00+02:00 yes https://vueschool.io/lessons/protect-routes-with-navigation-guards 2026-05-28 monthly 0.8 https://i.vimeocdn.com/video/1932772382-f362b52e65abf6dd2362b28fa59f18edcf9746fc6f39d5bde985c4fc04df9e7c-d_1280x720?r=pad Protect Routes with Navigation Guards Video Lesson When it comes to securing your app, navigation guards are a key tool in keeping unauthorized users out. In this lesson, you’ll learn how to protect all routes in your project management tool by u... https://player.vimeo.com/video/ 351 yes no 2024-10-01T10:02:00+02:00 yes https://vueschool.io/lessons/wait-for-pinia-store-updates-before-navigating 2026-05-28 monthly 0.8 https://i.vimeocdn.com/video/1935428999-156ca30dff961dd3014882f55756992662d14ecb0a9eb9500fe4eb18dc4c84f0-d_1280x720?r=pad Wait for Pinia Store Updates Before Navigating Video Lesson Handling navigation with precision is crucial for maintaining a smooth user experience. In this lesson, you’ll tackle a bug where logging out doesn’t immediately redirect users as expected. https://player.vimeo.com/video/ 265 yes no 2024-10-08T09:15:00+02:00 yes https://vueschool.io/lessons/changes-to-default-email-provider-in-supabase 2026-05-28 monthly 0.8 https://i.vimeocdn.com/video/1935430281-e49dc54b0a882a95a21d08cf4340480f11a2c720505c4674fb2bf16f0b7d12f7-d_1280x720?r=pad Changes to Default Email Provider in Supabase Video Lesson In this lesson, we’re tackling a critical update from Supabase that affects email-based authentication. Supabase recently changed its default email provider, meaning you’ll need to set up a cus... https://player.vimeo.com/video/ 342 yes no 2024-10-08T09:19:00+02:00 yes https://vueschool.io/lessons/handle-supabase-server-auth-errors 2026-05-28 monthly 0.8 https://i.vimeocdn.com/video/1935428525-e2e69355a55445902fb4ba5a4b246ae80456cb100102d4f0d9f18ca5b82e05d3-d_1280x720?r=pad Handle Supabase Server Auth Errors Video Lesson In this lesson, we’ll enhance the user experience on the login form by providing real-time error feedback when the user enters an invalid email. We’ll implement two methods for handling these e... https://player.vimeo.com/video/ 345 yes no 2024-10-08T09:21:00+02:00 yes https://vueschool.io/lessons/create-a-composable-for-handling-form-errors 2026-05-28 monthly 0.8 https://i.vimeocdn.com/video/1935431814-4b2971a6d6f1779aa527b99e11ea3deca70964342196ab801bb69e8b1dddab30-d_1280x720?r=pad Create a Composable for Handling Form Errors Video Lesson In this lesson, we'll create a Vue composable to handle form errors, making it easy to reuse validation and error-handling logic across multiple forms. We’ll extract the Supabase server error han... https://player.vimeo.com/video/ 320 yes no 2024-10-08T09:24:00+02:00 yes https://vueschool.io/lessons/implement-realtime-form-validation 2025-09-08 monthly 0.8 https://i.vimeocdn.com/video/1938126021-d8ad71ea5e90c32de4fe88da6cf5e937bcea2c4a6f57b093a85647e46afdec50-d_1280x720?r=pad Implement Realtime Form Validation Video Lesson In this lesson, we’ll implement real-time form validation using Vue's Composition API. We’ll expand on the form error composable by adding a realTimeErrors state to dynamically handle validatio... https://player.vimeo.com/video/ 589 yes no 2024-10-15T09:29:00+02:00 yes https://vueschool.io/lessons/use-watchdebounced-from-vueuse 2026-05-28 monthly 0.8 https://i.vimeocdn.com/video/1938126919-ef2c19e17e110a3d40bb0e27b9afbf35c571125f8cf3648d10da08415de1a4df-d_1280x720?r=pad Use watchDebounced from VueUse Video Lesson In this lesson, we’ll use `watchDebounced` from VueUse to delay form validation, giving users time to finish typing before errors appear. After installing VueUse, we import `watchDebounced`, appl... https://player.vimeo.com/video/ 307 yes no 2024-10-15T09:31:00+02:00 yes https://vueschool.io/lessons/typescript-mapping-and-generics 2026-05-28 monthly 0.8 https://i.vimeocdn.com/video/1938127809-c620997dfffbab105ef3b0178125f8263d8d686e4f3d81282e654be021f9594b-d_1280x720?r=pad TypeScript Mapping and Generics Video Lesson In this lesson, we explore how to use TypeScript mapping and generics to dynamically handle form validation errors. By creating a custom `FormErrors` type, we can map error messages to each field o... https://player.vimeo.com/video/ 332 yes no 2024-10-15T09:35:00+02:00 no https://vueschool.io/lessons/using-pinia-for-efficient-data-loading-and-caching 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1943568721-1a4768dab68c7cd4d1ad1401212d0722f5cbd91ff2abe73e63ff954adb32ec4c-d_1280x720?r=pad Using Pinia for Efficient Data Loading and Caching Video Lesson In this lesson, we'll enhance our app's data-fetching logic using Pinia as a data loader and caching tool. You'll learn to efficiently manage project data for instant access, improving user experie... https://player.vimeo.com/video/ 387 yes no 2024-10-29T08:31:00+01:00 yes https://vueschool.io/lessons/use-usememoize-from-vueuse-to-optimize-pinia-loader-functions 2025-09-08 monthly 0.8 https://i.vimeocdn.com/video/1943564052-c03dd3c53e1010723c410c3ddf50bb0c47836c9b73b379b8e185b644b70753ec-d_1280x720?r=pad Use useMemoize from VueUse to Optimize Pinia Loader Functions Video Lesson To handle our data efficiently, we're taking caching to the next level by using useMemoize from VueUse in our Pinia stores. With useMemoize, we’ll fetch project data just once and keep it cached,... https://player.vimeo.com/video/ 200 yes no 2024-10-29T08:33:00+01:00 yes https://vueschool.io/lessons/implement-stale-while-revalidate-with-pinia-and-usememoize 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1943564338-974d7fd96678ca7182e7d469660de1f28160f922921349667840343aa24b495c-d_1280x720?r=pad Implement Stale While Revalidate with Pinia and useMemoize Video Lesson We now render the cached response immediately to the user. But we're not stopping there; to keep data current without frequent requests, we’ll implement a "stale-while-revalidate" approach. This... https://player.vimeo.com/video/ 367 yes no 2024-10-29T08:36:00+01:00 no https://vueschool.io/lessons/update-stale-data-with-fresh-data 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1946200926-ddc203f2095766b591c96b72b31d709b0290a4249d0fa8b6b09d7a471833ad53-d_1280x720?&r=pad Update Stale Data with Fresh Data Video Lesson This lesson updates our data loading strategy to display the latest project changes without compromising performance. Users get instant access to cached data while background checks for updates ens... https://player.vimeo.com/video/ 197 yes no 2024-11-05T09:18:00+01:00 yes https://vueschool.io/lessons/set-up-eslint-9-with-flat-config-in-vue-js 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1946201737-dca6cfedf884b73b430db3feae739813415af22a7612a27af3822d9319a63638-d_1280x720?r=pad Set Up Eslint 9 with Flat Config in Vue.js Video Lesson In this lesson, we shift from CRUD to essential project maintenance by upgrading our Vue.js ESLint configuration to align with ESLint v9's new flat config format. This update streamlines our setup,... https://player.vimeo.com/video/ 502 yes no 2024-11-05T09:22:00+01:00 yes https://vueschool.io/lessons/create-a-vue-js-composable-for-projects-collaborators 2025-09-08 monthly 0.8 https://i.vimeocdn.com/video/1946202446-7a0ed9e90fe8d1cac4e605a2781fce73af4e7f54ee8e701c43e6243b3c5bfb48-d_1280x720?r=pad Create a Vue.js Composable for Projects Collaborators Video Lesson Time to pay attention to the collaborators array. We’ll create a Vue.js composable that turns simple collaborator IDs into full profiles, pulling in avatars and usernames. With a single reusable... https://player.vimeo.com/video/ 440 yes no 2024-11-05T09:24:00+01:00 yes https://vueschool.io/lessons/fetch-and-collect-collaborators-across-all-projects 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1946203174-3d0fc4a16bb09528fa0b826af604a7ec2fb2888a76df8918fac7913ead7a5136-d_1280x720?r=pad Fetch and Collect Collaborators Across All Projects Video Lesson Building on our collaborator profiles, it’s time to fetch and organize them across all projects. We’re setting up a single function to collect collaborator profiles for each project in one go,... https://player.vimeo.com/video/ 568 yes no 2024-11-05T09:27:00+01:00 yes https://vueschool.io/lessons/use-vue-js-render-functions-to-render-collaborators 2024-11-12 monthly 0.8 https://i.vimeocdn.com/video/1948904179-111ef6260d97db95df5ae2056178996c548198d6d3f4a3028f50a87fbc45d501-d_1280x720?r=pad Use Vue.js Render Functions to Render Collaborators Video Lesson Time to dynamically render collaborators in the projects table using render functions. Transform column configurations to handle collaborator data. https://player.vimeo.com/video/1028704029 286 yes no 2024-11-12T08:07:00+01:00 yes https://vueschool.io/lessons/load-the-collaborators-without-impacting-page-loading-speed 2025-09-08 monthly 0.8 https://i.vimeocdn.com/video/1948903058-a8834aa30a52c0031af78a3dcc05ffe13120533acb0765579ef4b911d1f4cfa9-d_1280x720?r=pad Load the Collaborators Without Impacting Page Loading Speed Video Lesson Fetching collaborators from the database is slowing down our page load time. In this lesson, we’ll optimize these requests to speed things up, handle avatar loading with conditional fetching, and... https://player.vimeo.com/video/ 303 yes no 2024-11-12T08:10:00+01:00 yes https://vueschool.io/lessons/reuse-the-pinia-loader-to-load-single-project 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1948906341-6c793a4d2eea1003db4402c49e89b593ce1b060336efb71fc170ac30d9c05a01-d_1280x720?r=pad Reuse the Pinia Loader to Load Single Project Video Lesson Using the Pinia loader to fetch a single project takes your app’s efficiency up a notch. Here, we’re centralizing the logic for loading individual projects, integrating it into the existing pro... https://player.vimeo.com/video/ 375 yes no 2024-11-12T08:13:00+01:00 yes https://vueschool.io/lessons/make-the-pinia-loader-cache-invalidation-logic-reusable 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1948907092-bdf600bc990af911b0f83704d4e4e43b9bf228ca5a886ead16a5aeb5af75a694-d_1280x720?r=pad Make the Pinia Loader Cache Invalidation Logic Reusable Video Lesson We’re refining the cache invalidation logic here to make it dynamic and versatile, so it handles both multiple projects and single project requests. By updating the validateCache function to acce... https://player.vimeo.com/video/ 420 yes no 2024-11-12T08:15:00+01:00 yes https://vueschool.io/lessons/fix-a-little-bug-with-the-project-title-watcher 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1951698341-b5de1a18f4817b8fc113ee9902cfb7d539b1988cba892aae84fa1d987f83eec9-d_1280x720?r=pad Fix a Little Bug with the Project Title Watcher Video Lesson Our project title watcher needs a fix—right now, it’s not updating the page title when we revisit the same project. This happens because watchers only trigger on value changes, and since the pr... https://player.vimeo.com/video/ 159 yes no 2024-11-19T09:19:00+01:00 yes https://vueschool.io/lessons/create-text-field-component-with-definemodel 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1951700917-283a48fb6e936dea4e91557a7e8d95d051c8645b4f902f622e1f04cec7f0e8ca-d_1280x720?r=pad Create Text Field Component with defineModel Video Lesson Let’s make the project title editable right on the page. In this lesson, we’ll create a reusable text field component using `defineModel` to enable real-time updates with two-way binding. https://player.vimeo.com/video/ 249 yes no 2024-11-19T09:24:00+01:00 yes https://vueschool.io/lessons/emit-custom-events-on-input-blur 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1951702394-f97ca445bff067f19a2302ac9b7919ea4c236e528af88f114d957713f1c4a839-d_1280x720?r=pad Emit Custom Events on Input Blur Video Lesson When users finish editing a project title, we want to ensure their changes are saved to the database. In this lesson, we’ll emit a custom event on input blur and handle the enter keypress to trig... https://player.vimeo.com/video/ 190 yes no 2024-11-19T09:30:00+01:00 yes https://vueschool.io/lessons/update-project-title-in-the-database 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1951703271-0343f6b5b95d0f39d93dddb183859dec620335bde045eb0dcf3f74f7e534a136-d_1280x720?r=pad Update Project Title in the Database Video Lesson When the user updates a project title, we need to save those changes to the database. In this lesson, we’ll create an updateProject function that syncs with the project store, filters out unneces... https://player.vimeo.com/video/ 381 yes no 2024-11-19T09:32:00+01:00 yes https://vueschool.io/lessons/create-a-toggle-component-for-the-project-status 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1951704073-7670eebd1035bdb114191c1888d8ee439329863a77fae1c8e4fd5a7093137e91-d_1280x720?r=pad Create a Toggle Component for the Project Status Video Lesson For the project status, we’ll build a toggle component that switches between completed and incomplete with a simple click. This reusable component uses transitions for a smooth UI and even works... https://player.vimeo.com/video/ 360 yes no 2024-11-19T09:34:00+01:00 yes https://vueschool.io/lessons/update-the-project-status-in-the-database 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1951704834-b57120db5685151d88e3922968ee50fbe1f2ca10003b54ba5088f4184bbfafdf-d_1280x720?r=pad Update the Project Status in the Database Video Lesson To make the project status updates seamless, we’ll connect the toggle component to the database by emitting the commit event and reusing the updateProject function. https://player.vimeo.com/video/ 340 yes no 2024-11-19T09:36:00+01:00 yes https://vueschool.io/lessons/use-vue-js-props-destructure-to-assign-default-values-for-props 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1951700586-f86b824a018e4aa120956fb16cec7f41fc884dfcc528f6f2e3762248e367a02d-d_1280x720?r=pad Use Vue.js Props Destructure to Assign Default Values for Props Video Lesson In this lesson, we’ll explore how to use Vue.js props destructuring to simplify default value assignment. By destructuring props directly in the component’s `script setup`, you can easily set d... https://player.vimeo.com/video/ 245 yes no 2024-11-19T09:38:00+01:00 yes https://vueschool.io/lessons/reuse-the-usecollab-composable-in-the-project-page 2025-09-08 monthly 0.8 https://i.vimeocdn.com/video/1954468473-0df0c13de1588fd7b1ee31e2378fd95dd840f15c4cf9b528ebddcf29dd63fcc3-d_1280x720?r=pad Reuse the useCollab Composable in the Project Page Video Lesson Reusing the useCollabs composable lets us dynamically fetch and display project collaborators directly on the individual project page, maintaining consistency and efficiency. We’ll also ensure ta... https://player.vimeo.com/video/ 429 yes no 2024-11-26T08:26:00+01:00 yes https://vueschool.io/lessons/use-definemodel-with-textarea-and-adjust-the-database-schema 2025-09-08 monthly 0.8 https://i.vimeocdn.com/video/1954469243-362440d3dd530516b43fe56787e9442bf6a9fae7abb43ad22b929bf38b1ffa6e-d_1280x720?r=pad Use defineModel with Textarea and Adjust the Database Schema Video Lesson Switching the project description to a textarea enhances usability by enabling multi-line editing. This lesson, we update the project description to use a textarea for better usability, adjust the... https://player.vimeo.com/video/ 247 yes no 2024-11-26T08:28:00+01:00 yes https://vueschool.io/lessons/it-s-showtime-apply-your-skills-to-tasks 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1954469910-e9bcfade9f9356f94be71e232670faa811b6b4980dbfc64b9f870de6cbeea42a-d_1280x720?r=pad It's Showtime: Apply Your Skills to Tasks! Video Lesson The stage is yours! Take everything you've learned in this chapter and apply it to the Tasks pages. From creating Pinia loaders to updating task details, now’s the time to rely on your knowledge... https://player.vimeo.com/video/ 164 yes no 2024-11-26T08:31:00+01:00 yes https://vueschool.io/lessons/add-tasks-and-projects-from-anywhere-in-the-app 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1954470797-f31b647c338a851c9cb3cc1b232acc075b5503899250bd9a5cdea546429419f1-d_1280x720?r=pad Add Tasks and Projects From Anywhere in the App Video Lesson We enhance the app’s usability by creating a global feature to add tasks and projects seamlessly from any page. Using the Dropdown Menu and Sheet components from shadcn-vue, we ensure users can c... https://player.vimeo.com/video/ 431 yes no 2024-11-26T08:34:00+01:00 yes https://vueschool.io/lessons/how-to-install-and-use-formkit-in-vue-js-3 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1954471557-9b0be64051ae65d67db84b01bffaf264db784e634d09278f46b05d3988daa782-d_1280x720?r=pad How to Install and Use FormKit in Vue.js 3 Video Lesson In this lesson, we install FormKit into our Vue 3 app to streamline task creation. By setting up FormKit with custom themes, configurations, and intuitive form fields, we simplify form building, va... https://player.vimeo.com/video/ 324 yes no 2024-11-26T08:37:00+01:00 yes https://vueschool.io/lessons/create-a-form-for-tasks-using-formkit 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1954472188-d40e257a8ada3b831070998fb5e6e49e198e5e7ac9c80c14b0189a3136e0df54-d_1280x720?r=pad Create a Form for Tasks using FormKit Video Lesson In the lesson, we build comprehensive task creation form using FormKit in Vue 3. The form includes text fields, selects, and a textarea, all styled and validated with FormKit. We also handle form s... https://player.vimeo.com/video/ 308 yes no 2024-11-26T08:40:00+01:00 yes https://vueschool.io/lessons/fetch-the-select-fields-options-from-the-database 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1954467031-99c80f9450deb272f6908a494c5fe335f4e312207f822fcffa9d5e02d3709432-d_1280x720?r=pad Fetch the Select Fields Options from the Database Video Lesson Select fields are empty, so we need to fetch the required options from the database. By querying projects and profiles, we’ll map the data into the right format for our form. To keep things effic... https://player.vimeo.com/video/ 367 yes no 2024-11-26T08:42:00+01:00 yes https://vueschool.io/lessons/validate-and-create-tasks 2025-09-08 monthly 0.8 https://i.vimeocdn.com/video/1957024885-2d9b6b4e482db123941c331ec6a0ed2d7b3f72d1d45afab3b936dfcda59a32a0-d_1280x720?r=pad Validate and Create Tasks Video Lesson In this lesson, we’ll create a query to add tasks to the database, set up form validations to ensure proper input, and handle any errors along the way for a smooth task creation process. https://player.vimeo.com/video/ 351 yes no 2024-12-03T09:12:00+01:00 yes https://vueschool.io/lessons/delete-tasks 2025-09-08 monthly 0.8 https://i.vimeocdn.com/video/1957028924-f642c62e8abecdc1d517f4213f06cd8b52d2681b2e885ab50848818814d62d07-d_1280x720?r=pad Delete Tasks Video Lesson In this lesson, we’ll add a delete button to the task page, implement the delete functionality using a store query, and enhance the user experience with loading states and icon transitions. Plus,... https://player.vimeo.com/video/ 525 yes no 2024-12-03T09:15:00+01:00 yes https://vueschool.io/lessons/render-the-appropriate-layout 2025-09-08 monthly 0.8 https://i.vimeocdn.com/video/1957029748-17068ddb809a3f6784d943593330f0f110ae310c5f33c56bf84f9e81e2fa7416-d_1280x720?r=pad Render the Appropriate Layout Video Lesson Learn how to dynamically switch between layouts based on user authentication. We’ll create a new `GuestLayout`, set up dynamic components in `App.vue`, and ensure the correct layout renders depen... https://player.vimeo.com/video/ 205 yes no 2024-12-03T09:17:00+01:00 yes https://vueschool.io/lessons/implement-global-state-with-composables 2025-09-08 monthly 0.8 https://i.vimeocdn.com/video/1957030450-0edefbbe9fc40cf82f4d1ed2c09291ffa19cf9b773e3c26a462f1510a96fd9fb-d_1280x720?r=pad Implement Global State with Composables Video Lesson We’ll use a composable to manage the global `menuOpen` state for controlling the sidebar's expand and collapse behavior. Along the way, we’ll dynamically update classes for the sidebar and layo... https://player.vimeo.com/video/ 587 yes no 2024-12-03T09:21:00+01:00 yes https://vueschool.io/lessons/use-vue-js-provide-and-inject-with-typescript 2025-09-08 monthly 0.8 https://i.vimeocdn.com/video/1957031491-397f3dadf6bf9ceed4856868a88bdd353634d4e66e5b29b646f1e41f67b4d034-d_1280x720?r=pad Use Vue.js Provide and Inject with TypeScript Video Lesson Instead of drilling props through multiple components, we’ll use Vue's `provide` and `inject` APIs to manage the sidebar's state more efficiently. With TypeScript, we’ll ensure type safety by d... https://player.vimeo.com/video/ 317 yes no 2024-12-03T09:23:00+01:00 yes https://vueschool.io/lessons/combine-routerview-and-suspense-with-the-vue-transition-component 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1957032144-abbe31eba888e9bee22827d5dea196091cc2013bba9573d5d0d64bafb695dd39-d_1280x720?r=pad Combine RouterView and Suspense with the Vue Transition Component Video Lesson I wasn’t too happy with the way components transition or how the loading indicator looks. Transitions can make navigation between pages feel smooth and engaging, but getting them right with loadi... https://player.vimeo.com/video/ 414 yes no 2024-12-03T09:26:00+01:00 yes https://vueschool.io/lessons/add-dark-mode-toggle-in-vue-with-usedark-from-vueuse 2025-09-08 monthly 0.8 https://i.vimeocdn.com/video/1957032960-5a3506a7910f8775c8546b69fb34731534540069556df830e9c9f2314a88eb6b-d_1280x720?r=pad Add Dark Mode Toggle in Vue With useDark from VueUse Video Lesson Dark mode is a popular feature that enhances user experience, especially in low-light environments. In this section, we'll walk through adding a dark mode toggle to our app. We'll start by looking... https://player.vimeo.com/video/ 354 yes no 2024-12-03T09:28:00+01:00 yes https://vueschool.io/lessons/use-vue-meta-to-set-dynamic-title-and-meta-data 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1957033729-e94df6d3f6727200aef3c6dc2768b9f4b00f0cb0f38a26b0ac295bbc8df40659-d_1280x720?r=pad Use Vue Meta to Set Dynamic Title and Meta Data Video Lesson In this lesson, we’ll tackle dynamic SEO by using Vue Meta to manage page titles and meta data. Having the ability to set custom titles and descriptions for each page not only helps with SEO but... https://player.vimeo.com/video/ 248 yes no 2024-12-03T09:31:00+01:00 yes https://vueschool.io/lessons/finished-not-really-we-re-just-warming-up 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1957034830-0c9f5886c9c1d46b669868f59e6e83a42f879ba50aec29813feafdc96f51ae7b-d_1280x720?r=pad Finished? Not Really—We’re Just Warming Up! Video Lesson Congratulations on completing the Vue.js Master Class 2024 Edition! This course has been a deep dive into Vue.js and its ecosystem, and you've gained valuable skills to take your web development to... https://player.vimeo.com/video/ 116 yes no 2024-12-03T09:35:00+01:00 yes https://vueschool.io/courses/enhanced-routing-with-unplugin-vue-router 2026-05-12 monthly 0.8 https://vueschool.io/lessons/what-is-unplugin-vue-router 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1851458139-8d7093a6f3cbb94d3c13958dba6ea9719d1fe63ece54b348d81e918b409ee608-d_1280x720?r=pad What is Unplugin Vue Router? Video Lesson In this lesson, learn what `unplugin-vue-router` is and what it’s good for. `unplugin-vue-router` is a [Vite](https://vueschool.io/courses/rapid-development-with-vite) plugin that provides filed-... https://player.vimeo.com/video/ 78 yes no 2024-05-14T09:00:00+02:00 no https://vueschool.io/lessons/course-pre-requisites 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1851460861-bcfdcba79142943f79b1ac847cd4890dd821cd79bc0257f3364b1d47ba909059-d_1280x720?r=pad Course Pre-Requisites Video Lesson Before you get started with this course, you should be familiar with the basics of Vue.js and Vue.js components. It’s also worth noting that we will not dive into practical use cases of using a R... https://player.vimeo.com/video/ 110 yes no 2024-05-14T09:00:00+02:00 no https://vueschool.io/lessons/how-to-install-and-setup-unplugin-vue-router 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1851462269-ea1d334e6507b56206a93b8d1193de9e0a9e01b0e424c98ed5f8cfc3e3261b1e-d_1280x720?r=pad How to Install and Setup Unplugin Vue Router Video Lesson In this lesson, learn how to install `unplugin-vue-router` and change over your manually registered routes to use the ones autogenerated based on your file system. https://player.vimeo.com/video/ 410 yes no 2024-05-14T09:00:00+02:00 no https://vueschool.io/lessons/file-based-routing 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1851463682-20b0468e6f3d5d75cbdd317664db4c2cf450762ecf6ef542728506af9b14d4a9-d_1280x720?r=pad File-Based Routing Video Lesson In this lesson, learn a little more about the basics of file-based routing. See how nested directories affect the route structure. https://player.vimeo.com/video/ 115 yes no 2024-05-14T09:00:00+02:00 no https://vueschool.io/lessons/nested-routes-with-file-based-routing 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1851465384-f65b01bd8c7c81170199c3f0bcf4aa03a9a1df30dcee38253205c2917f636891-d_1280x720?r=pad Nested Routes with File-Based Routing Video Lesson In this lesson, learn how to share common elements based on the route path structure with nested routes. https://player.vimeo.com/video/ 118 yes no 2024-05-14T09:00:00+02:00 yes https://vueschool.io/lessons/nested-routes-without-nested-layouts-with-file-based-routing 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1851466576-6141178998ae571b80d7c6c88425ad7cd041c41a6a4e2d0a172d1d675b07f6b0-d_1280x720?r=pad Nested Routes Without Nested Layouts with File-Based Routing Video Lesson Sometimes we want to keep the nested structure within the URL but NOT in the page layout. unplugin-vue-router has a simple syntax to support this by putting a period between the various parts of th... https://player.vimeo.com/video/ 69 yes no 2024-05-14T09:00:00+02:00 yes https://vueschool.io/lessons/dynamic-routes-with-file-based-routing 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1855363782-706024cf80e3668c8f77982aa37d0514cca57c2cfab6bf480ef588afe3a11f31-d_1280x720?r=pad Dynamic Routes with File-Based Routing Video Lesson In this lesson, learn how to accept dynamic parameters with `unplugin-vue-router`. The syntax is really straightforward: `[id].vue`. But you can also do more complex parameters like: https://player.vimeo.com/video/ 269 yes no 2024-05-21T09:00:00+02:00 no https://vueschool.io/lessons/named-routes-and-views-with-file-based-routing 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1855365030-964d32736e97c7266495ba23adda6cc7a21b65bd3fa432da1de6cfd857fe93a7-d_1280x720?r=pad Named Routes and Views with File-Based Routing Video Lesson In this lesson, learn about how routes are named with `unplugin-vue-router` and how to use route names when using `RouterLink`. https://player.vimeo.com/video/ 272 yes no 2024-05-21T09:00:00+02:00 yes https://vueschool.io/lessons/catch-all-routes-with-file-based-routing 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1855365896-00e40a3abfcbab3717e65af87332f14102477f78b49ce106138b0b283fb31118-d_1280x720?r=pad Catch all Routes with File-Based Routing Video Lesson In this lesson, learn how to create a catch all path with unplugin-vue-router. Catch all paths are great for displaying 404 pages. The syntax is super easy: [...path].vue. https://player.vimeo.com/video/ 108 yes no 2024-05-21T09:00:00+02:00 no https://vueschool.io/lessons/using-generated-route-types-with-unplugin-vue-router 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1855366728-391e788ed3bcb81bb3eb17c4c1cf1875edb36ed5ab108704b3a86cc3fa1164f7-d_1280x720?r=pad Using Generated Route Types with Unplugin Vue Router Video Lesson https://player.vimeo.com/video/ 184 yes no 2024-05-21T09:00:00+02:00 yes https://vueschool.io/lessons/navigation-guards-route-meta-and-definepage 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1855367463-c95c0cf28d8bbb7d2328c2c54255cd68369735ed7d3d2deab10e420749b7ddb2-d_1280x720?r=pad Navigation Guards, Route Meta, and definePage Video Lesson In this lesson, learn to use a Vue Router navigation guard in combination with the definePage macro to redirect users when they aren’t authorized. https://player.vimeo.com/video/ 350 yes no 2024-05-21T09:00:00+02:00 yes https://vueschool.io/lessons/lazy-loading-routes-with-unplugin-vue-router 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1855368379-bdd40901be9c4f615efbc95f863107c92d77fb0f72543a0207609a731d4f96fc-d_1280x720?r=pad Lazy Loading Routes with Unplugin Vue Router Video Lesson In this lesson, learn how unplugin-vue-router keeps your app performant by automatically lazy loading all your pages. https://player.vimeo.com/video/ 148 yes no 2024-05-21T09:00:00+02:00 no https://vueschool.io/lessons/conclusion 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1855362661-9815ca4788d48cc46e73585e0423f4348f0a59401d4f904f6b10facfcf2fe571-d_1280x720?r=pad Conclusion Video Lesson Congrats! You’ve completed the course. Now go forth and use file-based routing in your Vue.js applications! https://player.vimeo.com/video/ 213 yes no 2024-05-21T09:00:00+02:00 yes https://vueschool.io/courses/vue-component-fundamentals-with-the-composition-api 2026-02-19 monthly 0.8 https://vueschool.io/lessons/intro-to-vue-3-components 2026-04-23 monthly 0.8 Intro to Vue 3 Components Video Lesson In this lesson, we'll learn about Vue components. We'll get an introduction to what a component is, why we need components, and how we can create and use a component in our Vue applications. https://player.vimeo.com/video/ 286 yes no 2024-03-28T09:00:00+01:00 no https://vueschool.io/lessons/reusable-components-with-props-2 2026-04-23 monthly 0.8 Reusable Components with Props Video Lesson In this lesson, we'll see a realistic use case for reusable components and learn about Vue component props. https://player.vimeo.com/video/ 621 yes no 2024-03-28T09:00:00+01:00 no https://vueschool.io/lessons/nested-components-in-vue 2026-04-23 monthly 0.8 Nested Components in Vue Video Lesson Vue components allow us to encapsulate functionality and easily reuse them in multiple places in our applications. It is common to have components inside other components to compose the bigger feat... https://player.vimeo.com/video/ 193 yes no 2024-03-28T09:00:00+01:00 no https://vueschool.io/lessons/global-vs-local-vue-components 2026-04-23 monthly 0.8 Global vs Local Vue Components Video Lesson Vue.js 3 allows us to register components both globally and locally. In this lesson, we'll learn the difference between the two types and how it can affect the build size and performance of your ap... https://player.vimeo.com/video/ 169 yes no 2024-03-28T09:00:00+01:00 no https://vueschool.io/lessons/communication-between-vue-components-with-custom-events 2026-04-23 monthly 0.8 Communication Between Vue Components with Custom Events Video Lesson We know how to pass data to a child component through props in Vue. In this lesson, we'll learn how to communicate from a child to a parent component through custom events. https://player.vimeo.com/video/ 758 yes no 2024-03-28T09:00:00+01:00 no https://vueschool.io/lessons/vue-component-prop-and-event-validation 2026-04-23 monthly 0.8 Vue Component Prop and Event Validation Video Lesson In this lesson, learn how to provide custom validator functions to Vue component props and events. This gives maximum protection to passed prop values and emitted event payloads. https://player.vimeo.com/video/ 241 yes no 2024-03-28T09:00:00+01:00 no https://vueschool.io/lessons/component-naming-best-practices-in-vue 2026-04-23 monthly 0.8 Component Naming Best Practices in Vue Video Lesson In this lesson, we'll learn the best practices of naming our Vue.js 3 components. By following the best practices and official [Vue.js Style Guide](https://vuejs.org/style-guide/) our applications... https://player.vimeo.com/video/ 256 yes no 2024-03-28T09:00:00+01:00 no https://vueschool.io/lessons/vue-component-lifecycle-hooks 2026-04-23 monthly 0.8 Vue Component Lifecycle Hooks Video Lesson In this lesson, we learn what Vue component lifecycle hooks are and how we can use them. https://player.vimeo.com/video/ 470 yes no 2024-03-28T09:00:00+01:00 no https://vueschool.io/lessons/vue-component-slots 2026-04-23 monthly 0.8 Vue Component Slots Video Lesson In this lesson, we'll learn how to pass HTML to our Vue components using slots. Slots are an awesome feature of Vue with various levels of functionality including slot defaults, named slots, and sc... https://player.vimeo.com/video/ 561 yes no 2024-03-28T09:00:00+01:00 no https://vueschool.io/lessons/build-a-github-user-profile-vue-component 2026-04-23 monthly 0.8 Build a GitHub User Profile Vue Component Video Lesson This lesson is a component exercise lesson, where we’re going to practice creating a practical Vue component using some of the concepts we’ve learned so far. https://player.vimeo.com/video/ 606 yes no 2024-03-28T09:00:00+01:00 no https://vueschool.io/lessons/build-an-alert-vue-component 2026-04-23 monthly 0.8 Build an Alert Vue Component Video Lesson This lesson is also a component exercise lesson, where we're going to use everything we've learned about Vue components so far. https://player.vimeo.com/video/ 1044 yes no 2024-03-28T09:00:00+01:00 no https://vueschool.io/lessons/course-conclusion-5 2026-04-23 monthly 0.8 Course Conclusion Video Lesson Thanks for watching! We’d love your feedback and welcome your questions or comments. https://player.vimeo.com/video/ 44 yes no 2024-03-28T09:00:00+01:00 no https://vueschool.io/courses/nuxt-modules-the-ultimate-guide 2026-05-12 monthly 0.8 https://vueschool.io/lessons/what-are-nuxt-modules-and-why-use-them 2026-05-14 monthly 0.8 What are Nuxt Modules? And why use them? Video Lesson Join us in this exciting lesson where we'll dive into the fundamentals of Nuxt Modules! We'll uncover what they are, explore why they're so powerful, and get a sneak peek at the amazing things we'l... https://player.vimeo.com/video/ 159 yes no 2024-02-15T09:00:00+01:00 no https://vueschool.io/lessons/exploring-nuxt-modules-ecosystem-and-module-types 2026-05-15 monthly 0.8 Exploring Nuxt Modules Ecosystem and Module types Video Lesson Want to supercharge your Nuxt projects? This lesson unlocks the power of official, community, third-party and even private modules. Learn: https://player.vimeo.com/video/ 462 yes no 2024-02-15T09:00:00+01:00 no https://vueschool.io/lessons/creating-your-first-module-from-scratch 2026-05-15 monthly 0.8 Creating Your First Nuxt Module From Scratch Video Lesson Create your very first local Nuxt module from scratch! Dive into its structure, explore low-level and high-level definitions, and explore the benefits of `defineNuxtModule` with object-syntax. https://player.vimeo.com/video/ 717 yes no 2024-02-15T09:00:00+01:00 no https://vueschool.io/lessons/navigating-the-official-starter-template 2026-05-15 monthly 0.8 Navigating the Official Starter Template Video Lesson Nothing fuels developer happiness like a time-saving ecosystem. Dive into the Nuxt Module Starter Template and unlock its secrets! We'll dissect its anatomy, explore `@nuxt/module-builder`, and gui... https://player.vimeo.com/video/ 705 yes no 2024-02-15T09:00:00+01:00 no https://vueschool.io/lessons/extending-and-altering-nuxt-configuration-and-options 2026-05-15 monthly 0.8 Extending and Altering Nuxt Configuration and Options Video Lesson Craft a performance-boosting Nuxt module! Discover within the module how to minimize JavaScript bundles and compress assets using Nitro. Fine-tune esbuild options for improved app behavior, and red... https://player.vimeo.com/video/ 486 yes no 2024-02-22T09:00:00+01:00 no https://vueschool.io/lessons/nuxt-lifecycle-hooks 2026-05-15 monthly 0.8 Nuxt Lifecycle Hooks Video Lesson Nuxt hooks offer unparalleled control over your application's lifecycle, allowing you to expand almost every aspect of Nuxt. This lesson dives into using Nuxt hooks directly within your modules, em... https://player.vimeo.com/video/ 515 yes no 2024-02-22T09:00:00+01:00 no https://vueschool.io/lessons/putting-it-all-together-advanced-feature-integration-in-modules 2026-05-15 monthly 0.8 Putting It All Together: Advanced Feature Integration in Modules Video Lesson Elevate your Nuxt app to new heights in this comprehensive guide to advanced module implementation. Join me as we put everything we've learned into action, focusing on integrating a powerful new fe... https://player.vimeo.com/video/ 891 yes no 2024-02-22T09:00:00+01:00 no https://vueschool.io/lessons/resolving-paths-and-injecting-assets-to-the-app 2026-05-15 monthly 0.8 Resolving Paths and Injecting Assets to the App Video Lesson Streamline asset management in your Nuxt modules! Discover how to leverage `createResolver` from `@nuxt/kit` and `import.meta` property for path resolution, inject your module's CSS into the Nuxt a... https://player.vimeo.com/video/ 386 yes no 2024-02-29T09:00:00+01:00 no https://vueschool.io/lessons/injecting-plugins 2026-05-15 monthly 0.8 Injecting Plugins Video Lesson This lesson dives into transforming Nuxt modules into Nuxt plugin factories. Watch us build real-world features by injecting custom Nuxt plugins, Vue plugins and integrating Vue community package f... https://player.vimeo.com/video/ 733 yes no 2024-02-29T09:00:00+01:00 no https://vueschool.io/lessons/injecting-components-and-component-directories 2026-05-15 monthly 0.8 Injecting Components and Component Directories Video Lesson Boost your Nuxt workflow with effortless component injection! This lesson dives into `@nuxt/kit`'s `addComponent` and `addComponentsDir` methods, empowering you to seamlessly integrate components d... https://player.vimeo.com/video/ 449 yes no 2024-02-29T09:00:00+01:00 no https://vueschool.io/lessons/expanding-nuxt-s-auto-imports 2026-05-15 monthly 0.8 Expanding Nuxt's Auto-Imports Video Lesson Enhance your developer experience with a deep dive into the power of Nuxt auto-imports. Explore the essentials of `@nuxt/kit`, covering three key functions: `addImports`, `addImportsDir`, and `addI... https://player.vimeo.com/video/ 470 yes no 2024-03-07T09:00:00+01:00 no https://vueschool.io/lessons/extend-and-alter-nuxt-pages 2026-05-15 monthly 0.8 Extend and Alter Nuxt Pages Video Lesson Are you curious about the magic behind Nuxt's seamless integration of pages and routes? Join us in this lesson for an insightful journey into the Nuxt codebase on GitHub. We'll showcase how to leve... https://player.vimeo.com/video/ 428 yes no 2024-03-07T09:00:00+01:00 no https://vueschool.io/lessons/adding-route-rules-and-route-middlewares 2026-05-15 monthly 0.8 Adding Route Rules and Route Middlewares Video Lesson Time to unlock Nuxt Kit's power to optimize user experience & performance! Master `extendRouteRules` to leverage Nitro server engine features for a lightning-fast static generation, Stale While Rev... https://player.vimeo.com/video/ 470 yes no 2024-03-07T09:00:00+01:00 no https://vueschool.io/lessons/unlocking-nitro-mystery-p1-discovering-the-unjs-ecosystem-and-nitro 2026-05-15 monthly 0.8 Unlocking Nitro Mystery P1: Discovering the UnJS Ecosystem and Nitro Video Lesson Ever wondered what secret superpowers fuel Nuxt? In this lesson, we're diving into the world of the amazing UnJS and Nitro. Get ready for: https://player.vimeo.com/video/ 540 yes no 2024-03-14T09:00:00+01:00 yes https://vueschool.io/lessons/nitro-server-handlers 2026-05-15 monthly 0.8 Nitro Server Handlers Video Lesson In this lesson, we focused on Nuxt Kit utilities for the Nitro web server-engine. We also covered practical integration into Nuxt modules, offering hands-on insights for: https://player.vimeo.com/video/ 343 yes no 2024-03-14T09:00:00+01:00 yes https://vueschool.io/lessons/use-nuxt-kit-to-extend-vite-&-webpack-configs 2026-03-07 monthly 0.8 https://i.vimeocdn.com/video/1819050993-8dcf6758fd57788452d0dda4346ae7336cf1cf3e106a65ba55eea94247ebab52-d_1280x720?&r=pad&region=us Use nuxt/kit to extend Vite & Webpack configs Video Lesson In this lesson, we explore how Nuxt Kit simplifies Vite configuration customization. With utilities like `extendViteConfig`, we gain direct access to Vite's options, streamlining our code and offer... https://player.vimeo.com/video/925400514 139 yes no 2024-03-21T09:00:00+01:00 yes https://vueschool.io/lessons/course-conclusion-3 2026-05-15 monthly 0.8 Course Conclusion Video Lesson Our course may have concluded, but your learning journey will never end :) https://player.vimeo.com/video/ 82 yes no 2024-03-21T09:00:00+01:00 yes https://vueschool.io/lessons/passing-and-exposing-module-options 2026-05-15 monthly 0.8 Passing and Exposing Module Options Video Lesson Empower users with customizable module options and expose those options for dynamic control during runtime. https://player.vimeo.com/video/ 450 yes no 2024-02-22T09:00:00+01:00 no https://vueschool.io/lessons/injecting-plugin-templates 2026-05-15 monthly 0.8 Injecting Plugin Templates Video Lesson Unlock the power of Nuxt 3 Plugin templates for flexible app development! This in-depth lesson teaches how to inject custom Embedded JavaScript Template (`.ejs`) Plugins, control client-side or ser... https://player.vimeo.com/video/ 632 yes no 2024-02-29T09:00:00+01:00 no https://vueschool.io/lessons/unlocking-nitro-mystery-p2-what-is-nitro-to-nuxt 2026-05-15 monthly 0.8 Unlocking Nitro Mystery P2: What is Nitro to Nuxt? Video Lesson In this lesson, we'll continue from where we left off last time and dive into the dynamic connection between Nitro, a standalone server engine, and Nuxt. We'll examine how they come together to pro... https://player.vimeo.com/video/ 316 yes no 2024-03-14T09:00:00+01:00 yes https://vueschool.io/lessons/nitro-pre-rendering-and-auto-imports 2026-05-15 monthly 0.8 Nitro Pre-Rendering and Auto-Imports Video Lesson Picking up from where we left, in this lesson, we will discuss: https://player.vimeo.com/video/ 238 yes no 2024-03-21T09:00:00+01:00 yes https://vueschool.io/lessons/nitro-server-plugins 2026-05-15 monthly 0.8 Nitro Server Plugins Video Lesson In this lesson, we added a new feature to the Nuxt Basic Optimizer module we built in lessons 5 to 7 – now, it can efficiently compress dynamic assets using Nitro Plugins. https://player.vimeo.com/video/ 320 yes no 2024-03-21T09:00:00+01:00 yes https://vueschool.io/courses/crafting-a-custom-component-library-with-vue-and-daisy-ui 2026-05-12 monthly 0.8 https://vueschool.io/lessons/creating-a-component-library-intro 2026-05-03 monthly 0.8 Creating a Component Library Intro Video Lesson Hello 👋 and welcome to the course: “Crafting a Custom Component Library with Vue and Daisy UI”. If you’re looking to build your own component library with Vue.js, you’re in the right pl... https://player.vimeo.com/video/ 264 yes no 2024-04-02T17:00:00+02:00 yes https://vueschool.io/lessons/course-prerequisites 2026-05-03 monthly 0.8 Course Prerequisites Video Lesson In this lesson, let’s make sure you’re at the right level to proceed with the course. If you don’t quite have the right experience yet, you can prepare with the links to various courses below. https://player.vimeo.com/video/ 102 yes no 2024-04-02T17:00:00+02:00 yes https://vueschool.io/lessons/what-makes-a-good-component-library 2026-05-03 monthly 0.8 What Makes a Good Component Library Video Lesson In this lesson, get the rundown of what makes a good component library. It’s not a technical conversation but an honest look at many different aspects involved. We’ll talk about things like bea... https://player.vimeo.com/video/ 327 yes no 2024-04-02T17:00:00+02:00 yes https://vueschool.io/lessons/creating-monorepos-with-pnpm 2026-05-03 monthly 0.8 Creating Monorepos with PNPM Video Lesson Ready to dive into the course? In this lesson, we'll explore the foundational boilerplate code and equip you with the skills to set up a streamlined monorepo using pnpm. https://player.vimeo.com/video/ 300 yes no 2024-04-02T17:00:00+02:00 yes https://vueschool.io/lessons/managing-multiple-packages-in-a-pnpm-monorepo 2026-05-03 monthly 0.8 Managing Multiple Packages in a PNPM Monorepo Video Lesson In this lesson, we'll tackle dependency management within your pnpm monorepo. Learn how pnpm let’s you easily reference local packages from the workspace and how to use the filter flag to manage... https://player.vimeo.com/video/ 485 yes no 2024-04-09T09:00:00+02:00 yes https://vueschool.io/lessons/your-first-component-a-button 2026-05-03 monthly 0.8 Your First Component: A Button Video Lesson In this lesson, we start developing the very first component within our library. It’s important to remember when developing a component library with Tailwind CSS that full class names must be pre... https://player.vimeo.com/video/ 766 yes no 2024-04-09T09:00:00+02:00 yes https://vueschool.io/lessons/displaying-various-component-states-in-histoire 2026-05-03 monthly 0.8 Displaying Various Component States in Histoire Video Lesson In this lesson, learn how to use Histoire to display multiple color variations of our button at one time. Also learn how to add controls for dynamically playing with component state and to customi... https://player.vimeo.com/video/ 359 yes no 2024-04-09T09:00:00+02:00 yes https://vueschool.io/lessons/consistent-naming-conventions-with-global-variables 2026-05-03 monthly 0.8 Consistent Naming Conventions with Global Variables Video Lesson In this lesson, learn a strategy for keeping your prop options consistent across various components in a Vue.js component library. https://player.vimeo.com/video/ 587 yes no 2024-04-09T09:00:00+02:00 yes https://vueschool.io/lessons/documenting-the-button-component 2026-05-03 monthly 0.8 Documenting the Button Component Video Lesson In this lesson, we create documentation for the button component using Vitepress. https://player.vimeo.com/video/ 917 yes no 2024-04-16T09:00:00+02:00 yes https://vueschool.io/lessons/using-changesets-to-version-the-library 2026-05-03 monthly 0.8 Using ChangeSets to Version the Library Video Lesson In this lesson, we use ChangeSets to version our Vue component library and generate helpful changelogs, so that users are aware of what has changed between versions. https://player.vimeo.com/video/ 602 yes no 2024-04-16T09:00:00+02:00 yes https://vueschool.io/lessons/automate-new-component-bootstrapping-with-hygen 2026-05-03 monthly 0.8 Automate New Component Bootstrapping with Hygen Video Lesson In this lesson, learn how to bootstrap new files from templates and dynamically inject new lines into existing files with Hygen. Hygen is great for bootstrapping new components in a Vue component l... https://player.vimeo.com/video/ 703 yes no 2024-04-16T09:00:00+02:00 yes https://vueschool.io/lessons/starting-with-the-component-api-%28accordion-component-part-1%29 2026-05-03 monthly 0.8 Starting with the Component API (Accordion Component Part 1) Video Lesson In this lesson, we start creating an accordion component. We start by designing the API for the component. It’s important for the component API to dictate the component implementation and not the... https://player.vimeo.com/video/ 311 yes no 2024-04-16T09:00:00+02:00 yes https://vueschool.io/lessons/tightly-coupled-components-with-provide-inject-%28accordion-component-part-2%29 2026-05-03 monthly 0.8 Tightly Coupled Components with Provide Inject (Accordion Component Part 2) Video Lesson In this lesson, we write the accordion component implementation to match the API thought out during the last lesson. To do this, we share data between 2 tightly coupled components with Provide Inje... https://player.vimeo.com/video/ 535 yes no 2024-04-16T09:00:00+02:00 yes https://vueschool.io/lessons/enhancing-the-accordion-%28challenge%29 2026-05-03 monthly 0.8 Enhancing the Accordion (Challenge) Video Lesson Time for a coding challenge! Your mission is to enhance the Vue accordion component with 2 additional features: https://player.vimeo.com/video/ 107 yes no 2024-04-23T09:00:00+02:00 yes https://vueschool.io/lessons/lessons-from-an-avatar-component 2026-05-03 monthly 0.8 Lessons from an Avatar Component Video Lesson In this lesson, take a look at the internals of a custom Vue Avatar component and learn lessons like: https://player.vimeo.com/video/ 418 yes no 2024-04-23T09:00:00+02:00 yes https://vueschool.io/lessons/wrap-radix-vue-for-quick-accessibility-and-functional-support-context-menu-component 2026-05-03 monthly 0.8 Wrap Radix Vue for Quick Accessibility and Functional Support (Context Menu Component) Video Lesson In this lesson, learn how to supercharge your component functionality with Radix Vue. Let Radix Vue handle some of the accessibility and functional concerns so that you can focus on making your UI... https://player.vimeo.com/video/ 413 yes no 2024-04-23T09:00:00+02:00 yes https://vueschool.io/lessons/lessons-from-an-alert-component 2026-05-03 monthly 0.8 Lessons from an Alert Component Video Lesson In this lesson, we look at the implementation for an alert component with DaisyUI and Vue.js. During the process we use some handy tools like Iconify and jsdocs. https://player.vimeo.com/video/ 521 yes no 2024-04-23T09:00:00+02:00 yes https://vueschool.io/lessons/data-table-component-challenge 2026-05-03 monthly 0.8 Data Table Component Challenge Video Lesson In this lesson, let’s learn how to create a basic data table component complete with custom slots for each column and sorting functionality. https://player.vimeo.com/video/ 1050 yes no 2024-04-23T09:00:00+02:00 yes https://vueschool.io/lessons/ratings-component-challenge 2026-03-28 monthly 0.8 Ratings Component Challenge Video Lesson In this lesson, challenge yourself to create a ratings component. It should work with v-model and support as many of the variations as shown in the daisy docs as you desire. https://player.vimeo.com/video/69c2bc359ae74a3428960c6f 648 yes no 2024-04-30T09:00:00+02:00 yes https://vueschool.io/lessons/steps-component-challenge 2026-05-03 monthly 0.8 Steps Component Challenge Video Lesson In this lesson, we challenge you to create a Vue steps component for yourself. https://player.vimeo.com/video/ 135 yes no 2024-04-30T09:00:00+02:00 yes https://vueschool.io/lessons/end-of-the-component-spree 2026-05-03 monthly 0.8 End of the Component Spree Video Lesson In this lesson, we invite you to create many more Vue components based on other Daisy UI components that we did not handle in the course. There are many we didn’t already handle like: carousels,... https://player.vimeo.com/video/ 52 yes no 2024-04-30T09:00:00+02:00 yes https://vueschool.io/lessons/publishing-a-vue-component-library-to-npm 2026-05-03 monthly 0.8 Publishing a Vue Component Library to NPM Video Lesson In this lesson, we’ll publish the Vue component library to npm with changesets. We’ll also take a look at the package.json file to see how we’ve prepared the library for publishing and consum... https://player.vimeo.com/video/ 624 yes no 2024-04-30T09:00:00+02:00 yes https://vueschool.io/lessons/themes-for-daisy-ui 2026-05-03 monthly 0.8 Themes for Daisy UI Video Lesson In this lesson, learn how to use Tailwind CSS and daisyUI alongside our Vue component library for maximum styling flexibility. Daisy UI has a great collection of themes to choose from and even allo... https://player.vimeo.com/video/ 361 yes no 2024-05-07T09:00:00+02:00 yes https://vueschool.io/lessons/integrate-your-component-library-as-a-nuxt-module 2026-05-03 monthly 0.8 Integrate Your Component Library as a Nuxt Module Video Lesson In this lesson, learn how to add Nuxt support for your Vue component library. https://player.vimeo.com/video/ 368 yes no 2024-05-07T09:00:00+02:00 yes https://vueschool.io/lessons/course-conclusion-4 2026-05-03 monthly 0.8 Course Conclusion Video Lesson Thanks for watching! We hope you enjoyed the course. If you have end up using Daisy UI or building your own component library around Daisy UI or Tailwind CSS, we would love to see what you’ve bui... https://player.vimeo.com/video/ 118 yes no 2024-05-07T09:00:00+02:00 yes https://vueschool.io/courses/a-wordle-on-test-driven-development-in-vue-js 2026-05-12 monthly 0.8 https://vueschool.io/lessons/what-is-tdd-and-how-it-helps-us-write-better-software 2026-05-02 monthly 0.8 What is TDD and how it helps us write better software? Video Lesson **Test-driven development**, also known as **TDD**, is a software development approach that prioritizes writing tests before writing the implementation. https://player.vimeo.com/video/ 245 yes no 2023-12-21T09:00:00+01:00 yes https://vueschool.io/lessons/different-types-of-tests 2026-05-02 monthly 0.8 Different types of tests Video Lesson Writing and running tests is a key element of Test-Driven Development. In this episode, we will explore some types of tests based on their scope. More specifically, we will explore Unit, Feature, a... https://player.vimeo.com/video/ 524 yes no 2023-12-21T09:00:00+01:00 yes https://vueschool.io/lessons/preparing-your-environment 2026-05-02 monthly 0.8 Preparing your environment Video Lesson In this episode, our main focus will be setting up the development environment for our game using Vite, Vue, TypeScript, and Vue-Test-Utils. This will lay the foundation we’ll need to start explo... https://player.vimeo.com/video/ 646 yes no 2023-12-21T09:00:00+01:00 yes https://vueschool.io/lessons/our-first-red 2026-05-02 monthly 0.8 Our first Red Video Lesson In this episode, we will be performing a full iteration of the TDD phases (Red, Green, Refactor). https://player.vimeo.com/video/ 707 yes no 2024-01-04T09:00:00+01:00 yes https://vueschool.io/lessons/refactor-via-extractions 2026-05-02 monthly 0.8 Refactor via extractions Video Lesson In the last episode, we covered how our tests should be named in a clear way that describes the requirements they are enforcing, this is a good way to allow the usage of our test suite as a second... https://player.vimeo.com/video/ 658 yes no 2024-01-04T09:00:00+01:00 yes https://vueschool.io/lessons/defining-the-rules-for-word-of-the-day 2026-05-02 monthly 0.8 Defining the rules for Word of the day Video Lesson Vitest offers a variety of resources for us to use while writing our tests, included among these are Mocks and Spies. In this episode, we will understand when and why we would use these tools. https://player.vimeo.com/video/ 764 yes no 2024-01-04T09:00:00+01:00 yes https://vueschool.io/lessons/tests-as-documentation 2026-05-02 monthly 0.8 Tests as documentation Video Lesson Let’s explore how we can leverage the usage of groups to organize our test suite better. https://player.vimeo.com/video/ 797 yes no 2024-01-11T09:00:00+01:00 yes https://vueschool.io/lessons/handling-player-input 2026-05-02 monthly 0.8 Handling Player Input Video Lesson In this lesson, we will be defining and enforcing the rules behind a player typing a guess. This episode is also a great opportunity to practice or learn about Vue Writeable Computed Ref for transf... https://player.vimeo.com/video/ 805 yes no 2024-01-11T09:00:00+01:00 yes https://vueschool.io/lessons/flexible-tests-and-the-freedom-to-change-code 2026-05-02 monthly 0.8 Flexible tests and the freedom to change code Video Lesson Let’s experience firsthand the benefits of following a test philosophy of focusing on behavior instead of implementation. https://player.vimeo.com/video/ 607 yes no 2024-01-18T09:00:00+01:00 yes https://vueschool.io/lessons/displaying-all-guesses 2026-05-02 monthly 0.8 Displaying all guesses Video Lesson In this lesson, we will be rendering all the guesses the player has submitted so far. https://player.vimeo.com/video/ 524 yes no 2024-01-18T09:00:00+01:00 yes https://vueschool.io/lessons/providing-hints-after-each-submission-part-1 2026-05-02 monthly 0.8 Providing hints after each submission - Part 1 Video Lesson In the context of the authentic Wordle game, another crucial aspect involves offering feedback to the player after each successful submission, indicating the accuracy of their last guess. https://player.vimeo.com/video/ 580 yes no 2024-02-01T09:00:00+01:00 yes https://vueschool.io/lessons/course-conclusion-2 2026-05-03 monthly 0.8 Course Conclusion Video Lesson Congrats on completing the course! You should now feel pretty comfortable with the process of Test Driven Development within a Vue and TypeScript project. https://player.vimeo.com/video/ 142 yes no 2024-02-08T09:00:00+01:00 yes https://vueschool.io/lessons/let%E2%80%99s-add-a-bit-more-styling 2026-05-02 monthly 0.8 Let’s add a bit more styling Video Lesson We have progressed a lot on the different functionalities and rules behind a Wordle game, it’s time for us to do another session of styling to polish the looks of our application a little bit more. https://player.vimeo.com/video/ 288 yes no 2024-02-01T09:00:00+01:00 yes https://vueschool.io/lessons/fixing-bugs-and-writing-regression-tests 2026-05-02 monthly 0.8 Fixing bugs and writing regression tests Video Lesson Automated tests are a crucial part of having a robust codebase that is easy to work with, but they are not a replacement for manual tests. https://player.vimeo.com/video/ 695 yes no 2024-01-11T09:00:00+01:00 yes https://vueschool.io/lessons/disabling-controls-when-the-game-is-over 2026-05-02 monthly 0.8 Disabling controls when the game is over Video Lesson Let's improve our application by preventing our players from submitting guesses after the game ends. https://player.vimeo.com/video/ 318 yes no 2024-02-01T09:00:00+01:00 yes https://vueschool.io/lessons/allowing-players-to-make-multiple-guesses 2026-05-02 monthly 0.8 Allowing players to make multiple guesses Video Lesson In this lesson, we will improve our application to allow the player to make multiple guesses. https://player.vimeo.com/video/ 578 yes no 2024-01-18T09:00:00+01:00 yes https://vueschool.io/lessons/providing-hints-after-each-submission-part-2 2026-05-03 monthly 0.8 Providing hints after each submission - Part 2 Video Lesson Another key point behind the real Wordle game is that after each successful submission, the game presents the player with feedback in the following form: https://player.vimeo.com/video/ 651 yes no 2024-02-08T09:00:00+01:00 yes https://vueschool.io/lessons/visual-regression-tests 2026-05-03 monthly 0.8 Visual Regression Tests Video Lesson Throughout this course, we have emphasized the importance of writing tests for functionality instead of looks and other stylistic choices. However, there are scenarios in which it is important to e... https://player.vimeo.com/video/ 578 yes no 2024-02-08T09:00:00+01:00 yes https://vueschool.io/courses/tailwind-css-fundamentals 2026-05-12 monthly 0.8 https://vueschool.io/lessons/what-is-tailwind-and-installation-with-vue-and-nuxt 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1757216864-80715ad6c5b6e39d51a17c5686d3e1fc97bc342b0476cad93e8e5743e5f9d2bf-d_1280x720?r=pad What is Tailwind and Installation with Vue and Nuxt Video Lesson In this lesson, we’ll introduce you to the utility first approach of Tailwind CSS and get Tailwind setup with a new Vue and Nuxt project. https://player.vimeo.com/video/ 560 yes no 2023-11-22T09:00:00+01:00 yes https://vueschool.io/lessons/your-first-tailwind-styled-vue-component 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1757219919-9bae53bf1ba3dcbfe1577af47014d6c140233c5dcce1b0014c1b0cab7c3f278e-d_1280x720?&r=pad Your First Tailwind Styled Vue Component Video Lesson In this lesson, we style a Vue.js card component with Tailwind CSS. In the process, we introduce some common Tailwind utility classes that you’ll use all the time! https://player.vimeo.com/video/ 809 yes no 2023-11-22T09:00:00+01:00 yes https://vueschool.io/lessons/handling-hover-focus-and-other-states-in-tailwind-css 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1757220555-84fcaddbb278458b6fd40d4873cfad6b6751e09fba9164c4ed8a19c524ed72f4-d_1280x720?&r=pad Handling Hover, Focus, and Other States in Tailwind CSS Video Lesson In this lesson, learn how to handle various element states with Tailwind. The beauty of the approach is that you can apply state styles directly in the HTML class list. You can even handle multiple... https://player.vimeo.com/video/ 324 yes no 2023-11-22T09:00:00+01:00 yes https://vueschool.io/lessons/wrapping-tailwind-css-classes-for-legibility 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1761166459-bf2b9e350fca6c4aa3f7b5a3e3feec707679e8e5baed387b49890462d8b93f1d-d_1280x720?&r=pad Wrapping Tailwind CSS Classes For Legibility Video Lesson In this lesson, learn how to optionally configure your IDE to view the long tailwind class lists according to your preference. https://player.vimeo.com/video/ 85 yes no 2023-11-30T09:00:00+01:00 yes https://vueschool.io/lessons/styling-pseudo-elements-in-tailwind-css 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1761171238-65f30b1ff0329f03888ad391ab42fb592dcbdbeb731801f8b44d8ffdd55c3172-d_1280x720?&r=pad Styling Pseudo Elements in Tailwind CSS Video Lesson In this lesson, learn how to style pseudo-elements in Tailwind CSS. Style `:before` and `:after` elements, placeholders, text selections, list markers, input placeholders, and more! https://player.vimeo.com/video/ 336 yes no 2023-11-30T09:00:00+01:00 yes https://vueschool.io/lessons/dark-mode-in-tailwind-css 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1761167033-b4e89f80e46e0b62320d6dcb4005c2234f3870539cdc3972a5e439527db7a11e-d_1280x720?&r=pad Dark Mode in Tailwind CSS Video Lesson In this lesson, we learn how to support dark mode using Tailwind CSS. There are a couple options for implementation: using the user’s system preference or making the preference configurable at th... https://player.vimeo.com/video/ 260 yes no 2023-11-30T09:00:00+01:00 yes https://vueschool.io/lessons/layouts-in-tailwind-with-flexbox 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1764814677-fdf68e9a7fc1c3f8b8102a871aea0739521a2ee86656ed05d5f668468a680d94-d_1280x720?&r=pad Layouts in Tailwind with Flexbox Video Lesson In this lesson, learn how to use flexbox to create flexible layouts with Tailwind CSS and Vue.js. https://player.vimeo.com/video/ 435 yes no 2023-12-07T09:00:00+01:00 yes https://vueschool.io/lessons/layouts-in-tailwind-with-grid 2026-02-03 monthly 0.8 https://i.vimeocdn.com/video/1764816498-b73bd0c142cf4b9e1f266b875685bbf4c4bc3b6a66a5ecbd0d670f78cba469ac-d_1280x720?&r=pad&region=us Layouts in Tailwind with Grid Video Lesson In this lesson, learn how to create grid layouts with Tailwind CSS. https://player.vimeo.com/video/ 357 yes no 2023-12-07T09:00:00+01:00 yes https://vueschool.io/lessons/responsive-design-with-tailwind-css 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1764823957-32bb53362b69be62dad9a45b67eda20a5a5490a9a1f69562a84bb67d318e7ab1-d_1280x720?&r=pad Responsive Design with Tailwind CSS Video Lesson In this lesson, learn how to use breakpoint variants in Tailwind CSS to create responsive designs for your Vue.js applications. https://player.vimeo.com/video/ 209 yes no 2023-12-07T09:00:00+01:00 yes https://vueschool.io/lessons/customizing-tailwind-for-bespoke-designs 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1768254167-b232edf52bf66d0b9ec13edc10093cbb79fed76d3974e65873e16a7fb71b56d2-d_1280x720?&r=pad Customizing Tailwind for Bespoke Designs (Tailwind v3) Video Lesson In this lesson, learn how to customize Tailwind CSS so that your Vue.js app looks unique. The `tailwind.config.js` file is the perfect place to customize things like colors, fonts, breakpoints, and... https://player.vimeo.com/video/ 460 yes no 2023-12-14T09:00:00+01:00 yes https://vueschool.io/lessons/tailwind-plugins 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1768263973-a2030abc82784716ba21c19a9bff5c77ab9b36735f5494d769b1695581d2e5b2-d_1280x720?&r=pad Tailwind Plugins Video Lesson In this lesson, I’ll introduce you to Tailwind plugins and we’ll play with 2 official plugins: Typography and Forms. Tailwind CSS plugins make it super easy to quickly add more styling features... https://player.vimeo.com/video/ 376 yes no 2023-12-14T09:00:00+01:00 yes https://vueschool.io/lessons/pricing-table-challenge-with-tailwind-and-vue 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1768266001-dc2f0889991c1403d11bdc4a2720b3e221d3bee87c4e3733a002f95c5713c028-d_1280x720?&r=pad Pricing Table Challenge with Tailwind and Vue Video Lesson In this lesson, we challenge you to create a pricing table from scratch with Tailwind CSS. https://player.vimeo.com/video/ 104 yes no 2023-12-14T09:00:00+01:00 yes https://vueschool.io/lessons/navbar-component-challenge-with-tailwind-and-vue 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1787986091-f038baa07f4312a1aa805c5d84b53e7a3f23befa46785d017c48ec80a2068eb0-d_1280x720?&r=pad Navbar Component Challenge with Tailwind and Vue Video Lesson In this lesson, we challenge you to create a navbar component with Tailwind CSS modeled after a navbar found in the Tailwind UI component library. https://player.vimeo.com/video/ 146 yes no 2024-01-25T09:00:00+01:00 yes https://vueschool.io/lessons/shopping-cart-checkout-form-with-tailwind-and-vue 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1787992044-c5fe7a188d9ceef9e1c727e3baca0dda8828789154fd77904e0f438407cf19a2-d_1280x720?&r=pad Shopping Cart Checkout Form with Tailwind and Vue Video Lesson In this lesson, we challenge you to create a checkout component with Tailwind CSS. You can use the awesome iconify library https://player.vimeo.com/video/ 123 yes no 2024-01-25T09:00:00+01:00 yes https://vueschool.io/lessons/tailwind-css-fundamentals-course-conclusion 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1787993990-a72ed8a485c3d284e408d1d62185e6522b3420c0a55cec06fdef25b25791bb14-d_1280x720?&r=pad Course Conclusion Video Lesson Thanks for watching the course! We hope you’ve enjoyed it! https://player.vimeo.com/video/ 46 yes no 2024-01-25T09:00:00+01:00 yes https://vueschool.io/lessons/mixing-flex-and-grid-plus-important 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1764818618-f0ad1d276b41dbcb1c7b27bb9e0f25e79c5477bdac3f268ca1b34c7405e7e268-d_1280x720?&r=pad Mixing Flex and Grid Plus Important Video Lesson In this lesson, learn how to mix both flex and grid and make utility classes important with the exclamation point prefix. https://player.vimeo.com/video/ 130 yes no 2023-12-07T09:00:00+01:00 yes https://vueschool.io/lessons/pricing-table-challenge-with-tailwind-and-vue-solution 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1787987238-316ba5b80c1c5b5aac8881fb10915137ce3df1c6c6b181a2a8c4c2ccdb9848d2-d_1280x720?&r=pad Pricing Table Challenge with Tailwind and Vue - Solution Video Lesson In this lesson, let’s walk through styling the pricing table with Tailwind CSS together. https://player.vimeo.com/video/ 1293 yes no 2024-01-25T09:00:00+01:00 yes https://vueschool.io/lessons/navbar-component-challenge-with-tailwind-and-vue-solution 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1787986758-c311745daad79fa602960c42d0ab4226dadbe715f31a5a83fb4e233e0928aa5c-d_1280x720?&r=pad Navbar Component Challenge with Tailwind and Vue - Solution Video Lesson In this lesson, we code out a NavBar component together with Tailwind CSS. https://player.vimeo.com/video/ 1566 yes no 2024-01-25T09:00:00+01:00 yes https://vueschool.io/lessons/shopping-cart-checkout-form-with-tailwind-and-vue-solution 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1787993057-fc928a571626fe867c70fb27b2928c0d4dd0148324a3cb3f617a6efb9742659e-d_1280x720?&r=pad Shopping Cart Checkout Form with Tailwind and Vue - Solution Video Lesson In this lesson, we tackle designing a checkout form with Tailwind CSS and Vue. https://player.vimeo.com/video/ 1188 yes no 2024-01-25T09:00:00+01:00 yes https://vueschool.io/lessons/install-tailwind-version-4-with-vue-and-nuxt 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1991638358-d4f4a82cf23a03122974cfac762983440d649e8c691cc75da3a56a5a7eed2262-d_1280x720?&r=pad Install Tailwind Version-4 with Vue and Nuxt Video Lesson In this lesson, learn how to install Tailwind CSS version 4 (the latest and greatest! 🎉) with Vue.js and Nuxt. https://player.vimeo.com/video/ 121 yes no 2025-03-10T16:28:00+01:00 no https://vueschool.io/lessons/tailwind-version-4-container-queries 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1991654927-f27682948eb3d0438b4da0fc733ec75e839d8ffc043ceac583066d12df56c805-d_1280x720?&r=pad Tailwind Version 4 Container Queries Video Lesson In this lesson, learn about how container queries take responsive design to the next level. Style elements based on the size of a parent element instead of the size of the entire viewport. To use T... https://player.vimeo.com/video/ 207 yes no 2025-03-10T16:59:00+01:00 no https://vueschool.io/lessons/configuring-tailwindcss-version-4 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1994313217-644244eacf355d71825f2e3b1a05069a48c7f06e58b5750673df924d0df2ef09-d_1280x720?&r=pad Configuring TailwindCSS Version 4 Video Lesson In this lesson, learn how to configure Tailwind CSS version 4 via it's updated approach. In Tailwind CSS version 4, all theme configuration is done in a .css file with the @theme directive. https://player.vimeo.com/video/ 354 yes no 2025-03-17T14:45:00+01:00 no https://vueschool.io/lessons/overview-of-tailwind-css-version-4-changes 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1994769950-a02a51e24bffa9b190b334a985b0c8d98e7d7d8ce3ec5250318760ad23ca08af-d_1280x720?&r=pad Overview of Tailwind CSS Version 4 Changes Video Lesson In this lesson, let's go through the TailwindCSS version 4 announcement to see what all has changed. Added features include: built-in import support, a modernized color palette, new 3d transform ut... https://player.vimeo.com/video/ 415 yes no 2025-03-18T14:57:00+01:00 no https://vueschool.io/courses/material-ui-with-vuetify-and-vue-js 2026-05-12 monthly 0.8 https://vueschool.io/lessons/what-is-vuetify 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1751226357-0629e9e04e53b127a3386f2cc34b42164accbf8c0b62474c1d9fdec8368c320c-d_1280x720?r=pad What is Vuetify? Video Lesson Welcome to the course! 👋 https://player.vimeo.com/video/ 204 yes no 2023-10-26T09:00:00+02:00 no https://vueschool.io/lessons/create-the-project-and-define-the-page-layout 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1743626735-6c3bbda4ad99a4a15e0d16f42280d4a2e9d9a01ea059822594cb26be8d3868c9-d_1280x720?r=pad Create the Project and Define the Page Layout Video Lesson In this lesson, we bootstrap our Vuetify project with npm, start from a super nice layout, and get the router view displayed in the main content area. https://player.vimeo.com/video/ 490 yes no 2023-10-26T09:00:00+02:00 yes https://vueschool.io/lessons/a-user-profile-menu-in-the-navbar-with-vuetify 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1747083868-ce7fd82e908e1d6a1acc2da1537018da27f22cc0c0d24a0ef5c44616f29c5c33-d_1280x720?r=pad A User Profile Menu in the NavBar with Vuetify Video Lesson In this lesson, learn how to work the Vuetify’s Avatar and Menu components to create a user avatar in the navbar. https://player.vimeo.com/video/ 461 yes no 2023-11-02T09:00:00+01:00 yes https://vueschool.io/lessons/the-vuetify-navigation-drawer 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1747083723-1aadc93235d6b4d05703f79221d7a5eb8d1010d0df65800fd1dec864263786a1-d_1280x720?r=pad The Vuetify Navigation Drawer Video Lesson In this lesson, learn how to add links to the navigation drawer for moving around the admin dashboard. Navigation items can have icons and the drawer can exist in several states including collapsed... https://player.vimeo.com/video/ 589 yes no 2023-11-02T09:00:00+01:00 yes https://vueschool.io/lessons/the-table-component-and-some-css-utilities 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1751228730-02d09b5f5ce12705d170ac9db7eace5b7ef6b11507aef1b154ffbba397d66d87-d_1280x720?r=pad The Table Component and Some CSS Utilities Video Lesson In this lesson, learn how to use the Vuetify Table component in a Vue.js admin dashboard. https://player.vimeo.com/video/ 470 yes no 2023-11-02T09:00:00+01:00 no https://vueschool.io/lessons/the-data-table-component-and-vuetify-labs 2026-02-20 monthly 0.8 https://i.vimeocdn.com/video/1751229463-19b508b09721257b30a82e6ffc9a252f38fe9b9931791f409b5c9c97b16a3d7f-d_1280x720?r=pad The Data Table Component and Vuetify Labs Video Lesson In this lesson, learn about experimenting with the cutting-edge Vue components from Vuetify Labs. Also, learn to use a data table to quickly display tabular data in your Vue apps with pagination, f... https://player.vimeo.com/video/ 896 yes no 2023-11-09T09:00:00+01:00 no https://vueschool.io/lessons/vuetify-buttons-and-dialogs 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1751230008-fc18125de69e84056d9ba3de28af5885295ad2ee79648849624f36c9c32c19f0-d_1280x720?r=pad Vuetify Buttons and Dialogs Video Lesson In this lesson, learn to use Vuetify’s dialog component to create a modal overlay for our post editing form. Also, get a brief look at the `v-btn` component and some of the props used to customiz... https://player.vimeo.com/video/ 584 yes no 2023-11-09T09:00:00+01:00 yes https://vueschool.io/lessons/vuetify-form-and-input-components 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1750636700-4272096bdcc8a9d913a6a0a78e982b1504ba7d73b47e91205a6237df5a91bc31-d_1280x720?r=pad Vuetify Form and Input Components Video Lesson In this lesson, peruse the available form input components that Vuetify has to offer and learn how to combine them to make a post form for our Vue-powered admin dashboard. https://player.vimeo.com/video/ 793 yes no 2023-11-09T09:00:00+01:00 yes https://vueschool.io/lessons/vuetify-form-validation 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1751231108-bcbd7fd517a84ac303e5801e19d0cb1c81e787836f22e184ffb99c82f396c82b-d_1280x720?r=pad Vuetify Form Validation Video Lesson In this lesson, learn how to add validation to your Vuetify forms. Rules are as simple as a function that returns true for valid fields or an invalid field message. Vuetify then automatically appli... https://player.vimeo.com/video/ 457 yes no 2023-11-09T09:00:00+01:00 yes https://vueschool.io/lessons/vuetify-course-conclusion 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1754182243-67d35d9d49a263b90904fc62e56883a877c120d0c6a8c1834844cf3b654ae2d6-d_1280x720?r=pad Course Conclusion Video Lesson Thanks for watching! 🙏 https://player.vimeo.com/video/ 214 yes no 2023-11-16T09:00:00+01:00 yes https://vueschool.io/lessons/vuetify-feedback-components 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1754181732-46c89c100d3fce92326e97d45b6c6052d2924c9ba5d65e80915d2937469572a0-d_1280x720?r=pad Vuetify Feedback Components Video Lesson In this lesson, learn how to implement the Alert and SnackBar components to provide user feedback with Vuetify. https://player.vimeo.com/video/ 445 yes no 2023-11-16T09:00:00+01:00 yes https://vueschool.io/lessons/vuetify-directives 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1754180322-8877e432721ab4a444733d03f58b2a61d96c8eb1f0c8ee5d7518da34dd191c31-d_1280x720?r=pad Vuetify Directives Video Lesson In this lesson, learn about the available Vuetify directives and see the v-ripple, v-click-outside, and v-resize directives in action. https://player.vimeo.com/video/ 403 yes no 2023-11-16T09:00:00+01:00 no https://vueschool.io/courses/content-sites-with-astro-and-vue-js 2026-05-12 monthly 0.8 https://vueschool.io/lessons/what-is-astro 2026-05-03 monthly 0.8 What is Astro? Video Lesson In our introductory lesson on Astro and Vue.js, we explore Astro's unique framework tailored for content-rich sites like blogs and portfolios. With its 'no JavaScript by default' approach and flexi... https://player.vimeo.com/video/ 183 yes no 2023-09-28T17:00:00+02:00 no https://vueschool.io/lessons/first-look-at-astro-basics 2026-05-03 monthly 0.8 First Look at Astro Basics Video Lesson In this lesson, we explored the initial steps of setting up your Astro project. You learned about two primary approaches: starting from scratch or leveraging Astro's range of pre-made templates. https://player.vimeo.com/video/ 436 yes no 2023-09-28T17:00:00+02:00 yes https://vueschool.io/lessons/using-vue-with-astro 2026-05-03 monthly 0.8 Using Vue with Astro Video Lesson In this lesson, learn how to setup Astro to work with Vue components. Get a feel for how easy it is to work with Vue in an Astro project and learn how to include Vue files with and without JavaScri... https://player.vimeo.com/video/ 243 yes no 2023-10-05T09:00:00+02:00 yes https://vueschool.io/lessons/astro-client-directives 2026-05-03 monthly 0.8 Astro Client Directives Video Lesson In this lesson, learn the various Astro Client Directives at your disposal. These powerful directives give you granular control over your Vue.js component behavior, ensuring optimal performance and... https://player.vimeo.com/video/ 293 yes no 2023-10-05T09:00:00+02:00 yes https://vueschool.io/lessons/how-to-pass-astro-data-to-your-vue-components 2026-05-03 monthly 0.8 How to Pass Astro Data to Your Vue Components Video Lesson In this lesson, learn how to pass data from your astro component’s down to Vue components as props or slots. https://player.vimeo.com/video/ 180 yes no 2023-10-05T09:00:00+02:00 yes https://vueschool.io/lessons/sprinkle-in-an-interactive-header-on-the-home-page 2026-05-03 monthly 0.8 Sprinkle in an Interactive Header on the Home Page Video Lesson In this lesson, we’ll get creative and build an interactive astronaut in our homepage header. With the power of VueUse directly inside of an Astro project and some help from ChatGPT, we’ll tack... https://player.vimeo.com/video/ 748 yes no 2023-10-12T09:00:00+02:00 yes https://vueschool.io/lessons/astro-content-collections-for-managing-content 2026-05-03 monthly 0.8 Astro Content Collections for Managing Content Video Lesson In this lesson, we take a look at Astro Content Collections for managing your blogs content. Easily write blog posts in markdown syntax and even level up your posts by including Vue or Astro compon... https://player.vimeo.com/video/ 295 yes no 2023-10-12T09:00:00+02:00 yes https://vueschool.io/lessons/content-collection-schemas 2026-05-03 monthly 0.8 Content Collection Schemas Video Lesson In this lesson, learn how to validate your blog post data with Astro Content Collection schemas. Schema’s use Zod under the hood to ensure that each post includes accurate front matter. https://player.vimeo.com/video/ 328 yes no 2023-10-12T09:00:00+02:00 yes https://vueschool.io/lessons/fetching-astro-content 2026-05-03 monthly 0.8 Fetching Astro Content Video Lesson In this lesson, learn how to fetch your Astro content collections for displaying on the page. Helpful functions include `getCollection` and `getStaticPaths`. https://player.vimeo.com/video/ 336 yes no 2023-10-19T09:00:00+02:00 yes https://vueschool.io/lessons/astro-view-transitions 2026-05-03 monthly 0.8 Astro View Transitions Video Lesson In this lesson, learn how to use Astro’s View Transition to provide smooth transitions between pages. This is possible with the `<ViewTransition>` component as well as a number of transition dire... https://player.vimeo.com/video/ 353 yes no 2023-10-19T09:00:00+02:00 yes https://vueschool.io/lessons/deploy-your-astro-blog-to-netlify 2026-05-03 monthly 0.8 Deploy Your Astro Blog to Netlify Video Lesson In this lesson, learn how to deploy an Astro static site to Netlify. https://player.vimeo.com/video/ 132 yes no 2023-10-19T09:00:00+02:00 yes https://vueschool.io/lessons/starting-your-astro-project 2026-05-03 monthly 0.8 Starting Your Astro Project Video Lesson In this lesson, we explored the initial steps of setting up your Astro project. You learned about two primary approaches: starting from scratch or leveraging Astro's range of pre-made templates. https://player.vimeo.com/video/ 228 yes no 2023-10-02T16:46:00+02:00 yes https://vueschool.io/lessons/content-sites-with-astro-and-vue-js-course-conclusion 2026-05-03 monthly 0.8 Course Conclusion Video Lesson Thanks for watching! We hope you enjoyed the course 🙂 https://player.vimeo.com/video/ 59 yes no 2023-10-19T09:00:00+02:00 yes https://vueschool.io/courses/vue-js-transitions-and-animations 2026-05-12 monthly 0.8 https://vueschool.io/lessons/hello-native-vue-js-transitions 2026-05-03 monthly 0.8 Hello Native Vue.js Transitions Video Lesson In this lesson, we quickly demo the Vue.js Transition component before diving into how it works. The built-in Transition component allows us to quickly and easily add transitions when showing and h... https://player.vimeo.com/video/ 172 yes no 2023-06-08T09:00:00+02:00 no https://vueschool.io/lessons/understanding-the-transition-classes 2026-05-04 monthly 0.8 Understanding the Vue Transition Classes Video Lesson In this lesson, we take a look at how the Transition component combines with CSS rules to make a simple fade transition. https://player.vimeo.com/video/ 242 yes no 2023-06-08T09:00:00+02:00 yes https://vueschool.io/lessons/a-custom-fade-in-down-transition 2026-05-04 monthly 0.8 A Custom Fade In Down Transition Video Lesson In this lesson, we enhance the fade transition by making it slide down as well. In the process, we also see how to break up the enter and leave phases to provide different transitions for each. https://player.vimeo.com/video/ 182 yes no 2023-06-08T09:00:00+02:00 yes https://vueschool.io/lessons/nested-transitions-and-explicit-transition-durations 2026-05-04 monthly 0.8 Nested Vue Transitions and Explicit Transition Durations Video Lesson Did you know you can use a single Vue.js Transition component to animate multiple nested elements? In this lesson, we show you how! Plus, learn how the duration prop is used in such a situation. https://player.vimeo.com/video/ 292 yes no 2023-06-08T09:00:00+02:00 no https://vueschool.io/lessons/various-ways-of-triggering-transitions 2026-05-04 monthly 0.8 Triggering Transitions in Vue Video Lesson Showing and hiding an element with v-if is not the only way to trigger a transition in Vue. In this lesson, we explore more possibilities like using v-show, dynamic components, and key. https://player.vimeo.com/video/ 354 yes no 2023-06-15T09:00:00+02:00 no https://vueschool.io/lessons/re-usable-transitions 2026-05-04 monthly 0.8 Reusable Vue Transitions Video Lesson In this lesson, learn how to wrap your Vue transitions in custom components for easy re-use throughout a project. https://player.vimeo.com/video/ 167 yes no 2023-06-15T09:00:00+02:00 yes https://vueschool.io/lessons/css-animations-animate-css-and-the-vue-transition-component 2026-05-04 monthly 0.8 CSS Animations, Animate.css, and the Vue Transition Component Video Lesson In this lesson, we transition from CSS transitions (see what I did there 😉), and look at CSS animations with the Vue.js `Transition` component. CSS animations allow us to insert any amount of st... https://player.vimeo.com/video/ 411 yes no 2023-06-22T09:00:00+02:00 no https://vueschool.io/lessons/list-transitions-with-the-vue-transitiongroup-component 2026-05-04 monthly 0.8 List Transitions with the Vue TransitionGroup Component Video Lesson In this lesson, learn how to transition the insertion, removal, and order change of elements in a list with the `TransitionGroup` component. https://player.vimeo.com/video/ 360 yes no 2023-06-22T09:00:00+02:00 yes https://vueschool.io/lessons/one-line-transitions-with-the-vue-autoanimate-plugin 2026-04-28 monthly 0.8 One Line Transitions with the Vue AutoAnimate Plugin Video Lesson In this lesson, learn how to support transitions with a single Vue.js directive called `v-auto-animate`. The Auto Animate plugin from Vue provides a super simple way of adding transitions to your V... https://player.vimeo.com/video/ 310 yes no 2023-06-29T09:00:00+02:00 no https://vueschool.io/lessons/how-to-animate-on-scroll-in-vue-with-vueuse-motion 2026-04-28 monthly 0.8 How to Animate on Scroll in Vue with @vueuse/motion Video Lesson In this lesson, learn how to apply a transition to an element when it enters the viewport. Animating elements on scroll is a very common practice in web development and the @vueuse/motion library m... https://player.vimeo.com/video/ 133 yes no 2023-06-29T09:00:00+02:00 yes https://vueschool.io/lessons/a-fancy-wave-animation-in-vue 2026-04-28 monthly 0.8 A Fancy Wave Animation in Vue Video Lesson In this lesson, learn to easily add material design waves (or ripples) to your HTML elements. The v-wave plugin for Vue.js makes this super simple. https://player.vimeo.com/video/ 357 yes no 2023-06-29T09:00:00+02:00 yes https://vueschool.io/lessons/vue-js-transitions-and-animations-course-conclusion 2026-04-28 monthly 0.8 Course Conclusion Video Lesson Thanks for watching and good luck applying transitions and animations to your own Vue.js projects! https://player.vimeo.com/video/ 71 yes no 2023-06-29T09:00:00+02:00 yes https://vueschool.io/lessons/the-vue-transition-appear-prop 2026-05-04 monthly 0.8 The Vue Transition Appear Prop Video Lesson Normally, a Vue transition will only occur after some state change triggers an element to hide or show. In this lesson, learn how to also trigger the transition on page load. https://player.vimeo.com/video/ 75 yes no 2023-06-15T09:00:00+02:00 yes https://vueschool.io/lessons/named-vue-transitions 2026-05-04 monthly 0.8 Named Vue Transitions Video Lesson In this lesson, discover how to create and use multiple transitions at a time with named transitions. https://player.vimeo.com/video/ 182 yes no 2023-06-15T09:00:00+02:00 yes https://vueschool.io/lessons/custom-vue-transition-classes-aka-tailwind-css-with-vue-transitions 2026-05-04 monthly 0.8 Custom Vue Transition Classes (aka Tailwind CSS with Vue Transitions) Video Lesson In this lesson, we learn how to apply arbitrary classes to the different phases of a Vue.js transition. This approach is a great option for using Tailwind CSS with Vue Transitions. https://player.vimeo.com/video/ 257 yes no 2023-06-22T09:00:00+02:00 no https://vueschool.io/lessons/vue-transition-javascript-hooks-and-greensock 2026-05-04 monthly 0.8 Vue Transition JavaScript Hooks and Greensock Video Lesson In this lesson, we learn about creating transitions without any CSS at all. The events emitted by the `Transition` component make this possible. Such an approach pairs perfectly with JS animation l... https://player.vimeo.com/video/ 359 yes no 2023-06-22T09:00:00+02:00 yes https://vueschool.io/lessons/staggering-list-transitions 2026-05-04 monthly 0.8 Staggering List Transitions Video Lesson In this lesson, we briefly consider how you might stagger list transitions for a better list filtering UI with the Vue.js `TransitionGroup` component and GSAP (GreenSock). https://player.vimeo.com/video/ 113 yes no 2023-06-22T09:00:00+02:00 yes https://vueschool.io/courses/advanced-components-exposing-internal-state 2026-05-12 monthly 0.8 https://vueschool.io/lessons/course-introduction-2 2026-03-25 monthly 0.8 Course Introduction Video Lesson In this course, you'll learn how to selectively expose a components internal state and functionality. https://player.vimeo.com/video/ 77 yes no 2023-05-11T09:00:00+02:00 yes https://vueschool.io/lessons/use-defineexpose-with-script-setup 2026-03-25 monthly 0.8 Use defineExpose with Script Setup Video Lesson In this lesson, learn how to expose a component's internal state using the `defineExpose` method from Vue. This part is going to focus on how to do this using script setup. https://player.vimeo.com/video/ 216 yes no 2023-05-11T09:00:00+02:00 yes https://vueschool.io/lessons/use-expose-in-options-api 2026-03-25 monthly 0.8 Use expose in Options API Video Lesson In this lesson, use the Vue Options API to expose a component’s internal method to the consuming component. https://player.vimeo.com/video/ 102 yes no 2023-05-11T09:00:00+02:00 yes https://vueschool.io/lessons/use-expose-with-jsx 2026-03-25 monthly 0.8 Use expose With JSX Video Lesson In this lesson, we explain how to expose a component’s internal state using JSX with `defineComponent` in Vue. https://player.vimeo.com/video/ 161 yes no 2023-05-11T09:00:00+02:00 yes https://vueschool.io/lessons/slot-props-scope 2026-03-25 monthly 0.8 Slot Props’ Scope Video Lesson This lesson constitutes one of three chapters in learning how to use slot props in Vue to expose a component’s state in a scoped manner. https://player.vimeo.com/video/ 147 yes no 2023-05-11T09:00:00+02:00 yes https://vueschool.io/lessons/how-to-use-internal-state-with-slot-props 2026-03-25 monthly 0.8 How To Use Internal State with Slot Props Video Lesson In this lesson, we will see how to implement slot props in practice in Vue. We will implement a menu that exposes some state to its children to style their active state. https://player.vimeo.com/video/ 201 yes no 2023-05-11T09:00:00+02:00 yes https://vueschool.io/lessons/slot-props-in-jsx 2026-03-25 monthly 0.8 Slot Props in JSX Video Lesson Using JSX can be different in many ways but practical for a lot of cases, especially when building components. The flexibility of JSX is handy in those cases. In that logic, it is important to lear... https://player.vimeo.com/video/ 139 yes no 2023-05-11T09:00:00+02:00 yes https://vueschool.io/lessons/mouse-coordinates-exercise 2026-03-25 monthly 0.8 Mouse Coordinates Exercise Video Lesson In this lesson, we will create a `MouseCoordinates` component using slot props in Vue based on the exercise left in the previous lesson. Such components are known as renderless components and are u... https://player.vimeo.com/video/ 141 yes no 2023-05-18T17:38:00+02:00 yes https://vueschool.io/lessons/what-is-v-model-doing-in-this-course 2026-03-25 monthly 0.8 What is v-model doing in this course? Video Lesson The v-model directive in Vue.js is not intended for directly exposing state, but rather for synchronizing a "model" with form elements or components. https://player.vimeo.com/video/ 150 yes no 2023-05-18T17:39:00+02:00 yes https://vueschool.io/lessons/implement-v-model-to-sync-internal-state 2026-03-25 monthly 0.8 Implement v-model to Sync Internal State Video Lesson The goal of this lesson is to convert the Menu we had in the previous chapter, so that it uses a v-model like a select. We also highlight the fact that this, more often than not, might be more conv... https://player.vimeo.com/video/ 231 yes no 2023-05-18T17:39:00+02:00 yes https://vueschool.io/courses/ai-chat-bot-with-vue-js-and-gpt-4 2026-05-12 monthly 0.8 https://vueschool.io/lessons/intro-to-open-ai-and-gpt-3-4 2026-03-29 monthly 0.8 Intro to Open AI and GPT-3 & 4 Video Lesson [ChatGPT](https://chat.openai.com/chat) has take the internet by storm! The AI that powers the popular app however, is also available via a [simple REST API](https://platform.openai.com/docs/guides... https://player.vimeo.com/video/ 317 yes no 2023-04-13T09:00:00+02:00 no https://vueschool.io/lessons/create-your-open-ai-account 2026-03-29 monthly 0.8 Create Your Open AI Account Video Lesson In this lesson, signup for your OpenAI account and generate an API token to authenticate your API requests. https://player.vimeo.com/video/ 195 yes no 2023-04-13T09:00:00+02:00 no https://vueschool.io/lessons/your-first-request-to-openai-api 2026-03-29 monthly 0.8 Your First Request to OpenAI API Video Lesson In this lesson, we perform the necessary “Hello world” step of any new technology by making our first request to the Open AI Chat API. https://player.vimeo.com/video/ 547 yes no 2023-04-13T09:00:00+02:00 yes https://vueschool.io/lessons/explore-the-project-boilerplate 2026-03-29 monthly 0.8 Explore the Project Boilerplate Video Lesson In this lesson, you’ll download and setup the boilerplate code for the project. https://player.vimeo.com/video/ 525 yes no 2023-04-20T09:00:00+02:00 yes https://vueschool.io/lessons/secure-your-token-with-a-nuxt-api-endpoint 2026-03-29 monthly 0.8 Secure Your Token with a Nuxt API Endpoint Video Lesson In this lesson, we setup an API endpoint for working with the Open AI Chat API. This is necessary so that we can protect our OpenAI API Key on the server side. Otherwise, others could take it from... https://player.vimeo.com/video/ 377 yes no 2023-04-20T09:00:00+02:00 yes https://vueschool.io/lessons/accept-messages-in-the-ai-endpoint 2026-03-29 monthly 0.8 Accept Messages in the AI Endpoint Video Lesson In this lesson, we make the `/api/ai` endpoint more flexible so that it can take in messages sent from the frontend. https://player.vimeo.com/video/ 169 yes no 2023-04-20T09:00:00+02:00 yes https://vueschool.io/lessons/build-your-own-vue-js-powered-chatgpt 2026-03-29 monthly 0.8 Build Your Own Vue.js Powered ChatGPT Video Lesson In this lesson, we power a ChatWidget Vue component with the magic of AI! 💪 Hooking up a Vue.js front-end to OpenAI’s Chat API is really as simple as an ajax request! This makes creating a Cha... https://player.vimeo.com/video/ 495 yes no 2023-04-20T09:00:00+02:00 yes https://vueschool.io/lessons/give-your-chatbot-the-context-of-the-full-conversation 2026-03-29 monthly 0.8 Give Your ChatBot the Context of the Full Conversation Video Lesson In this lesson, we pass on the full chat thread so that the ChatGPT API can take into account the context of the message. We also discuss a couple of strategies for dealing with the token limit and... https://player.vimeo.com/video/ 394 yes no 2023-04-27T09:00:00+02:00 yes https://vueschool.io/lessons/explore-more-creative-possibilities 2026-03-29 monthly 0.8 Explore More Creative Possibilities Video Lesson In this lesson, we explore the different applications of OpenAI’s Chat API by browsing through the examples page of the official docs. https://player.vimeo.com/video/ 397 yes no 2023-05-04T09:00:00+02:00 yes https://vueschool.io/lessons/train-the-bots-for-facebook-and-twitter 2026-03-29 monthly 0.8 Train the Bots for Facebook and Twitter Video Lesson In this lesson, we extend the /api/ai endpoint to handle other “agents” (or approaches to training the bot), so that we can tweak the training for generating posts on both Facebook and Twitter. https://player.vimeo.com/video/ 492 yes no 2023-05-04T09:00:00+02:00 yes https://vueschool.io/lessons/twitter-and-facebook-cards-the-usechatai-composable 2026-03-29 monthly 0.8 Twitter and Facebook Cards + the useChatAi Composable Video Lesson In this lesson, we take a look at how some of the boilerplate code helps us bootstrap the application UI and finish filling out the Facebook and Twitter cards. We also look into the useChatAi compo... https://player.vimeo.com/video/ 656 yes no 2023-05-04T09:00:00+02:00 yes https://vueschool.io/lessons/make-posting-a-click-away 2026-03-29 monthly 0.8 Make Posting a Click Away Video Lesson In this lesson, we get the “Post” buttons working by passing the generated message to the proper platforms and opening up the Twitter and Facebook new post screens in a new tab. https://player.vimeo.com/video/ 340 yes no 2023-05-04T09:00:00+02:00 yes https://vueschool.io/lessons/ai-course-conclusion 2026-03-29 monthly 0.8 Course Conclusion Video Lesson Thanks for watching! We hope you enjoyed the course and that you’ll find value in some of our other courses as well. https://player.vimeo.com/video/ 89 yes no 2023-05-04T09:00:00+02:00 yes https://vueschool.io/lessons/hookup-the-app-ui-to-the-ai-endpoint 2026-03-29 monthly 0.8 Hookup the App UI to the AI Endpoint Video Lesson In this lesson, we utilize the useChatAI composable to hookup the application UI to the backend. This enables our Vue.js application to successfully generate social media posts for the proved URL. https://player.vimeo.com/video/ 520 yes no 2023-05-04T09:00:00+02:00 yes https://vueschool.io/lessons/train-the-bot-as-a-customer-support-assistant-part-2 2026-03-29 monthly 0.8 Train The Bot as a Customer Support Assistant (Part 2) Video Lesson In this lesson, we take the training messages from the last lesson and feed them to the Chat API along with the messages from the user. https://player.vimeo.com/video/ 198 yes no 2023-04-27T09:00:00+02:00 yes https://vueschool.io/lessons/train-the-bot-as-a-customer-support-assistant 2026-03-29 monthly 0.8 Train The Bot as a Customer Support Assistant Video Lesson In this lesson, learn how to train a Chat Bot using a message with the system role and example messages from both user and the assistant. These strategies combined enable us to limit the Chat Bot�... https://player.vimeo.com/video/ 401 yes no 2023-04-27T09:00:00+02:00 yes https://vueschool.io/lessons/use-markdown-and-placeholders-in-training-messages 2026-03-29 monthly 0.8 Use Markdown and Placeholders in Training Messages Video Lesson In this lesson, we get a bit creative with training the chatbot’s response to provide a link to a Twitter URL. https://player.vimeo.com/video/ 257 yes no 2023-04-27T09:00:00+02:00 no https://vueschool.io/lessons/open-ai-node-client-v3-vs-v4 2026-03-29 monthly 0.8 Open AI Node Client v3 vs v4 Video Lesson Heads up, this course uses an outdated version of the `openai` node client. Don’t worry though, most everything taught during this course is still completely relevant! There are only a couple syn... https://player.vimeo.com/video/ 224 yes no 2024-04-03T18:16:00+02:00 yes https://vueschool.io/lessons/bonus-lesson-how-to-migrate-from-open-ai-node-client-3-to-4 2026-03-29 monthly 0.8 Bonus Lesson - How to Migrate from Open AI Node Client 3 to 4 Video Lesson In this lesson, learn how to upgrade from the Open AI node client version 3 to version 4. The process is super simple. It’s just a matter of upgrading the dependency in your package.json and runn... https://player.vimeo.com/video/ 209 yes no 2024-04-03T19:10:00+02:00 yes https://vueschool.io/courses/charts-for-vue-js-3 2026-05-12 monthly 0.8 https://vueschool.io/lessons/vue-js-charts-with-async-data 2026-04-28 monthly 0.8 https://i.vimeocdn.com/video/1696971641-fc3a843e9338aeec36d9ca58a3e5df1d9786c4c8fc22e8fe61804f5353ccb6a6-d_1280x720?r=pad Vue.js Charts with Async Data Video Lesson Most often you want to display charts for data that comes from an API endpoint. In this lesson, let’s cover a couple of issues you’ll run into when doing so and how to solve each of them. https://player.vimeo.com/video/ 358 yes no 2023-07-13T09:00:00+02:00 yes https://vueschool.io/lessons/vue-js-3-bar-charts 2026-04-28 monthly 0.8 https://i.vimeocdn.com/video/1696973045-6a8b4c564bdd4767f58d43cebb9e9ec2843fff710578e4e085a90db258508c7c-d_1280x720?r=pad Vue.js 3 Bar Charts Video Lesson In this lesson learn how customize Vue bar charts further by displaying mutiple datasets, stacking datasets, displaying bars horizontally and more. https://player.vimeo.com/video/ 343 yes no 2023-07-13T09:00:00+02:00 yes https://vueschool.io/lessons/vue-js-3-line-charts 2026-04-28 monthly 0.8 https://i.vimeocdn.com/video/1696977404-1a86c9214de9a1c26aeb67899d790cfa124cc34d6007b72f9227f9fc160ec4e6-d_1280x720?r=pad Vue.js 3 Line Charts Video Lesson In this lesson, learn how to create a nifty weather-forecast line chart for Vue.js. https://player.vimeo.com/video/ 551 yes no 2023-07-13T09:00:00+02:00 yes https://vueschool.io/lessons/vue-js-3-doughnut-pie-charts 2026-04-28 monthly 0.8 https://i.vimeocdn.com/video/1696970443-b6c0fb0e103537ea03fe425a49ccf6d6d493da877fb48ec4c2e675e383e50128-d_1280x720?r=pad Vue.js 3 Doughnut/Pie Charts Video Lesson In this lesson, learn how to create a pie/doughnut chart in Vue.js 3. https://player.vimeo.com/video/ 346 yes no 2023-07-20T09:00:00+02:00 yes https://vueschool.io/lessons/intro-to-charts-for-vue-js-3 2026-04-28 monthly 0.8 https://i.vimeocdn.com/video/1693873612-73f589cff86aebf248987178e10100bff143750f0703442d7b7bbb72d5ce39e5-d_1280x720?r=pad Intro to Charts for Vue.js 3 Video Lesson In this lesson, I introduce you to [vue-chartjs](https://vue-chartjs.org/) for creating interactive and easy-to-maintain charts and graphs for your Vue.js applications. https://player.vimeo.com/video/ 270 yes no 2023-07-06T09:00:00+02:00 no https://vueschool.io/lessons/your-first-vue-js-chart 2026-04-28 monthly 0.8 https://i.vimeocdn.com/video/1693873698-b9b13a57a0dca54c9215ca98f22093781d67f69d93e8cbcd500ae4135ea24313-d_1280x720?r=pad Your First Vue.js Chart Video Lesson In this lesson, get hands-on using the vue-chartjs library to create your first bar chart using local data. https://player.vimeo.com/video/ 537 yes no 2023-07-06T09:00:00+02:00 no https://vueschool.io/lessons/charts-for-vue-js-3-course-conclusion 2026-04-28 monthly 0.8 https://i.vimeocdn.com/video/1696970388-1010609bef70b4ad090aa474b4e06215a6f7ff20dd2fd1538880c0a780fa0b9d-d_1280x720?r=pad Course Conclusion Video Lesson Thanks for watching! Please share your chart creations in the comments below 😀. https://player.vimeo.com/video/ 121 yes no 2023-07-20T09:00:00+02:00 yes https://vueschool.io/lessons/a-chartjs-plugin-for-registering-chartjs-depenendencies 2026-04-28 monthly 0.8 https://i.vimeocdn.com/video/1696974267-e3e26e95e261cb062924a5614d0e30730e41f266c1f30630756d8fd81fc96b62-d_1280x720?r=pad A ChartJs Plugin For Registering ChartJS Depenendencies Video Lesson In this lesson, we create a Nuxt.js Plugin for registering all the Chart.js dependencies needed throughout the app. This could also be done with a vanilla Vue.js project via a custom plugin or dire... https://player.vimeo.com/video/ 184 yes no 2023-07-13T09:00:00+02:00 yes https://vueschool.io/lessons/vue-chartjs-defaults 2026-04-28 monthly 0.8 https://i.vimeocdn.com/video/1696978771-8d208c01caafa26925498a3e0309c19e19fadcbd2e3a99315c9daf2326f7d1f6-d_1280x720?r=pad Vue ChartJS Defaults Video Lesson In this lesson, learn how to customize the default values for vue-chartjs so that you can apply styles simply across all your app’s charts. https://player.vimeo.com/video/ 183 yes no 2023-07-20T09:00:00+02:00 yes https://vueschool.io/courses/common-vue-js-mistakes-and-how-to-avoid-them 2026-05-12 monthly 0.8 https://vueschool.io/lessons/course-intro 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1705642676-8a5d9b31cd68cc36c936c41ca9b4139114cdc8b38da9f8c7a0f4f69941963649-d_1280x720?r=pad Course Intro Video Lesson There are some mistakes that all Vue.js developers make at one time or another. Know what they are so that you can avoid them. https://player.vimeo.com/video/ 56 yes no 2023-08-03T09:00:00+02:00 no https://vueschool.io/lessons/omitting-the-key-directive-on-v-for 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1705646837-3b3a9cdcb3284dd3af6d971de032d9e084a58f7febfc8d462fa4043fa9eda36c-d_1280x720?r=pad Omitting the Key Directive on v-for Video Lesson In this lesson, we take a look at one of the most common Vue.js mistakes: forgetting to combine the`:key` directive with `v-for`. This mistake can cause very bugs that are hard to track down whenev... https://player.vimeo.com/video/ 515 yes no 2023-08-03T09:00:00+02:00 no https://vueschool.io/lessons/prop-drilling 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1705655933-7cd3e2d268d29e8f1158d9db41b545c795cc6902b27149399bb11a54de27d81c-d_1280x720?r=pad Prop Drilling Video Lesson Prop drilling is an anti-pattern where the developer passes down a prop through multiple levels of components simply to access data defined higher up the tree in a deeply nested level. https://player.vimeo.com/video/ 551 yes no 2023-08-03T09:00:00+02:00 no https://vueschool.io/lessons/watching-arrays-the-wrong-way 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1708595675-6820276fb16f45084b67df73e104d8ff46abf68ec32f8f0bde0eccb9ecbe263c-d_1280x720?r=pad Watching Arrays the Wrong Way Video Lesson In this lesson, learn why watching arrays without the deep option will cause unexpected results for your Vue.js projects. https://player.vimeo.com/video/ 204 yes no 2023-08-10T09:00:00+02:00 no https://vueschool.io/lessons/replacing-reactive-state-the-wrong-way 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1708597543-70017d7b097e187c705a89d5023d07e3168616a52273bc7fb95851fd7ea85f29-d_1280x720?r=pad Replacing Reactive State the Wrong Way Video Lesson In this lesson, learn why replacing the entirety of a Vue.js `reactive` array or object can cause unexpected bugs. Use `ref` to avoid the issue entirely. My suggestion even is to use `ref` everywhe... https://player.vimeo.com/video/ 401 yes no 2023-08-10T09:00:00+02:00 no https://vueschool.io/lessons/unintentionally-mutating-props 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1708595679-e34b670f0fc81db830cfc2115854dad1fef49253e77bcaf30988d1f19ded0227-d_1280x720?r=pad Unintentionally Mutating Props Video Lesson In this lesson, we learn how to avoid the mistake of mutating props in Vue.js. Sometimes it’s easier said than done and unintentional mutations can hide in the most unexpected places. https://player.vimeo.com/video/ 600 yes no 2023-08-10T09:00:00+02:00 no https://vueschool.io/lessons/forgetting-to-clean-up-your-manual-event-listeners 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1711689770-6463ff2b28ca6d3e1ab18f78f81605cabc6001c8664b4d1cc482ae5f2a19357e-d_1280x720?r=pad Forgetting to Clean Up Your Manual Event Listeners Video Lesson In this video, learn how to clean up global event listeners on unMounted in Vue.js. Why are global event listeners necessary? Because sometimes we want the event to fire even outside of the focus o... https://player.vimeo.com/video/ 506 yes no 2023-08-10T09:00:00+02:00 no https://vueschool.io/lessons/expecting-changes-to-non-reactive-dependencies-to-trigger-updates 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1711690223-692995aba6dea84fd281e4c6a075d17386e927d5d822e80a037650dcb8c3ea76-d_1280x720?r=pad Expecting Changes to Non-Reactive Dependencies to Trigger Updates Video Lesson In this lesson, learn to avoid the common mistake of confusing reactive data with non-reactive data. It’s easier to do than you think 😉 https://player.vimeo.com/video/ 305 yes no 2023-08-17T09:00:00+02:00 no https://vueschool.io/lessons/not-considering-typescript 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1711691009-851a7aedcecb36297b312e69339b3ce3357985c8ca9022dc7ffa9f80e8626bf1-d_1280x720?r=pad Not Considering TypeScript Video Lesson In this lesson, you get a super quick introduction about why avoiding TypeScript for your next Vue.js project might be a mistake. https://player.vimeo.com/video/ 145 yes no 2023-08-17T09:00:00+02:00 no https://vueschool.io/lessons/common-vue-js-mistakes-course-conclusion 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1711691412-9f2e7bc77ef4014957f1b7669aa4df182573a5e475a63b94d5af8ea4a47b5fd8-d_1280x720?r=pad Course Conclusion Video Lesson Thanks for watching! 👋 Please share your own experience with common mistakes you’ve made and we might just end up adding a new video. https://player.vimeo.com/video/ 52 yes no 2023-08-17T09:00:00+02:00 no https://vueschool.io/lessons/destructuring-reactive-data 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1726796627-e465e2466b4ac8c139abd1c8e65b96a406146154e65a678a8fbd05dc181db83f-d_1280x720?r=pad Destructuring Reactive Data Video Lesson In this video, we learn why it’s not a good idea to de-structure reactive data defined with the reactive function. Instead you should: https://player.vimeo.com/video/ 342 yes no 2023-09-21T09:00:00+02:00 no https://vueschool.io/lessons/calling-composables-in-the-wrong-place 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1726796404-c0268f261f628ab826ec577c44753d166ae115d1c94d5f79958aebe32e35f14c-d_1280x720?r=pad Calling Composables in the Wrong Place Video Lesson In this lesson, learn the limitations of where composables can be called. Avoid subtle bugs by always use composables (and even Vue’s built in composition functions) directly within script setup... https://player.vimeo.com/video/ 321 yes no 2023-09-21T09:00:00+02:00 no https://vueschool.io/lessons/using-v-html-with-user-provided-data 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1726796180-148e08138b3be59b4c87c3f52a2a25056260075b023652e2da97e13e406e7d1c-d_1280x720?r=pad Using v-html with User Provided Data Video Lesson In this lesson, learn why you should be cautious with Vue’s v-html directive in order to prevent security issues. https://player.vimeo.com/video/ 244 yes no 2023-09-21T09:00:00+02:00 no https://vueschool.io/lessons/unnecessary-manual-dom-manipulation 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1726792603-45d4e09c211888c9e72875bb96ed47233a496cc6a9f86360b9b707e44bca342c-d_1280x720?r=pad Unnecessary Manual DOM Manipulation Video Lesson In this lesson, learn why, in most cases, it’s a bad idea to do direct DOM manipulation in your Vue.js components. If direct DOM manipulation is a must, be sure to use Vue’s proper solution for... https://player.vimeo.com/video/ 117 yes no 2023-09-21T09:00:00+02:00 no https://vueschool.io/courses/laravel-backends-for-vue-js-3 2026-05-12 monthly 0.8 https://vueschool.io/lessons/laravel-backends-for-vue-js-frontends-course-introduction 2026-05-15 monthly 0.8 Laravel Backends for Vue.js Frontends Course Introduction Video Lesson 👋 Hello, and welcome to the course! https://player.vimeo.com/video/ 616 yes no 2023-01-26T16:00:00+01:00 no https://vueschool.io/lessons/setup-project-development-environment 2026-05-16 monthly 0.8 Setup Development Environment for Backend Video Lesson In this lesson, I’ll show you how to setup the Laravel powered backend on your local machine so that you can make requests to it from the Vue SPA. https://player.vimeo.com/video/ 590 yes no 2023-02-02T16:00:00+01:00 no https://vueschool.io/lessons/register-users-with-laravel-fortify-for-a-vue-js-spa 2026-05-16 monthly 0.8 Register Users with Laravel Fortify for a Vue.js SPA Video Lesson In this lesson, we start adding the Vue.js code to get the registration page working. This requires making an ajax request to the `/api/register` route provided by the Laravel backend. https://player.vimeo.com/video/ 756 yes no 2023-02-02T16:00:00+01:00 no https://vueschool.io/lessons/laravel-sanctum-and-fortify-for-a-vue-js-spa 2026-05-16 monthly 0.8 Laravel Sanctum and Fortify for a Vue.js SPA Video Lesson In this lesson, learn what Laravel Sanctum and Fortify are and how they work together to provide the authentication system for our Vue.js SPA. https://player.vimeo.com/video/ 748 yes no 2023-02-02T16:00:00+01:00 no https://vueschool.io/lessons/tweak-the-axios-base-url-for-best-dev-experience 2026-05-16 monthly 0.8 Tweak the Axios Base URL for Best Dev Experience Video Lesson In this lesson, we cut down having to type the base of the API URL over and over with the axios baseURL option. We also grab the baseURL from Nuxt runtime config defined in `nuxt.config.ts` so that... https://player.vimeo.com/video/ 305 yes no 2023-02-09T16:00:00+01:00 no https://vueschool.io/lessons/create-a-custom-useAuth-composable 2026-05-16 monthly 0.8 Create a Custom useAuth Composable Video Lesson In this lesson, we consolidate all the logic and ajax requests for dealing with authentication into a single composable. This makes working with the Laravel Fortify endpoints for auth simpler from... https://player.vimeo.com/video/ 601 yes no 2023-02-16T16:00:00+01:00 no https://vueschool.io/lessons/protect-pages-with-middleware 2026-05-16 monthly 0.8 Protect Pages with Middleware Video Lesson In this lesson, we use middleware to redirect anonymous users away from protected pages and redirect logged in users away from the login and register pages. https://player.vimeo.com/video/ 515 yes no 2023-02-09T16:00:00+01:00 no https://vueschool.io/lessons/manually-handle-form-validation-errors-with-laravel-and-vue 2026-05-16 monthly 0.8 Manually Handle Form Validation Errors with Laravel and Vue Video Lesson In this lesson, we take the validation errors sent back from the Laravel backend and display them with the inputs they describe. https://player.vimeo.com/video/ 500 yes no 2023-02-16T16:00:00+01:00 yes https://vueschool.io/lessons/simplify-form-validation-with-formkit 2026-05-16 monthly 0.8 Simplify Form Validation with FormKit Video Lesson In this lesson, we make form validation even easier with FormKit. This form library for Vue works great for Laravel and saves us a lot of manual code. https://player.vimeo.com/video/ 492 yes no 2023-02-16T16:00:00+01:00 yes https://vueschool.io/lessons/fetch-resource-lists-from-laravel-and-handle-pagination-in-vue-part-1 2026-05-16 monthly 0.8 Fetch Resource Lists from Laravel and Handle Pagination in Vue (Part 1) Video Lesson In this lesson, we fetch the links to display on the `/links` application route by making a `GET` request to the `/links` route on the Laravel powered API. We also start implementing pagination wit... https://player.vimeo.com/video/ 357 yes no 2023-03-16T09:00:00+01:00 yes https://vueschool.io/lessons/create-new-resources-with-laravel-and-vue 2026-05-16 monthly 0.8 Create New Resources with Laravel and Vue Video Lesson In this lesson, we learn how to create a new link in the database. We use axios to make a POST request to the Laravel powered`/links` endpoint from our Vue.js frontend. https://player.vimeo.com/video/ 413 yes no 2023-03-16T09:00:00+01:00 yes https://vueschool.io/lessons/setup-development-environment-for-the-frontend 2026-05-16 monthly 0.8 Setup Development Environment for the Frontend Video Lesson In this lesson, we download and setup the boilerplate code for the front-end app. We also go over existing file structure and code. https://player.vimeo.com/video/ 590 yes no 2023-02-02T16:00:00+01:00 no https://vueschool.io/lessons/login-and-logout-users-with-laravel-fortify-for-a-vue-js-spa 2026-05-16 monthly 0.8 Login and Logout Users with Laravel Fortify for a Vue.js SPA Video Lesson In this lesson, we make requests to the proper endpoints bootstrapped by Laravel Fortify from the frontend to login and logout. https://player.vimeo.com/video/ 585 yes no 2023-02-09T16:00:00+01:00 no https://vueschool.io/lessons/cleanup-the-user-flow-with-better-redirects 2026-05-16 monthly 0.8 Cleanup the User Flow with Better Redirects Video Lesson In this lesson, we redirect the user to the profile page after login. We also login the user after registration. These are simple steps but greatly improve the user experience. https://player.vimeo.com/video/ 190 yes no 2023-02-09T16:00:00+01:00 no https://vueschool.io/lessons/format-the-user-data-once 2026-05-16 monthly 0.8 Format the User Data Once Video Lesson In this lesson, we create a `getUser` function within the `useAuth` composable to fetch the user data and format it with proper `Date` data types where applicable. This makes accessing our user dat... https://player.vimeo.com/video/ 418 yes no 2023-02-16T16:00:00+01:00 no https://vueschool.io/lessons/use-axios-intereptors-to-redirect-to-login-page-on-401-unauthorized-response 2026-05-16 monthly 0.8 Use Axios Intereptors to Redirect to Login Page on 401 Unauthorized Response Video Lesson In this lesson, we handle the user session expiring using axios interceptors. https://player.vimeo.com/video/ 560 yes no 2023-02-16T16:00:00+01:00 no https://vueschool.io/lessons/cache-the-user-in-memory 2026-05-16 monthly 0.8 Cache the User in Memory Video Lesson In this lesson, we keep up with the user within the composable and only remake the request to the /users endpoint when the user data isn’t already available. https://player.vimeo.com/video/ 461 yes no 2023-02-16T16:22:00+01:00 no https://vueschool.io/lessons/update-the-guest-middleware-to-use-the-cached-user 2026-05-16 monthly 0.8 Update the Guest Middleware to use the Cached User Video Lesson In this lesson, we update the guest middleware to also use the cached user from the useAuth composable instead of manually making the request to the user endpoint with axios. https://player.vimeo.com/video/ 69 yes no 2023-02-23T09:00:00+01:00 no https://vueschool.io/lessons/take-this-composable 2026-05-16 monthly 0.8 Take This Composable Video Lesson The useAuth composable did take a bit of time to develop. Thankfully it's generic enough to be easily used on other projects. Feel free to copy and paste it into your own Vue SPA's for a quick auth... https://player.vimeo.com/video/ 90 yes no 2023-02-23T09:00:00+01:00 no https://vueschool.io/lessons/add-some-application-wide-ts-interfaces 2026-05-16 monthly 0.8 Add Some Application-Wide TS Interfaces Video Lesson In this lesson, we move all the interfaces for auth into a dedicated types file. We also quickly add some other useful interfaces that will come in handy later on. https://player.vimeo.com/video/ 189 yes no 2023-02-23T09:00:00+01:00 yes https://vueschool.io/lessons/create-a-handleinvalidform-utility 2026-05-16 monthly 0.8 Create a handleInvalidForm Utility Video Lesson In this video, we clean up how we handle invalid forms. Extracting the logic into a utility function, that’s auto imported by Nuxt, makes the code for our page level component very high level and... https://player.vimeo.com/video/ 240 yes no 2023-03-16T09:00:00+01:00 yes https://vueschool.io/lessons/intro-to-crud-with-laravel-and-vue 2026-05-16 monthly 0.8 Intro to CRUD with Laravel and Vue Video Lesson In this lesson, we take a look at how the Laravel backend handles requests for CRUD operations. Laravel Resource Controllers provide a standardized way of setting up API endpoints for resource CRUD. https://player.vimeo.com/video/ 294 yes no 2023-03-16T09:00:00+01:00 yes https://vueschool.io/lessons/handle-pagination-in-vue-part-2 2026-05-17 monthly 0.8 Handle Pagination in Vue Part 2 Video Lesson In this lesson, we re-fetch data from the Laravel backend when a user selects a new “page” of links in the `laravel-vue-pagination` component. https://player.vimeo.com/video/ 431 yes no 2023-03-16T09:00:00+01:00 yes https://vueschool.io/lessons/support-a-page-query-param-in-the-app-url 2026-05-17 monthly 0.8 Support a Page Query Param in the App URL Video Lesson In this lesson, we support a page query variable in our Vue app URL, so that we can share URLs to precise pages of the links table. We also, do a quick cleanup on some types for the links index page. https://player.vimeo.com/video/ 195 yes no 2023-03-16T09:00:00+01:00 yes https://vueschool.io/lessons/filter-data-on-a-vue-frontend-with-laravel-query-builder-from-spatie 2026-05-17 monthly 0.8 Filter Data on a Vue Frontend with Laravel Query Builder from Spatie Video Lesson In this lesson, we hook up a search input in our Vue.js app to the Laravel powered backend, using Laravel Query Builder for quick and easy setup. https://player.vimeo.com/video/ 576 yes no 2023-03-23T09:00:00+01:00 no https://vueschool.io/lessons/debounce-the-search-input 2026-05-17 monthly 0.8 Debounce the Search Input Video Lesson In this lesson, we de-bounce the search input so that we don’t make a request to the backend on every keystroke. https://player.vimeo.com/video/ 360 yes no 2023-03-23T09:00:00+01:00 yes https://vueschool.io/lessons/sort-data-on-a-vue-frontend-with-laravel-query-builder-from-spatie 2026-05-17 monthly 0.8 Sort Data on a Vue Frontend with Laravel Query Builder from Spatie Video Lesson In this lesson, learn how to sort data with Laravel Query Builder for your Vue.js frontend. Because we’ve setup our request to the backend to mirror the query string from our application url, the... https://player.vimeo.com/video/ 195 yes no 2023-03-23T09:00:00+01:00 yes https://vueschool.io/lessons/build-a-refresh-table-button 2026-05-17 monthly 0.8 Build a Refresh Table Button Video Lesson In this lesson, we add some super quick functionality for a refresh table data button. https://player.vimeo.com/video/ 123 yes no 2023-03-23T09:00:00+01:00 yes https://vueschool.io/lessons/create-a-uselinks-composable 2026-05-17 monthly 0.8 Create a useLinks Composable Video Lesson In this lesson, we create a useLinks composable. This is an important step to consolidate interactions with the endpoints for links to a single place. Most importantly it allows us to adapt the dat... https://player.vimeo.com/video/ 578 yes no 2023-03-30T09:00:00+02:00 yes https://vueschool.io/lessons/use-the-uselinks-compsable 2026-05-17 monthly 0.8 Use the useLinks Composable Video Lesson In this lesson, we use the custom useLinks composable to fetch links data for the index page and further clean up our page component to focus on just the high level details. https://player.vimeo.com/video/ 371 yes no 2023-03-30T09:00:00+02:00 yes https://vueschool.io/lessons/update-a-resource-with-vue-and-laravel 2026-05-17 monthly 0.8 Update a Resource with Vue and Laravel Video Lesson In this lesson, we complete the U portion of the CRUD operations for our Vue.js + Laravel app. That is, we provide the ability to update links. https://player.vimeo.com/video/ 283 yes no 2023-03-30T09:00:00+02:00 yes https://vueschool.io/lessons/delete-a-resource-with-vue-and-laravel 2026-05-17 monthly 0.8 Delete a Resource with Vue and Laravel Video Lesson In this lesson, we learn how to delete resources on a Laravel backend from a Vue.js frontend. https://player.vimeo.com/video/ 212 yes no 2023-03-30T09:00:00+02:00 yes https://vueschool.io/lessons/server-render-a-vue-page-with-data-from-a-laravel-api-endpoint 2026-05-17 monthly 0.8 Server Render a Vue Page with Data from a Laravel API Endpoint Video Lesson In this lesson, we dabble with some server side rendering a page with Nuxt that includes data from a separate Laravel powered REST API. https://player.vimeo.com/video/ 396 yes no 2023-03-30T09:00:00+02:00 yes https://vueschool.io/lessons/laravel-backends-for-vue-js-3-course-conclusion 2026-05-16 monthly 0.8 Course Conclusion Video Lesson 🙏 Thanks for watching! We hope you enjoyed it! https://player.vimeo.com/video/ 174 yes no 2023-03-30T09:00:00+02:00 yes https://vueschool.io/lessons/replacing-axios-with-fetch 2026-05-16 monthly 0.8 Replacing Axios with $fetch Video Lesson In this lesson, learn how to replace axios with the nuxt native $fetch and continue to work with Laravel's CSRF protection. https://player.vimeo.com/video/ 269 yes no 2025-06-11T15:16:00+02:00 yes https://vueschool.io/courses/robust-vue-js-forms-with-formkit 2026-05-12 monthly 0.8 https://vueschool.io/lessons/introduction-to-formkit 2026-03-29 monthly 0.8 Introduction to FormKit Video Lesson Forms play a major part in making complex and interactive web applications. In this lesson, we take a look at some of the complexities of traditional forms and introduce you to a Vue.js library cal... https://player.vimeo.com/video/ 200 yes no 2022-11-24T16:00:00+01:00 no https://vueschool.io/lessons/project-setup-and-formkit-config 2026-03-29 monthly 0.8 Project Setup and FormKit Config Video Lesson In this lesson, we create a new Nuxt 3 project in which to work with FormKit. You can create the project locally by running: https://player.vimeo.com/video/ 251 yes no 2022-11-24T16:00:00+01:00 no https://vueschool.io/lessons/powerful-form-fields-with-a-simple-api 2026-03-29 monthly 0.8 Powerful Form Fields with a Simple API Video Lesson In this lesson, we create our first form inputs with FormKit. https://player.vimeo.com/video/ 518 yes no 2022-11-24T16:00:00+01:00 no https://vueschool.io/lessons/form-population-and-submission 2026-03-29 monthly 0.8 Form Population and Submission Video Lesson In this lesson, we use FormKit to generate a form with built in support for initial values, submit handling, and smart submission states. https://player.vimeo.com/video/ 460 yes no 2022-11-24T16:00:00+01:00 no https://vueschool.io/lessons/customize-the-form-with-props 2026-03-29 monthly 0.8 Customize the Form with Props Video Lesson In this lesson, we’ll customize the form further with some useful props like `submit-behavior` and `submit-label`. https://player.vimeo.com/video/ 196 yes no 2022-11-24T16:00:00+01:00 no https://vueschool.io/lessons/how-to-validate-a-form-input 2026-03-29 monthly 0.8 How to Validate a Form Input Video Lesson In this lesson, we take a look at validating inputs in FormKit. The built in validation rules make quick work of common scenarios with rules like `required`, `url`, `length`, `between`, and `confir... https://player.vimeo.com/video/ 505 yes no 2022-11-24T16:00:00+01:00 no https://vueschool.io/lessons/modify-validation-rules-with-hints 2026-03-29 monthly 0.8 Modify Validation Rules with Hints Video Lesson In this lesson, learn how to use rule hints in FormKit to modify how and when rules run. https://player.vimeo.com/video/ 205 yes no 2022-12-01T16:00:00+01:00 yes https://vueschool.io/lessons/create-custom-validation-rules 2026-03-29 monthly 0.8 Create Custom Validation Rules Video Lesson In this lesson, learn how to create a custom validation rule in FormKit. Custom validation rules can be async. This makes it easy to have rules rely on server side data. Finally, you can register r... https://player.vimeo.com/video/ 349 yes no 2022-12-01T16:00:00+01:00 yes https://vueschool.io/lessons/create-custom-validation-messages 2026-03-29 monthly 0.8 Create Custom Validation Messages Video Lesson In this lesson, learn how to provide custom validation rules in FormKit. This works to give useful feedback for custom rules and also allows you to modify built in rules. FormKit also provides supp... https://player.vimeo.com/video/ 272 yes no 2022-12-01T16:00:00+01:00 yes https://vueschool.io/lessons/extend-formkit-with-plugins 2026-03-29 monthly 0.8 Extend FormKit with Plugins Video Lesson In this lesson, learn how to install and use the official [AutoAnimate plugin](https://formkit.com/plugins/auto-animate). Also learn how to create your own custom tooltip plugin. https://player.vimeo.com/video/ 550 yes no 2022-12-08T16:00:00+01:00 yes https://vueschool.io/lessons/generate-forms-from-a-schema 2026-03-29 monthly 0.8 Generate Forms from a Schema Video Lesson In this lesson, learn how to generate a form via a schema in Formkit. Generating forms with a schema is a great choice for use cases where the form should be stored dynamically in a database, file,... https://player.vimeo.com/video/ 882 yes no 2022-12-01T16:00:00+01:00 yes https://vueschool.io/lessons/create-a-custom-formkit-input 2026-03-29 monthly 0.8 Create a Custom FormKit Input Video Lesson In this lesson, we wrap the popular vue-multiselect component to make it compatible with FormKit. https://player.vimeo.com/video/ 542 yes no 2022-12-08T16:00:00+01:00 no https://vueschool.io/lessons/level-up-with-pro-inputs 2026-03-29 monthly 0.8 Level Up with Pro Inputs Video Lesson In this video, we learn about the pro features of FormKit. Pro features include various synthetic (non-native) form input types like toggle, repeater, and autocomplete. Native inputs will always be... https://player.vimeo.com/video/ 720 yes no 2022-12-08T16:00:00+01:00 no https://vueschool.io/lessons/create-a-tailwind-css-theme-for-formkit 2026-03-29 monthly 0.8 Create a Tailwind CSS Theme for FormKit Video Lesson In this lesson, we learn how to create a custom theme for styling FormKit inputs with Tailwind CSS. The process makes maintaining styles for a Vue.js form straightforward and maintainable. https://player.vimeo.com/video/ 735 yes no 2022-12-08T16:00:00+01:00 no https://vueschool.io/lessons/robust-vue-js-forms-with-formkit-course-conclusion 2026-03-29 monthly 0.8 Course Conclusion Video Lesson Congrats! 🎉 You’ve completed the course. Want to implement FormKit in your next Vue.js project? Use the resources below, along with this course, to help you along the way! https://player.vimeo.com/video/ 244 yes no 2022-12-08T16:00:00+01:00 no https://vueschool.io/lessons/the-formkit-custom-input-checklist 2026-03-29 monthly 0.8 The FormKit Custom Input Checklist Video Lesson In this lesson, we finish creating the custom multiselect input for FormKit. To ensure we’ve cover everything, we make use of the checklist provided in the FormKit docs. https://player.vimeo.com/video/ 366 yes no 2022-12-08T16:00:00+01:00 yes https://vueschool.io/lessons/formkit-and-zod 2026-03-29 monthly 0.8 FormKit and Zod Video Lesson In this bonus lesson, we take a look at the FormKit Zod plugin. https://player.vimeo.com/video/ 488 yes no 2023-05-18T09:00:00+02:00 no https://vueschool.io/courses/rapid-testing-with-vitest 2026-05-12 monthly 0.8 https://vueschool.io/lessons/introduction-to-vitest 2026-04-28 monthly 0.8 Introduction to Vitest Video Lesson In this lesson, Anthony Fu, the creator of Vitest introduces the testing framework and provides a brief overview of it's features and the benefits of testing your Vue.js applications. https://player.vimeo.com/video/ 103 yes no 2022-11-03T15:00:00+01:00 no https://vueschool.io/lessons/how-to-install-vitest 2026-04-28 monthly 0.8 How to Install Vitest Video Lesson In this lesson, learn how to install Vitest manually or via the official Vue starter template. https://player.vimeo.com/video/ 199 yes no 2022-11-03T15:00:00+01:00 no https://vueschool.io/lessons/your-first-test 2026-04-28 monthly 0.8 Your First Test Video Lesson In this lesson, get started writing your first test in Vitest! Create a simple sum function and test it with Vitest. https://player.vimeo.com/video/ 175 yes no 2022-11-03T15:00:00+01:00 no https://vueschool.io/lessons/improve-the-sum-function 2026-04-28 monthly 0.8 Improve the Sum Function Video Lesson In this lesson, improve our sum function to be more robust and learn about Vitest's watch mode for super fast feedback. https://player.vimeo.com/video/ 205 yes no 2022-11-03T15:00:00+01:00 no https://vueschool.io/lessons/write-a-deep-merge-function-with-tdd-the-goal 2026-04-28 monthly 0.8 A Deep Merge Function - The Goal Video Lesson In this lesson, Anthony introduces the concept of Test Driven Development (TDD) and we take a look at what a deep merge function is so we can create our own with TDD. https://player.vimeo.com/video/ 127 yes no 2022-11-03T15:00:00+01:00 yes https://vueschool.io/lessons/handle-and-test-a-shallow-merge 2026-04-28 monthly 0.8 Handle and Test a Shallow Merge Video Lesson Writing our deep merge function starts with supporting a shallow merge. In this lesson, use TDD to shallow merge both objects and arrays. https://player.vimeo.com/video/ 247 yes no 2022-11-03T15:00:00+01:00 yes https://vueschool.io/lessons/refactor-for-deep-merge-without-breaking-existing-tests 2026-03-06 monthly 0.8 Refactor for Deep Merge without Breaking Existing Tests Video Lesson In this lesson, we further develop the function to handle deep merges. Since we've already written tests for the shallow merge, we can ensure that no existing funcationality is broken. https://player.vimeo.com/video/ 224 yes no 2022-11-10T16:00:00+01:00 yes https://vueschool.io/lessons/expect-for-errors-in-tests 2026-04-28 monthly 0.8 Expect for Errors In Tests Video Lesson It's important to test that good input produces the correct results. It's also important, however to test that bad input throws helpful errors. In this lesson, learn how to test the failing state o... https://player.vimeo.com/video/ 305 yes no 2022-11-10T16:00:00+01:00 yes https://vueschool.io/lessons/snapshots-in-vitest 2026-06-02 monthly 0.8 Snapshots in Vitest Video Lesson In this lesson, learn how to use snapshots in order to make sure that function output does not change unexpectedly. https://player.vimeo.com/video/ 134 yes no 2022-11-10T16:00:00+01:00 yes https://vueschool.io/lessons/how-to-update-snapshots 2026-04-28 monthly 0.8 How to Update Snapshots Video Lesson Sometimes updates are expected and you need to update a snapshot to match the new result. In this lesson, learn how to update snapshots in Vitest using either the keyboard shortcut or the CLI flag. https://player.vimeo.com/video/ 167 yes no 2022-11-10T16:00:00+01:00 yes https://vueschool.io/lessons/inline-snapshots-in-vitest 2026-04-28 monthly 0.8 Inline Snapshots in Vitest Video Lesson In this lesson, learn how to inline your snapshots directly in the test file to see the expected output directly without jumping across different files. https://player.vimeo.com/video/ 186 yes no 2022-11-10T16:00:00+01:00 yes https://vueschool.io/lessons/spying-side-effects-with-vitest 2026-04-28 monthly 0.8 Spying Side Effects with Vitest Video Lesson In this lesson, we learn how to spy on a function's side effects with Vitest's `vi.spyOn` function. https://player.vimeo.com/video/ 154 yes no 2023-03-02T09:00:00+01:00 yes https://vueschool.io/lessons/mock-javascript-modules-with-vitest 2026-04-28 monthly 0.8 Mock JavaScript Modules with Vitest Video Lesson Mocking allows you to alter the implemenation of functions that are outside of your control. This let's you produce specific cases for testing or skip some heavy operations like network requests in... https://player.vimeo.com/video/ 267 yes no 2023-03-02T09:00:00+01:00 yes https://vueschool.io/lessons/intro-to-mocking-and-spying 2026-04-28 monthly 0.8 Intro to Mocking and Spying Video Lesson In real-world programming, functions commonly exist with side effects. Mocking and spying are the common tool for testing these side effects and Vitest comes with first class support of both! https://player.vimeo.com/video/ 72 yes no 2023-03-02T09:00:00+01:00 yes https://vueschool.io/lessons/mocking-time-in-vitest 2026-04-28 monthly 0.8 Mocking Time in Vitest Video Lesson In this lesson, learn how to mock time with `vi.setSystemTime`. https://player.vimeo.com/video/ 108 yes no 2023-03-09T09:00:00+01:00 yes https://vueschool.io/lessons/the-spy-instance 2026-04-28 monthly 0.8 The Spy Instance Video Lesson In this lesson, learn how to spy on multiple calls of a function taking order into account. https://player.vimeo.com/video/ 216 yes no 2023-03-02T09:00:00+01:00 yes https://vueschool.io/lessons/mocking-timers-in-vitest 2026-04-28 monthly 0.8 Mocking Timers in Vitest Video Lesson In this lesson, learn how to mock timers to properly test delayed functions while keeping tests snappy and fast. https://player.vimeo.com/video/ 233 yes no 2023-03-09T09:00:00+01:00 yes https://vueschool.io/lessons/mocking-network-requests-in-vitest 2026-04-28 monthly 0.8 Mocking Network Requests in Vitest Video Lesson In this lesson, learn how to mock network requests during testing for fast reliable tests with predictable mocked HTTP responses. https://player.vimeo.com/video/ 357 yes no 2023-03-09T09:00:00+01:00 yes https://vueschool.io/lessons/extra-setup-file 2026-04-28 monthly 0.8 Extra: Setup File Video Lesson In this lesson, learn how to best organize your mock HTTP responses in a `msw.setup.ts` file. https://player.vimeo.com/video/ 109 yes no 2023-03-09T09:00:00+01:00 yes https://vueschool.io/lessons/testing-with-vue 2026-03-06 monthly 0.8 Testing with Vue Video Lesson In this lesson, learn about the different testing approaches so that you know when to choose which. In this chapter, we will focus on writing integration tests for Vue composables and components. https://player.vimeo.com/video/ 121 yes no 2023-09-07T09:00:00+02:00 yes https://vueschool.io/lessons/testing-vue-js-composables-first 2026-03-06 monthly 0.8 Testing Vue.js Composables First Video Lesson In this lesson, learn how to test a Vue.js composable with Vitest. https://player.vimeo.com/video/ 189 yes no 2023-09-07T09:00:00+02:00 yes https://vueschool.io/lessons/set-up-a-dom-environment%20in%20Vitest 2026-03-06 monthly 0.8 Set up a DOM Environment in Vitest Video Lesson In this lesson, learn how to setup the DOM environment with happy-dom or jsdom in order to write tests that rely on your Vue component or composable being used within the DOM. https://player.vimeo.com/video/ 160 yes no 2023-09-07T09:00:00+02:00 yes https://vueschool.io/lessons/rapid-testing-conditional-environments-in-vitest 2026-03-06 monthly 0.8 Conditional Environments in Vitest Video Lesson In this lesson, learn how to apply the DOM environment to only particular test cases using the Vitest `environmentMatchGlobs` setting and magic comments. https://player.vimeo.com/video/ 165 yes no 2023-09-07T09:00:00+02:00 yes https://vueschool.io/lessons/setup-for-testing-vue-components 2026-03-06 monthly 0.8 Setup for Testing Vue Components Video Lesson In this lesson, learn to setup Vitest to run tests for Vue.js components. https://player.vimeo.com/video/ 105 yes no 2023-09-07T09:00:00+02:00 yes https://vueschool.io/lessons/vue-test-utils 2026-03-06 monthly 0.8 Vue Test Utils Video Lesson In this lesson, learn how to use Vue Test Utils along with Vitest to test Vue components. https://player.vimeo.com/video/ 122 yes no 2023-09-07T09:00:00+02:00 yes https://vueschool.io/lessons/vitest-course-conclusion 2026-04-28 monthly 0.8 Course Conclusion Video Lesson Thanks for watching! For more content on unit testing with Vitest that includes testing Vue components, [checkout the course A "Wordle" on Test Driven Development in Vue.js](https://vueschool.io/co... https://player.vimeo.com/video/ 81 yes no 2024-12-03T21:28:00+01:00 yes https://vueschool.io/courses/build-a-drag-and-drop-trello-board 2026-05-12 monthly 0.8 https://vueschool.io/lessons/what-we-are-building-trello-board 2026-05-08 monthly 0.8 What We Are Building Video Lesson Hello and welcome to the course! 👋 https://player.vimeo.com/video/ 200 yes no 2022-12-29T16:00:00+01:00 no https://vueschool.io/lessons/bootstrap-the-project-trello-board 2026-05-08 monthly 0.8 Bootstrap the Project Video Lesson In this lesson, we’ll bootstrap the Trello board project using Nuxt.js. Nuxt is a meta framework built on top of Vue that provides a wealth of developer conveniences for working with Vue 3. https://player.vimeo.com/video/ 303 yes no 2022-12-29T16:00:00+01:00 no https://vueschool.io/lessons/create-simple-board-and-task-ts-types 2026-05-08 monthly 0.8 Create Simple Board and Task TS Types Video Lesson In this lesson, we’ll create TypeScript interfaces for the Column and Task data. Knocking this out first makes it easy for me to describe the data structure to you and helps us think through what... https://player.vimeo.com/video/ 318 yes no 2022-12-29T16:00:00+01:00 yes https://vueschool.io/lessons/provide-the-board-data-and-structure-the-html 2026-05-08 monthly 0.8 Provide the Board Data and Structure the HTML Video Lesson In this lesson, we hardcode some board data into a `TrelloBoard` component. This makes it easy to start working out the HTML structure of the Trello Board. We also make sure our data is typesafe wi... https://player.vimeo.com/video/ 516 yes no 2022-12-29T16:00:00+01:00 yes https://vueschool.io/lessons/style-the-board-with-tailwind-css 2026-05-08 monthly 0.8 Style the Board with Tailwind CSS Video Lesson In this lesson, we use the CSS utility library Tailwind CSS to style our Vue.js powered Trello board. Utility classes like flex, bg-gray-200, and more make it quick and easy to turn divs into nicel... https://player.vimeo.com/video/ 384 yes no 2023-01-05T16:00:00+01:00 yes https://vueschool.io/lessons/create-a-task-component-and-style-it-with-tailwind-css 2026-05-08 monthly 0.8 Create a Task Component and Style it with Tailwind CSS Video Lesson In this lesson, we continue getting the basics styles for the app worked out. In the process, we create a `TrelloBoardTask` component for displaying the individual column tasks. https://player.vimeo.com/video/ 501 yes no 2023-01-05T16:00:00+01:00 no https://vueschool.io/lessons/sort-the-columns-with-vue-draggable 2026-05-08 monthly 0.8 Sort the Columns with Vue Draggable Video Lesson In this lesson, we get to the really exciting part: adding drag and drop functionality with Vue Draggable! The `draggable` component takes an array as it’s `v-model` and renders draggable element... https://player.vimeo.com/video/ 361 yes no 2023-01-05T16:00:00+01:00 no https://vueschool.io/lessons/draggable-transition-and-drag-handle 2026-05-08 monthly 0.8 Draggable Transition and Drag Handle Video Lesson In this lesson, we enhance our draggable columns with some built in Vue draggable features: animations/transitions and handles. https://player.vimeo.com/video/ 293 yes no 2023-01-05T16:00:00+01:00 yes https://vueschool.io/lessons/drag-and-drop-tasks-between-columns 2026-05-08 monthly 0.8 Drag and Drop Tasks Between Columns Video Lesson In this lesson, we implement the drag and drop functionality for our Trello board tasks. Dragging between different columns is pretty simple due to the `group` prop on the vue draggable compnent. https://player.vimeo.com/video/ 367 yes no 2023-01-12T16:00:00+01:00 yes https://vueschool.io/lessons/alt-drag-to-clone-tasks 2026-05-13 monthly 0.8 Alt Drag to Clone Tasks Video Lesson In this lesson, we add a fancy keyboard shortcut to our Trello board. This shortcut allows users to clone tasks by Alt (or Option) dragging. We can easily listen for the presence of key modifiers w... https://player.vimeo.com/video/ 262 yes no 2023-01-12T16:00:00+01:00 no https://vueschool.io/lessons/vue-draggable-sortable-classes 2026-05-13 monthly 0.8 Vue Draggable Sortable Classes Video Lesson In this lesson, learn how to style the draggable elements based on what point of the drag process they are in. Trello applies a slight tilt to cards when they are being dragged. We can do the same... https://player.vimeo.com/video/ 352 yes no 2023-01-12T16:00:00+01:00 yes https://vueschool.io/lessons/add-a-new-task 2026-04-13 monthly 0.8 Add a New Task Video Lesson In this lesson, we create a NewTask component to handle adding new tasks to the Trello Board. https://player.vimeo.com/video/ 291 yes no 2023-01-12T16:00:00+01:00 yes https://vueschool.io/lessons/delete-tasks-with-backspace 2026-05-13 monthly 0.8 Delete Tasks with Backspace Video Lesson In this lesson, we add the ability to delete a task from a column with the backspace key. https://player.vimeo.com/video/ 496 yes no 2023-01-19T16:00:00+01:00 yes https://vueschool.io/lessons/add-remove-columns 2026-05-13 monthly 0.8 Edit, Add, and Remove Columns Video Lesson In this lesson, we add the ability to add, remove, and edit columns to the Trello Board. Vue.js makes this a pretty straightfoward task! https://player.vimeo.com/video/ 658 yes no 2023-01-19T16:00:00+01:00 no https://vueschool.io/lessons/persist-tasks-to-local-storage 2026-05-13 monthly 0.8 Persist Tasks to Local Storage Video Lesson In this lesson, we persist the board data to local storage with VueUse. This allows us to keep the tasks and columns between page refreshes and rounds out a simple functional Trello board. https://player.vimeo.com/video/ 364 yes no 2023-01-19T16:00:00+01:00 yes https://vueschool.io/lessons/build-a-drag-and-drop-trello-board-course-conclusion 2026-05-13 monthly 0.8 Course Conclusion Video Lesson Thanks for watching! Good-bye for now and see you next time! 👋 https://player.vimeo.com/video/ 82 yes no 2023-01-19T16:00:00+01:00 yes https://vueschool.io/courses/nuxt-js-3-fundamentals 2026-05-12 monthly 0.8 https://vueschool.io/lessons/what-is-nuxt 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1516411602-44cd08a35ea56aee1a2bb57efad2a1c9daf96673d5aa3d536f17f9149c502230-d_1280x720?r=pad What is Nuxt? Video Lesson In this lesson, I’ll introduce you to Nuxt.js 3 and give a brief overview of some of it’s primary features. Features can be broken down roughly into 2 main categories: https://player.vimeo.com/video/ 438 yes no 2022-10-06T17:02:00+02:00 no https://vueschool.io/lessons/create-a-nuxt-app-from-scratch 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1517419588-0d963172f23fc6e992a0ee699d86e3c28721e4b910cc519bf00013ade4889ec8-d_1280x720?r=pad Create a Nuxt App from Scratch Video Lesson In this lesson, we use the Nuxt CLI called `nuxi` to bootstrap a brand new Nuxt app from scratch. https://player.vimeo.com/video/ 399 yes no 2022-10-06T17:02:00+02:00 yes https://vueschool.io/lessons/file-based-routing-in-nuxt-js 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1525752095-a3d8d4dc3d27ca11310c50f51e0751c5960f4ba3dcca625cadc36037db54df3e-d_1280x720?r=pad File Based Routing in Nuxt.js Video Lesson In this lesson, learn how to support multiple routes in Nuxt just by creating new files within the `pages` directory. You can also start with some boilerplate page component code by using the comma... https://player.vimeo.com/video/ 308 yes no 2022-10-06T17:02:00+02:00 yes https://vueschool.io/lessons/nuxtlink-for-navigation 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1525752295-191688a41016c3a20d7c36f4bf423bbc407b12b6984e9a6c574188d35d425bf5-d_1280x720?r=pad NuxtLink for Navigation Video Lesson In this lesson, learn how to navigate between pages of a Nuxt app with the `<NuxtLink>` component. https://player.vimeo.com/video/ 256 yes no 2022-10-06T17:02:00+02:00 yes https://vueschool.io/lessons/dynamic-route-params-in-nuxt-js 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1525752521-c6a60fc2c82977a43035774a04a33a0b5952ef79d832d75538b17b55f7b4d367-d_1280x720?&r=pad Dynamic Route Params in Nuxt.js Video Lesson In this lesson, we learn how to name our page components in order to support dynamic route parameters. This is accomplished by putting the dynamic param in square brackets. https://player.vimeo.com/video/ 327 yes no 2022-10-06T17:02:00+02:00 no https://vueschool.io/lessons/fetch-data-with-fetch 2026-05-13 monthly 0.8 https://i.vimeocdn.com/video/1525752714-67e9b70d375b90d78c9cc85714cbff3db2dac18bf0809ebe3c72e03c05cba7ae-d_1280x720?r=pad Fetch Data with $fetch Video Lesson In this lesson, we use the built in `$fetch` function for making a request to the OMDB api and getting search results for a movie query. https://player.vimeo.com/video/ 562 yes no 2022-10-06T17:02:00+02:00 no https://vueschool.io/lessons/provide-a-single-root-element-for-page-components 2026-05-14 monthly 0.8 https://i.vimeocdn.com/video/1525752990-5f746e9c53b51969f33d0e52b8ae008a184ff101fbdd9514f92a6b451a8f4344-d_1280x720?r=pad Provide a Single Root Element for Page Components Video Lesson In this lesson, learn how to handle a common gotcha by providing a single root node for page components or turning off the page transition. https://player.vimeo.com/video/ 151 yes no 2022-10-13T16:00:00+02:00 yes https://vueschool.io/lessons/create-components-that-auto-import 2026-05-14 monthly 0.8 https://i.vimeocdn.com/video/1525753239-1ef352386d6ebb6ab5bc5cd0b8427aa4b2e738336f437c70f1e91eb6d9a1b0bb-d_1280x720?r=pad Create Components that Auto Import Video Lesson In this lesson, we extract the code for searching movies into it’s own component. Then we take advantage of Nuxt’s auto import feature for components to use the newly created component with onl... https://player.vimeo.com/video/ 205 yes no 2022-10-13T16:00:00+02:00 yes https://vueschool.io/lessons/fetch-data-with-useasyncdata 2026-05-14 monthly 0.8 https://i.vimeocdn.com/video/1525753519-1de53e3da46bf031c4934729d573d821fc1c4b530f7052208fd85167e6726c55-d_1280x720?r=pad Fetch data with useAsyncData Video Lesson In this lesson, we call the `useAsyncData` function to limit the request to OMDB only to the server side on initial page load. https://player.vimeo.com/video/ 222 yes no 2022-10-13T16:00:00+02:00 yes https://vueschool.io/lessons/de-dupe-async-data-with-a-key 2026-05-14 monthly 0.8 https://i.vimeocdn.com/video/1525756234-3243558e86d69aa81cc6c88aec8fce41ad9dc97e79fbe062bd138c98ff75dc8b-d_1280x720?r=pad De-dupe Async Data with a Key Video Lesson In this lesson, we provide a key to `useAsyncData` in order to inform Nuxt when it can get the data from the cache and when it needs to re-run the request for new data. https://player.vimeo.com/video/ 190 yes no 2022-10-13T16:00:00+02:00 yes https://vueschool.io/lessons/configure-useasyncdata-with-options 2026-05-14 monthly 0.8 https://i.vimeocdn.com/video/1525756435-089a6ae9841dc58e37a17676ca4f7bd4ebda95d67c124e83f4d3081ae9400786-d_1280x720?r=pad Configure useAsyncData with Options Video Lesson In this lesson, we use the `useAsyncData` options transform and pick to modify the data returned in the payload. It is recommended that you always pick only the data necessary for the page to optim... https://player.vimeo.com/video/ 239 yes no 2022-10-13T16:00:00+02:00 yes https://vueschool.io/lessons/call-usefetch-for-a-fetch-useasyncdata-shorthand 2026-05-14 monthly 0.8 https://i.vimeocdn.com/video/1516702953-bdb5ba829e75d12809d5f3241715618d1910628c1e7c747bc8876adc2c7bc4d5-d_1280x720?r=pad Call useFetch for a $fetch + useAsyncData Shorthand Video Lesson It’s a very common need to call `$fetch` within `useAsyncData`. In this lesson, we take a look at the shorthand for this combo called `useFetch`. It takes many of the same options as `useAsyncDat... https://player.vimeo.com/video/ 136 yes no 2022-10-13T16:00:00+02:00 yes https://vueschool.io/lessons/handle-usefetch-errors 2026-05-14 monthly 0.8 https://i.vimeocdn.com/video/1525756626-db425aecc827b98c07bb2dcee5861baac1ce5656aeb07967d731f43d0942bf55-d_1280x720?r=pad Handle useFetch Errors Video Lesson In this lesson, we learn how to deal with errors in the response from the Nuxt 3 `useFetch` function. The built in Nuxt function `showError` provides a handy way to set status codes and error messa... https://player.vimeo.com/video/ 242 yes no 2022-10-20T16:00:00+02:00 yes https://vueschool.io/lessons/call-the-usehead-composable-for-good-seo 2026-05-14 monthly 0.8 https://i.vimeocdn.com/video/1525757033-5402b5d1adac73a09fcc24e4bf585a8593cc74d9761cffc1a5034f32b12a252c-d_1280x720?r=pad Call the useHead Composable for Good SEO Video Lesson In this lesson, we use Nuxt’s `useHead` composable to provide a page title and other meta data that’s useful for SEO and social sharing. The `useHead` composable reactively updates all this met... https://player.vimeo.com/video/ 439 yes no 2022-10-20T16:00:00+02:00 yes https://vueschool.io/lessons/create-flexible-custom-layouts 2026-05-14 monthly 0.8 https://i.vimeocdn.com/video/1529377704-957ca33760d5a6f7528efc65b94adc853e0196373ae5d86bf6a27059a30be025-d_1280x720?r=pad Create Flexible Custom Layouts Video Lesson In this lesson, we create a `layouts` directory with a `default` layout and a `plain` layout. These are automatically made available by Nuxt to quickly layout any page. https://player.vimeo.com/video/ 328 yes no 2022-10-20T16:00:00+02:00 yes https://vueschool.io/lessons/define-nuxt-route-middleware 2026-05-14 monthly 0.8 https://i.vimeocdn.com/video/1529379025-31f61a76e61a8a0062c5feabe1f4fdadccf8885ab73357123d21ce71a9b4201d-d_1280x720?&r=pad Define Nuxt Route Middleware Video Lesson In this lesson, we learn how to run code before navigation with Nuxt’s route middleware. There are 3 kinds of route middleware: https://player.vimeo.com/video/ 381 yes no 2022-10-20T16:00:00+02:00 no https://vueschool.io/lessons/nuxt-server-api-routes 2026-05-14 monthly 0.8 https://i.vimeocdn.com/video/1529392508-fd0ab4fb5fc2f7ff2f12129793d5541def296b0ee6e0e7ec718fce5119b01c72-d_1280x720?&r=pad Nuxt Server API Routes Video Lesson In this lesson, we create the nested directory `server/api` to bootstrap quick support for REST API routes. Files created in this directory make api endpoints with little effort and some magic to c... https://player.vimeo.com/video/ 294 yes no 2022-10-27T16:00:00+02:00 no https://vueschool.io/lessons/global-state-management-with-pinia 2026-05-14 monthly 0.8 https://i.vimeocdn.com/video/1531661870-7fff132db91075c28b45db3dbd00a0b5ca15cac9f26ed609e0c1eaae83c4a0bf-d_1280x720?r=pad Global State Management with Pinia Video Lesson In this lesson, learn how to setup a comprehensive global state management solution with Pinia. Pinia is the official state management solution for Vue.js and can be installed as a Nuxt module. https://player.vimeo.com/video/ 689 yes no 2022-10-27T16:00:00+02:00 yes https://vueschool.io/lessons/overview-of-nuxt-deployment-options 2026-05-14 monthly 0.8 https://i.vimeocdn.com/video/1531599093-c96919e3a3795b19368ce8a97a168b377cc57ce62502cb5e581f1457369e57fd-d_1280x720?r=pad Overview of Nuxt Deployment Options Video Lesson # Description https://player.vimeo.com/video/ 189 yes no 2022-10-27T16:00:00+02:00 yes https://vueschool.io/lessons/abort-navigation-or-redirect-in-nuxt-middleware 2026-05-14 monthly 0.8 https://i.vimeocdn.com/video/1529387443-e668a1925c75f06949d3320154ae9b4b5cdbce9e9c28d3a15501d7b4cfe730fb-d_1280x720?r=pad Abort Navigation or Redirect In Nuxt Middleware Video Lesson In this lesson, we learn how to use middleware to interrupt the normal navigation flow with Nuxt helper functions `navigateTo` and `abortNavigation`. This can be helpful for many use cases includin... https://player.vimeo.com/video/ 359 yes no 2022-10-20T16:00:00+02:00 yes https://vueschool.io/lessons/handle-different-nuxt-api-request-methods 2026-05-14 monthly 0.8 https://i.vimeocdn.com/video/1529397037-783cf7ee9d2ee6ef28587f8c2e9223cdb3bcaabd3bad8086185ddc0f88ad68f8-d_1280x720?r=pad Handle Different Nuxt API Request Methods Video Lesson In this lesson, learn how to make Nuxt API endpoints that only respond to certain request methods such as `post` , `get`, `put`, and `delete`. This is accomplished by appending the desired request... https://player.vimeo.com/video/ 495 yes no 2022-10-27T16:00:00+02:00 yes https://vueschool.io/lessons/global-state-management-with-usestate 2026-05-14 monthly 0.8 https://i.vimeocdn.com/video/1531663196-9700a5b6e7f835d7ead463f67f0971dfb89aca17593f4edf014c5aec3cdd4dd1-d_1280x720?r=pad Global State Management with useState Video Lesson In this lesson, we use the `useState` composable from Nuxt to define reactive state that’s shared across multiple components. We also move the call of useState to it’s own file where we can typ... https://player.vimeo.com/video/ 636 yes no 2022-10-27T16:00:00+02:00 yes https://vueschool.io/lessons/deploy-a-nuxt-site-to-netlify 2026-05-14 monthly 0.8 https://i.vimeocdn.com/video/1531656529-fb200cff18a16493cba4640cc520e3e305869f8035fb9b4f7d344e48ec7b0431-d_1280x720?&r=pad Deploy a Nuxt Site to Netlify Video Lesson In this lesson, learn how to deploy a Nuxt.js 3 site to Netlify hosting. The zero config setup, combined with the git push to deploy makes Netlify an excellent hosting option. https://player.vimeo.com/video/ 436 yes no 2022-10-27T16:00:00+02:00 yes https://vueschool.io/lessons/hybrid-rendering-with-nuxt 2026-05-14 monthly 0.8 https://i.vimeocdn.com/video/1531670742-fc2bb599ba34dd3308495eb711fe616c9a93ea8eee4797d63fba7a40c2701237-d_1280x720?r=pad Hybrid Rendering with Nuxt Video Lesson In this lesson, we experiment with the `routeRules` option for `nuxt.config.ts`. This option allows us to render pages differently based on it’s route. This means we can split up a single applica... https://player.vimeo.com/video/ 641 yes no 2022-10-27T16:00:00+02:00 no https://vueschool.io/lessons/nuxt-js-3-fundamentals-course-conclusion 2026-05-14 monthly 0.8 https://i.vimeocdn.com/video/1531738025-59a5408426b047f8222b447ac9f2ce093562ddab3367b7dfe3c02f448f2f1efc-d_1280x720?r=pad Course Conclusion Video Lesson Thanks for watching the course! We hope you’ve enjoyed it! Below are some other valuable Nuxt 3 resources. If you have any questions, comments, etc feel free to [reach out to us on Twitter](https... https://player.vimeo.com/video/ 157 yes no 2022-10-27T16:00:00+02:00 yes https://vueschool.io/lessons/intro-to-nuxt-image 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1713262492-779d689bfc67f34ace9af8a8aa83baf5a767c826703b90c7a1ba8010771995f4-d_1280x720?r=pad Intro to Nuxt Image Video Lesson In this bonus chapter of the course, we tack on some extra goodies all about optimizing images with the Nuxt Image component. https://player.vimeo.com/video/ 235 yes no 2023-08-24T09:00:00+02:00 no https://vueschool.io/lessons/installing-nuxt-image 2026-06-02 monthly 0.8 https://i.vimeocdn.com/video/1713264701-2c8a3d1d1576d9eb3c654807c2edba502bfec96d06636857c91de140ee9fd1c8-d_1280x720?r=pad Installing Nuxt Image Video Lesson In this lesson, learn how to install the Nuxt Image module into an existing Vue.js application. https://player.vimeo.com/video/ 116 yes no 2023-08-24T09:00:00+02:00 yes https://vueschool.io/lessons/the-nuxtimage-component 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1713266740-0e381d2b40bc493ea20bd24709bb0f393760825563f4075d8f3ec094e8b21ad5-d_1280x720?r=pad The NuxtImage Component Video Lesson In this lesson, learn how to use the `NuxtImg` component as a drop-in replacement for the HTML native `img` tag for optimized performant images. `NuxtImage` is the easiest way to support optimized... https://player.vimeo.com/video/ 345 yes no 2023-08-24T09:00:00+02:00 no https://vueschool.io/lessons/controlling-when-images-load 2026-06-02 monthly 0.8 https://i.vimeocdn.com/video/1713262848-8f726c9531c3338cc38658e52d8643eae5da405f7e044bb1ce627a707b0f548e-d_1280x720?r=pad Controlling When Images Load Video Lesson In this lesson, learn how to control WHEN images load with the `NuxtImg` component. There are several strategies available depending on the use case. You can load the image on page load, when it co... https://player.vimeo.com/video/ 180 yes no 2023-08-24T09:00:00+02:00 yes https://vueschool.io/lessons/the-nuxtpicture-component 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1717118401-6db75a918827c96d8f8bf4522b85a235d30a238aeb81a9e5847e4b407f599adf-d_1280x720?r=pad The NuxtPicture Component Video Lesson The NuxtPicture component is a replacement for the native Picture element with a focus on serving next-gen formats to browsers that support it. Use the Nuxt Image NuxtPicture component to make your... https://player.vimeo.com/video/ 283 yes no 2023-08-31T09:00:00+02:00 yes https://vueschool.io/lessons/responsive-art-direction-hack 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1717118493-e37c85aa01d84c6a7db13c5880562aa562fe5e639de998b994f90287bedff504-d_1280x720?r=pad Responsive Art Direction Hack Video Lesson In this lesson, learn how to combine the native picture element with direct requests to the Nuxt Image IPX provider. This allows for some interesting art direction based on device size. https://player.vimeo.com/video/ 296 yes no 2023-08-31T09:00:00+02:00 yes https://vueschool.io/lessons/image-modifiers 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1717118467-9291e2a3282e8d8cade4b357ba397ebe7d10d80582d9846df0c1d1705196779f-d_1280x720?r=pad Image Modifiers Video Lesson Nuxt Image providers, like built-in IPX, can do more than just resize images for performance purposes. There are plenty of modifiers available, that make displaying your image with just the right e... https://player.vimeo.com/video/ 318 yes no 2023-08-31T09:00:00+02:00 yes https://vueschool.io/lessons/responsive-images 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1717118527-194f17f73a72226e87389840176acda5c4221182810e1d046744ed2639335ad4-d_1280x720?r=pad Responsive Images Video Lesson In this lesson, we take a look at the `NuxtImage` sizes prop, and how it provides responsive images. Responsive images means providing different sized images based on the users screen size. https://player.vimeo.com/video/ 493 yes no 2023-08-31T09:00:00+02:00 yes https://vueschool.io/courses/custom-vue-js-3-plugins 2026-05-12 monthly 0.8 https://vueschool.io/lessons/what-is-a-vue-js-plugin 2026-03-29 monthly 0.8 What is a Vue.js Plugin? Video Lesson Plugins allow you to quickly install advanced functionality to your Vue.js applications. In this lesson, we introduce you to the concept and browse some popular plugins to see what’s possible. https://player.vimeo.com/video/ 204 yes no 2022-09-15T17:05:00+02:00 no https://vueschool.io/lessons/define-and-install-a-vue-js-plugin 2026-03-29 monthly 0.8 Define and Install a Vue.js Plugin Video Lesson In this lesson, you get hands on creating your first Vue.js 3 Plugin. Learn how to define your plugin as an object with an install method and how to register on the Vue application instance with `.... https://player.vimeo.com/video/ 164 yes no 2022-09-15T16:00:00+02:00 no https://vueschool.io/lessons/the-plugin-function-syntax-and-organizing-plugin-code 2026-03-29 monthly 0.8 The Plugin Function Syntax and Organizing Plugin Code Video Lesson In this lesson, learn how to extract your plugin to it’s own file. This is essential for good organization and a precursor to packaging your file for distribution. Also, learn the alternative fun... https://player.vimeo.com/video/ 128 yes no 2022-09-15T17:05:00+02:00 yes https://vueschool.io/lessons/use-a-vue-js-plugin-to-register-a-component 2026-03-29 monthly 0.8 Use a Vue.js Plugin to Register a Component Video Lesson In this lesson, we start creating a tooltip plugin. In the process, you'll see how to register a Vue.js component from inside a plugin. You'll also learn how to maximize performance by registering... https://player.vimeo.com/video/ 335 yes no 2022-09-15T17:05:00+02:00 yes https://vueschool.io/lessons/create-a-vue-tooltip-component-with-tippy-js 2026-03-29 monthly 0.8 Create a Vue ToolTip Component with Tippy.js Video Lesson In this lesson, we start making our tootlip component funcational with [Tippy.js](https://atomiks.github.io/tippyjs/). Wrapping vanilla JS libraries for better support in Vue is a common use case f... https://player.vimeo.com/video/ 259 yes no 2022-09-15T17:05:00+02:00 yes https://vueschool.io/lessons/use-onupdated-to-make-the-tooltip-reactive 2026-03-29 monthly 0.8 Use onUpdated to Make the ToolTip Reactive Video Lesson In this video, we use the onUpdated composition function from Vue to make the tooltip component reactive. This is just one enhancement we're providing to the vanilla js library by wrapping it in a... https://player.vimeo.com/video/ 251 yes no 2022-09-15T16:00:00+02:00 no https://vueschool.io/lessons/prevent-memory-leaks-by-destroying-tippy-onunmounted 2026-03-29 monthly 0.8 Prevent Memory Leaks by Destroying Tippy onUnmounted Video Lesson In this lesson, we make sure to clean up any event listeners that tippy might be registering on unmount of the `ToolTip` component. We can do this with tippy’s destroy method. This prevents possi... https://player.vimeo.com/video/ 59 yes no 2022-09-22T16:00:00+02:00 yes https://vueschool.io/lessons/support-other-tippy-options-for-the-component 2026-03-29 monthly 0.8 Support Other Tippy Options for the Component Video Lesson In this lesson, learn how to provide maximum flexbility for the ToolTip component by accepting Tippy.js options as a prop. https://player.vimeo.com/video/ 163 yes no 2022-09-22T16:00:00+02:00 yes https://vueschool.io/lessons/support-vue-js-plugin-options 2026-03-29 monthly 0.8 Support Vue.js Plugin Options Video Lesson In this lesson, learn how to handle plugin level options for configuring all ToolTip component instances for the whole app. The possibilities here are limitless and don’t just apply to how your p... https://player.vimeo.com/video/ 278 yes no 2022-09-22T16:00:00+02:00 yes https://vueschool.io/lessons/vue-js-plugin-option-defaults 2026-03-29 monthly 0.8 Vue.js Plugin Option Defaults Video Lesson In this lesson, learn how to define default values for your plugin options. Simple default options can be defined without a helper library. For a more robust merging solution checkout [defu](https:... https://player.vimeo.com/video/ 251 yes no 2022-09-22T16:00:00+02:00 yes https://vueschool.io/lessons/add-a-global-instance-method-with-a-vue-js-plugin 2026-03-29 monthly 0.8 Add a Global Instance Method with a Vue.js Plugin Video Lesson In this lesson, learn how to add global app instance methods and properties from your Vue.js plugins. These are great for exposing handy utility functions to every app component. Vue Router does th... https://player.vimeo.com/video/ 199 yes no 2022-09-22T16:00:00+02:00 yes https://vueschool.io/lessons/typesafe-plugin-options-with-typescript 2026-03-29 monthly 0.8 Typesafe Plugin Options with TypeScript Video Lesson In this lesson, learn how to prevent errors and support amazing autocompletion/intellisense by typing your Vue.js plugin’s options. This can be done with typescript and a `createMyPlugin` function. https://player.vimeo.com/video/ 467 yes no 2022-09-29T16:00:00+02:00 no https://vueschool.io/lessons/custom-vue-js-3-plugins-course-conclusion 2026-03-29 monthly 0.8 Course Conclusion Video Lesson Congrats! You’re now a Vue.js 3 plugin wizard 🧙‍♂️! If you want to learn more about creating a Vue.js plugin checkout these resources below and thanks for watching the course! https://player.vimeo.com/video/ 156 yes no 2022-09-29T16:00:00+02:00 yes https://vueschool.io/lessons/bundle-a-vue-js-plugin-for-distribution-with-vite 2026-03-29 monthly 0.8 Bundle a Vue.js Plugin for Distribution with Vite Video Lesson In this lesson, we use Vite’s library build mode to generate a dist directory of built JavaScript files. https://player.vimeo.com/video/ 442 yes no 2022-09-29T16:00:00+02:00 yes https://vueschool.io/lessons/test-the-plugin-locally-using-npm-link 2026-03-29 monthly 0.8 Test the Plugin Locally Using npm link Video Lesson In this lesson, we use the `npm link` command to test out our plugin in an independent Vue.js project much like a user would when they download it from npm. https://player.vimeo.com/video/ 244 yes no 2022-09-29T16:00:00+02:00 yes https://vueschool.io/lessons/generate-type-declarations-for-a-vue-js-3-plugin 2026-03-29 monthly 0.8 Generate Type Declarations For a Vue.js 3 Plugin Video Lesson In this lesson, we improve the developer experience for our plugin by generating and exposing the plugins types. This improves error detection and auto-completion for the end developer’s IDE. https://player.vimeo.com/video/ 659 yes no 2022-09-29T16:00:00+02:00 yes https://vueschool.io/lessons/publish-a-vue-js-plugin-on-npm 2026-03-29 monthly 0.8 Publish a Vue.js Plugin on npm Video Lesson In this lesson, we take our built plugin with it’s TypeScript definitions and publish it to npm 🎉. https://player.vimeo.com/video/ 419 yes no 2022-09-29T16:00:00+02:00 yes https://vueschool.io/courses/vue-js-3-custom-directives 2026-05-12 monthly 0.8 https://vueschool.io/lessons/vue-3-understanding-vue-js-directives 2026-03-29 monthly 0.8 Understanding Vue.js Directives Video Lesson In this lesson, we go through Vue.js directives from top to bottom. We learn what they are and how you use them. We learn that a directive's job is to apply side effects to the DOM and that they ca... https://player.vimeo.com/video/ 155 yes no 2022-09-01T16:00:00+02:00 no https://vueschool.io/lessons/vue-3-create-a-custom-vue-js-3-directive 2026-03-29 monthly 0.8 Create a Custom Vue.js 3 Directive Video Lesson In this lesson, you'll learn how to create a custom Vue.js 3 directive. https://player.vimeo.com/video/ 83 yes no 2022-09-01T16:00:00+02:00 yes https://vueschool.io/lessons/vue-3-the-custom-directive-s-value 2026-03-29 monthly 0.8 The Custom Directive's Value Video Lesson Many directives require a value. In this lesson, we’ll learn how to pass, receive and act upon the custom directive's value. https://player.vimeo.com/video/ 201 yes no 2022-09-01T16:00:00+02:00 yes https://vueschool.io/lessons/vue-3-directives-are-reactive 2026-03-29 monthly 0.8 Directives are Reactive Video Lesson Vue.js directives are reactive. In this lesson, we'll see that our custom directive responds when the dependencies change. https://player.vimeo.com/video/ 91 yes no 2022-09-01T16:00:00+02:00 yes https://vueschool.io/lessons/vue-3-vue-js-custom-directive-argument 2026-03-29 monthly 0.8 Vue.js Custom Directive Argument Video Lesson Custom Vue.js directives support up to one argument. The argument, in this case slow, is specified with the colon v-color:slow. https://player.vimeo.com/video/ 110 yes no 2022-09-01T16:00:00+02:00 yes https://vueschool.io/lessons/vue-3-vue-js-custom-directive-modifiers 2026-03-29 monthly 0.8 Vue.js Custom Directive Modifiers Video Lesson Custom Vue.js Directives accepts multiple modifiers. In this lesson, we learn how to create custom modifiers on our directives. https://player.vimeo.com/video/ 108 yes no 2022-09-01T16:00:00+02:00 yes https://vueschool.io/lessons/vue-3-the-directive-s-mounted-hook 2026-03-29 monthly 0.8 The Directive’s Mounted Hook Video Lesson A directive can define hook functions that correspond to the bound element's parent component. In this lesson, we learn when and how to use the mounted directive hook. https://player.vimeo.com/video/ 114 yes no 2022-09-08T16:00:00+02:00 yes https://vueschool.io/lessons/vue-3-the-directive-s-unmounted-hook 2026-03-29 monthly 0.8 The Directive’s unMounted Hook Video Lesson In this lesson, we learn about a common gotcha when using custom directives together with intervals and events. The key to avoiding such bugs is using the unmounted hook to clear the interval or de... https://player.vimeo.com/video/ 188 yes no 2022-09-08T16:00:00+02:00 yes https://vueschool.io/lessons/click-outside-directive-1 2026-03-29 monthly 0.8 Click Outside Directive Video Lesson In this lesson, you learn how to create a click outside directive. This directive solves a real-world problem and is a very handy custom vue.js directive that we use all the time. https://player.vimeo.com/video/ 248 yes no 2022-09-08T16:00:00+02:00 no https://vueschool.io/lessons/register-directives-globally 2026-03-29 monthly 0.8 Register Directives Globally Video Lesson In this lesson, we learn how to define custom directives globally for use throughout the whole app. https://player.vimeo.com/video/ 140 yes no 2022-09-08T16:00:00+02:00 yes https://vueschool.io/lessons/vue-3-custom-vue-directives-course-conclusion 2026-03-29 monthly 0.8 Course Conclusion Video Lesson Vue.js directives are a powerful abstraction but you don't always have to write them yourself. Many UI frameworks include handy directives and you can find dedicated packages on npm for vue directi... https://player.vimeo.com/video/ 95 yes no 2022-09-08T16:00:00+02:00 yes https://vueschool.io/courses/jamstack-the-complete-guide 2026-05-12 monthly 0.8 https://vueschool.io/lessons/what-is-the-jamstack 2026-03-28 monthly 0.8 What is the Jamstack? Video Lesson In this lesson, I’ll introduce you to the Nuxt and Storyblok powered project we’ll be building throughout the course. We’ll also consider the question: “What is the Jamstack?” and explore... https://player.vimeo.com/video/ 386 yes no 2022-07-20T19:00:00+02:00 no https://vueschool.io/lessons/the-jamstack-toolbelt 2026-03-28 monthly 0.8 The Jamstack Toolbelt Video Lesson In this lesson, we survey some of the tools available to a developer working on the Jamstack. The exact products and services mentioned in the video aren’t necessarily important. What is most imp... https://player.vimeo.com/video/ 330 yes no 2022-07-20T19:00:00+02:00 no https://vueschool.io/lessons/static-site-generators-for-the-jamstack 2026-03-28 monthly 0.8 Static Site Generators for the Jamstack Video Lesson In this lesson, we’ll briefly survey some of the different Static Site Generators for use on the Jamstack. The selection of SSGs include: Hugo, Eleventy, Next.js, Gatsby, Nuxt, Vitepress, Vuepres... https://player.vimeo.com/video/ 262 yes no 2022-07-20T19:00:00+02:00 no https://vueschool.io/lessons/hello-nuxt 2026-03-28 monthly 0.8 Hello Nuxt Video Lesson In this lesson, we create a new project with Nuxt 3 using the official Nuxt CLI tool called `nuxi`. This bootstraps everything we need to get started with Nuxt 3. https://player.vimeo.com/video/ 237 yes no 2022-07-20T19:00:00+02:00 no https://vueschool.io/lessons/hello-storyblok 2026-03-28 monthly 0.8 Hello Storyblok Video Lesson In this lesson, we jump into the Storyblok interface for the first time and get our first glimpse of the awesome content editing interface. We also hook-up the Nuxt app with a new Storyblok space i... https://player.vimeo.com/video/ 453 yes no 2022-07-20T19:00:00+02:00 no https://vueschool.io/lessons/create-a-hero-block-in-storyblok 2026-03-28 monthly 0.8 Create a Hero Block in Storyblok Video Lesson In this lesson, we take a look at a mockup for the portfolio site we’re going to build and start modeling some of that content in Storyblok with a nested block. Blocks allow us to create reusable... https://player.vimeo.com/video/ 335 yes no 2022-07-20T19:00:00+02:00 no https://vueschool.io/lessons/consume-site-content-with-nuxt 2026-03-28 monthly 0.8 Consume Storyblok Content with Nuxt Video Lesson In this lesson, we start making our website look more like an actual portfolio site by adding some pre-made styles and creating a Hero component that works with the Storyblok Hero blok. https://player.vimeo.com/video/ 601 yes no 2022-07-20T19:00:00+02:00 no https://vueschool.io/lessons/content-type-blocks 2026-03-28 monthly 0.8 Storyblok Content Type Blocks Video Lesson In this lesson, we’ll create a custom **Content Type Blok** for our projects pages. Content Types allow you to create templates for your stories. https://player.vimeo.com/video/ 692 yes no 2022-07-20T19:00:00+02:00 no https://vueschool.io/lessons/related-content 2026-03-28 monthly 0.8 Add Featured Projects to the Homepage Video Lesson In this lesson, we reuse our projects content to create a featured projects section on the home page. Storyblok makes this easy with the Multi-Options field type. We also learn about the resolve_re... https://player.vimeo.com/video/ 613 yes no 2022-07-20T19:00:00+02:00 no https://vueschool.io/lessons/content-reusability-with-presets 2026-03-28 monthly 0.8 Content Reusability with Presets Video Lesson With a headless architecture you can write your content once and then re-use it across multiple platforms. This is known as "Content Re-Usability". Storyblok supports just this but also supports an... https://player.vimeo.com/video/ 254 yes no 2022-07-20T19:00:00+02:00 no https://vueschool.io/lessons/generate-a-static-site-with-nuxt-3 2026-03-28 monthly 0.8 Generate a Static Site with Nuxt 3 Video Lesson In this lesson, we use the `npm run generate` command that ships with Nuxt 3 in order to produce static HTML. We also take a look at our site’s performance score using Google Lighthouse devtools,... https://player.vimeo.com/video/ 369 yes no 2022-07-20T19:00:00+02:00 no https://vueschool.io/lessons/deploy-a-storyblok-nuxt-3-site-to-netlify 2026-03-28 monthly 0.8 Deploy a Storyblok + Nuxt 3 Site to Netlify Video Lesson In this lesson, we use Netlify to deploy our Storyblok powered Nuxt app to the world. Netlify’s deploy from Github feature and it’s ability to run our site generation step makes it an awesome s... https://player.vimeo.com/video/ 266 yes no 2022-07-20T19:00:00+02:00 no https://vueschool.io/lessons/trigger-rebuilds-in-netlify-when-content-changes 2026-03-28 monthly 0.8 Trigger Rebuilds in Netlify when Content Changes Video Lesson In this lesson, we learn how to trigger the rebuild of the site's static HTML whenever we publish or unpublish content in Storyblok. This is as simple as setting up an incoming webhook in Netlify a... https://player.vimeo.com/video/ 215 yes no 2022-07-20T19:00:00+02:00 no https://vueschool.io/lessons/workflows-device-previews-and-the-app-directory 2026-03-28 monthly 0.8 Workflows, Device Previews, and the App Directory Video Lesson In this video, we take one last stroll around Storyblok before concluding the course and take note of a couple handy features that we have yet to use. https://player.vimeo.com/video/ 166 yes no 2022-07-20T19:00:00+02:00 no https://vueschool.io/lessons/jamstack-the-complete-guide-course-conclusion 2026-03-28 monthly 0.8 Course Conclusion Video Lesson Thanks for watching! We hope you enjoyed the course and are now better prepared to work on the Jamstack with both Nuxt and Storyblok. https://player.vimeo.com/video/ 76 yes no 2022-07-20T19:00:00+02:00 no https://vueschool.io/lessons/fallback-content-for-new-projects 2026-03-28 monthly 0.8 Fallback Content for New Projects Video Lesson In this lesson, we create some fallback content to display to help boost the user experience for content editors when creating a new project. https://player.vimeo.com/video/ 236 yes no 2022-08-04T16:00:00+02:00 no https://vueschool.io/lessons/preview-the-live-site 2026-03-28 monthly 0.8 Preview the Live Site in the Storyblok Editor Video Lesson In this lesson, we combine Storyblok’s special in editor query parameters (specifically `_storyblok`) with Netlify redirects to support live page previews of both existing and brand new pages. https://player.vimeo.com/video/ 456 yes no 2022-08-18T16:00:00+02:00 no https://vueschool.io/lessons/only-show-published-content-on-the-live-site 2026-03-28 monthly 0.8 Only Show Published Content on the Live Site Video Lesson In this lesson, we use the _storyblok query parameter once more, this time to limit draft content to the editor and only show published content on the live site. https://player.vimeo.com/video/ 169 yes no 2022-08-18T16:00:00+02:00 no https://vueschool.io/courses/visual-studio-code-for-vue-js-developers 2026-05-12 monthly 0.8 https://vueschool.io/lessons/intro-to-visual-studio-code 2026-03-20 monthly 0.8 Intro to Visual Studio Code Video Lesson 👋 Hello, and welcome to the course! Are you ready to power up your coding efficiency with Visual Studio Code? If so, then this course is for you! https://player.vimeo.com/video/ 198 yes no 2022-05-12T16:00:00+02:00 no https://vueschool.io/lessons/hello-vs-code 2026-03-20 monthly 0.8 Hello VS Code Video Lesson In this lesson, you get a very high level overview of working with VS code. If you are brand new to the program this is essentially the VS Code “hello world”. If you are already familiar with V... https://player.vimeo.com/video/ 301 yes no 2022-05-12T16:00:00+02:00 yes https://vueschool.io/lessons/bootstrapping-a-vue-js-project-in-vs-code 2026-03-20 monthly 0.8 Bootstrapping a Vue.js Project in VS Code Video Lesson In this project, you’ll learn how to bootstrap a brand new Vue.js 3 project inside of an existing directory in Visual Studio code. https://player.vimeo.com/video/ 159 yes no 2022-05-12T16:00:00+02:00 yes https://vueschool.io/lessons/the-command-palette-and-custom-themes 2026-03-20 monthly 0.8 The Command Palette and Custom Themes Video Lesson In this lesson, we dive into the all important topic of color themes in Visual Studio code. Kidding aside, you do spend a lot of time looking at the editor so it’s worth taking the time making it... https://player.vimeo.com/video/ 499 yes no 2022-05-12T16:00:00+02:00 yes https://vueschool.io/lessons/volar-the-official-language-feature-extension-for-vs-code 2026-03-20 monthly 0.8 The Official Language Feature Extension for VS Code Video Lesson In this lesson, we learn about the official Vue.js language feature extension for VS Code. The Vue extension gives single file components the syntax highlighting and refactoring conveniences we’r... https://player.vimeo.com/video/ 449 yes no 2022-05-19T16:00:00+02:00 no https://vueschool.io/lessons/next-level-volar-tips-and-tricks 2026-03-20 monthly 0.8 Next Level Volar Tips and Tricks Video Lesson In this lesson, we dive into some of Volar’s more unusual features that give it that extra something. Learn how to split your Vue component into separate panels to work in the script section or t... https://player.vimeo.com/video/ 304 yes no 2022-05-19T16:00:00+02:00 yes https://vueschool.io/lessons/auto-formatting-files-in-vs-code-volar-built-in-or-prettier 2026-03-20 monthly 0.8 Auto Formatting Files in VS Code (Volar/Built-in or Prettier) Video Lesson Offloading the work of formatting our code to the editor saves time and headache, plus keeps our code predictable and easy to read. https://player.vimeo.com/video/ 585 yes no 2022-05-19T16:00:00+02:00 yes https://vueschool.io/lessons/auto-linting-in-vs-code-eslint 2026-03-20 monthly 0.8 Auto Linting in VS Code (ESLint) Video Lesson Linting is the automated process of statically analyzing code for potential errors. In this lesson, learn how to setup VS Code with ESLint to provide inline lint error indicators and how to automat... https://player.vimeo.com/video/ 518 yes no 2022-05-19T16:00:00+02:00 yes https://vueschool.io/lessons/vue-snippets-in-visual-studio-code 2026-03-20 monthly 0.8 Vue Snippets in Visual Studio Code Video Lesson In this lesson, we’ll experiment with the Visual Studio Code extension "Vue 3 Snippets". Along the way, we’ll get a glimpse into it's approach to snippets and how it can quickly generate common... https://player.vimeo.com/video/ 474 yes no 2022-05-26T16:00:00+02:00 yes https://vueschool.io/lessons/create-your-own-visual-stuido-code-vue-snippet 2026-03-20 monthly 0.8 Create Your Own Visual Studio Code Vue Snippet Video Lesson In this lesson, we fill in the gaps of some existing Vue snippet extensions by creating our very own `sfc` snippet. The custom snippet will scaffold a new Vue Single File component (`.vue` file) ba... https://player.vimeo.com/video/ 390 yes no 2022-05-26T16:00:00+02:00 yes https://vueschool.io/lessons/debugging-vue-apps-in-vs-code 2026-03-20 monthly 0.8 Debugging Vue Apps in VS Code Video Lesson In this lesson, you learn how to setup Visual Studio Code’s “Javascript Debugger” and how to use it to do basic debugging. https://player.vimeo.com/video/ 793 yes no 2022-05-26T16:00:00+02:00 no https://vueschool.io/lessons/keyboard-shortcuts-for-quickly-managing-files-in-visual-studio-code 2026-03-20 monthly 0.8 Keyboard Shortcuts for Quickly Managing Files in Visual Studio Code Video Lesson In this lesson, we speed up our workflow in Visual Studio Code with some handy keyboard shortcuts for navigating, opening, creating, and closing files. https://player.vimeo.com/video/ 267 yes no 2022-05-26T16:00:00+02:00 yes https://vueschool.io/lessons/keyboard-shortcuts-for-writing-code 2026-03-20 monthly 0.8 Keyboard Shortcuts for Writing Code Video Lesson In this lesson, let’s take a look at some handy keyboard shortcuts that are useful when writing code. https://player.vimeo.com/video/ 323 yes no 2022-06-02T16:00:00+02:00 yes https://vueschool.io/lessons/vue-templates-in-vs-code-html 2026-03-20 monthly 0.8 Vue Templates in VS Code (HTML) Video Lesson The template section in Vue.js single file components is mostly made up of regular HTML. In this lesson, learn some tips & tricks for speeding up writing HTML in VS code with tools like Emmet, auto... https://player.vimeo.com/video/ 454 yes no 2022-06-16T16:00:00+02:00 yes https://vueschool.io/lessons/styling-vue-components-in-vs-code-css 2026-03-20 monthly 0.8 Styling Vue Components in VS Code (CSS) Video Lesson In this lesson, we take a look at some tools available in VS Code for efficiently styling your Vue.js components. https://player.vimeo.com/video/ 483 yes no 2022-06-16T16:00:00+02:00 yes https://vueschool.io/lessons/javascript-and-typescript-in-vs-code 2026-03-20 monthly 0.8 JavaScript and TypeScript in VS Code Video Lesson In this lesson, we take a look at some ways VS code helps us write and navigate JavaScript and TypeScript code more efficiently. https://player.vimeo.com/video/ 297 yes no 2022-06-16T16:00:00+02:00 yes https://vueschool.io/lessons/markdown-in-vs-code 2026-03-20 monthly 0.8 Markdown in VS Code Video Lesson In this lesson, we take a look at some of the features VS code provides for working with markdown files (.md files) and how we can boost it’s features even more with extensions. https://player.vimeo.com/video/ 550 yes no 2022-06-23T16:00:00+02:00 yes https://vueschool.io/lessons/version-control-and-git-in-vs-code 2026-03-20 monthly 0.8 Version Control and Git in VS Code Video Lesson In this lesson, we take a look managing your project git repos inside of VS code. https://player.vimeo.com/video/ 537 yes no 2022-06-23T16:00:00+02:00 yes https://vueschool.io/lessons/working-with-the-built-in-terminal 2026-03-20 monthly 0.8 Working with the Built in Terminal Video Lesson In this lesson, we take a look at some tips and tricks for working in VS Code’s built-in terminal. Besides, the built in functionality, the mac app [Fig.io](http://Fig.io) can really boost produc... https://player.vimeo.com/video/ 276 yes no 2022-06-23T16:00:00+02:00 yes https://vueschool.io/lessons/extensions-honorable-mentions 2026-03-20 monthly 0.8 Extensions: Honorable Mentions Video Lesson In this lesson, we take a look at a random selection of Visual Studio Code Extensions that have proved helpful for Daniel for both coding and development in general. https://player.vimeo.com/video/ 470 yes no 2022-06-30T16:00:00+02:00 yes https://vueschool.io/lessons/user-settings-workspace-settings-and-keybindings-in-vs-code 2026-03-20 monthly 0.8 User Settings, Workspace Settings, and Keybindings in VS Code Video Lesson In this lesson, we learn about the difference between User settings and Workspace settings in Visual Studio Code. Creating settings unique to a project is as simple as saving a `settings.json` file... https://player.vimeo.com/video/ 161 yes no 2022-06-30T16:00:00+02:00 yes https://vueschool.io/lessons/vs-code-course-conclusion 2026-03-20 monthly 0.8 Course Conclusion Video Lesson Thanks for watching the course! We hope you’ve learned a lot and are better prepared to use VS Code for developing your awesome Vue.js applications. https://player.vimeo.com/video/ 88 yes no 2022-06-30T16:00:00+02:00 yes https://vueschool.io/lessons/vue-snippets-in-visual-studio-code-part-2 2026-03-20 monthly 0.8 Vue Snippets in Visual Studio Code (Part 2) Video Lesson In this lesson, we’ll experiment with another popular snippet extensions for Visual Studio Code: Vue VSCode Snippets. Along the way, we’ll get a glimpse into how it’s approach differs from �... https://player.vimeo.com/video/ 324 yes no 2022-05-26T16:00:00+02:00 yes https://vueschool.io/lessons/working-with-npm-in-vs-code 2026-03-20 monthly 0.8 Working with NPM in VS Code Video Lesson In this lesson, let’s take a look at some extensions for integrating NPM into VS Code. https://player.vimeo.com/video/ 215 yes no 2022-06-16T16:00:00+02:00 yes https://vueschool.io/lessons/bonus-lesson-github-copilot-for-vue-developers 2026-03-20 monthly 0.8 Bonus Lesson! Github Copilot for Vue Developers Video Lesson In this lesson, we experiment with Github Copilot to see how useful it can be with Vue apps. https://player.vimeo.com/video/ 701 yes no 2024-12-04T14:16:00+01:00 no https://vueschool.io/courses/vueuse-for-everyone 2026-05-12 monthly 0.8 https://vueschool.io/lessons/intro-to-vueuse 2026-05-29 monthly 0.8 Intro to VueUse Video Lesson VueUse is a collection of hundreds of essential Vue Composition Utilities for interacting with various browser, sensor, animation, and state apis, plus more! https://player.vimeo.com/video/ 224 yes no 2022-03-31T16:00:00+02:00 no https://vueschool.io/lessons/installation-course-prerequisites 2026-05-29 monthly 0.8 Installation & Course Prerequisites Video Lesson In this lesson, I’ll give a quick overview of how lessons will work and go through a couple prerequisites that you should already know before starting. The short and sweet of it is that: https://player.vimeo.com/video/ 173 yes no 2022-03-31T16:00:00+02:00 yes https://vueschool.io/lessons/reactive-browser-wrappers-in-vueuse-usetitle 2026-05-29 monthly 0.8 Reactive Browser Wrappers in VueUse - useTitle Video Lesson In this lesson, we start getting hands on experience using VueUse with Vue.js 3. VueUse provides some convenient wrappers around common browser APIs in order work with those API’s in a reactive w... https://player.vimeo.com/video/ 208 yes no 2022-03-31T16:00:00+02:00 yes https://vueschool.io/lessons/reactive-browser-wrappers-in-vueuse-useclipboard 2026-05-29 monthly 0.8 Reactive Browser Wrappers in Vueuse - useClipboard Video Lesson In this lesson, we continue playing with a common browser API with VueUse. This time we work with useClipboard to reactively get the contents of the user’s clipboard in a Vue.js application. https://player.vimeo.com/video/ 245 yes no 2022-03-31T16:00:00+02:00 no https://vueschool.io/lessons/theming-with-vueuse-usedark-and-usecolormode 2026-05-29 monthly 0.8 Theming with VueUse useDark and useColorMode Video Lesson Besides simple wrappers to provide reactivity, VueUse also gives us composables that interact with several browser APIs at once, to make adding common site features easier. Two such composables are... https://player.vimeo.com/video/ 402 yes no 2022-03-31T16:00:00+02:00 no https://vueschool.io/lessons/the-keyboard-and-vueuse 2026-05-29 monthly 0.8 The Keyboard and VueUse Video Lesson In this lesson, we learn how to use VueUse’s onKeyStroke composable to react to user key strokes. No matter what’s focused in your Vue.js application, the events still behave as expected. https://player.vimeo.com/video/ 367 yes no 2022-04-07T16:00:00+02:00 no https://vueschool.io/lessons/the-keyboard-and-vueuse-part-2 2026-05-29 monthly 0.8 The Keyboard and VueUse (Part 2) Video Lesson In this lesson we play around with the useMagicKeys composable and see how easy it is to listen for key combinations in your Vue.js applications. https://player.vimeo.com/video/ 260 yes no 2022-04-07T16:00:00+02:00 yes https://vueschool.io/lessons/device-sensors-and-vueuse 2026-05-29 monthly 0.8 Device Sensors and VueUse Video Lesson In this lesson, we learn how utilize VueUse to tap into the different sensor’s on our user’s devices to find out things like: their battery status, whether or not they are online, and where the... https://player.vimeo.com/video/ 274 yes no 2022-04-07T16:00:00+02:00 yes https://vueschool.io/lessons/mouse-touch-with-vueuse 2026-05-29 monthly 0.8 Mouse & Touch with VueUse Video Lesson In this lesson, we examine how VueUse exposes data from the mouse and touch events in order to reactively work with them in your Vue.js applications. The functions that we try out include usePageLe... https://player.vimeo.com/video/ 514 yes no 2022-04-07T16:00:00+02:00 yes https://vueschool.io/lessons/scroll-and-vueuse 2026-05-29 monthly 0.8 Scroll and VueUse Video Lesson In this lesson, we play around with VueUse’s composables for interacting with the page scroll. Functions include useScroll and useInfiniteScroll but there are several others https://player.vimeo.com/video/ 369 yes no 2022-04-07T16:00:00+02:00 yes https://vueschool.io/lessons/media-and-vueuse 2026-03-29 monthly 0.8 Media and VueUse Video Lesson In this lesson, we utilize VueUse to share our screen in the browser. We also briefly discuss the solutions VueUse has for sharing video from your device’s camera and how to reactively take charg... https://player.vimeo.com/video/ 201 yes no 2022-04-07T16:00:00+02:00 yes https://vueschool.io/lessons/useinterval-and-useintervalfn-in-vueuse 2026-05-29 monthly 0.8 useInterval and useIntervalFn in VueUse Video Lesson In this lesson, we utilize the VueUse functions `useInterval` and `useIntervalFn` in order to perform actions every x number of milliseconds. Furthermore, we take advantage of the pause and resume... https://player.vimeo.com/video/ 284 yes no 2022-04-14T16:00:00+02:00 yes https://vueschool.io/lessons/create-an-animated-sprite-with-useintevalfn-and-useraffn 2026-03-29 monthly 0.8 Create an Animated Sprite with useIntevalFn and useRafFn Video Lesson In this lesson, we continue learning how to use the `useIntevalFn` composable from VueUse to create an animated sprite. Afterwards though, we pivot just a bit to see how you would accomplish the sa... https://player.vimeo.com/video/ 438 yes no 2022-04-14T16:00:00+02:00 yes https://vueschool.io/lessons/timeouts-and-vueuse 2026-03-29 monthly 0.8 Timeouts and VueUse Video Lesson In this lesson, we take a look at useTimeout and useTimeoutFn VueUse composables for performing actions after a specified period of time. These composables can be useful for automatically hiding al... https://player.vimeo.com/video/ 448 yes no 2022-04-14T16:00:00+02:00 yes https://vueschool.io/lessons/animating-time-with-vueuse 2026-03-29 monthly 0.8 Animating Time with VueUse Video Lesson In this lesson we animate time using the `useTimestamp` and `useNow` functions from VueUse. https://player.vimeo.com/video/ 360 yes no 2022-04-14T16:00:00+02:00 yes https://vueschool.io/lessons/ref-history-with-vueuse 2026-03-29 monthly 0.8 Ref History with VueUse Video Lesson In this lesson, we learn how to keep up with the value of a reactive ref over time with the useRefHistory composable. https://player.vimeo.com/video/ 524 yes no 2022-04-21T16:00:00+02:00 no https://vueschool.io/lessons/persistent-storage-with-vueuse 2026-03-29 monthly 0.8 Persistent Storage with VueUse Video Lesson In this lesson, we learn how to persist reactive data to local storage or session storage with VueUse. https://player.vimeo.com/video/ 304 yes no 2022-04-21T16:00:00+02:00 yes https://vueschool.io/lessons/vueuse-utilities-usefetch-and-reactify 2026-05-29 monthly 0.8 VueUse Utilities: useFetch and Reactify Video Lesson In this lesson, we take a look at `useFetch` for reactively making ajax requests and `reactfy` for turning any typical procedural function into a reactive one. https://player.vimeo.com/video/ 502 yes no 2022-04-21T16:00:00+02:00 no https://vueschool.io/lessons/vueuse-utilities-refautoreset-and-usebase64 2026-03-29 monthly 0.8 VueUse Utilities: refAutoReset and useBase64 Video Lesson In this lesson, we learn how to use `refAutoReset` to revert a Vue.js reactive ref back to a default value after x period of time. We also see how easy it is to implement an upload field with image... https://player.vimeo.com/video/ 328 yes no 2022-04-21T16:00:00+02:00 yes https://vueschool.io/lessons/dom-elements-and-the-window-with-vueuse 2026-03-29 monthly 0.8 DOM Elements and the Window with VueUse Video Lesson In this lesson, we sample a few composables from the elements category of VueUse. These composables are meant specifically for working with the window and native DOM elements with Vue.js. https://player.vimeo.com/video/ 352 yes no 2022-04-28T16:00:00+02:00 yes https://vueschool.io/lessons/vue-components-and-vueuse 2026-03-29 monthly 0.8 Vue Components and VueUse Video Lesson In this lesson, we learn how to prevent performance issues of very long lists with the VueUse composable `useVirtualScroll`. We also play around with `useVModel` to make working with Vue props, eve... https://player.vimeo.com/video/ 664 yes no 2022-05-05T16:00:00+02:00 yes https://vueschool.io/lessons/deconstruct-the-vueuse-usefavicon-composable 2026-03-29 monthly 0.8 Deconstruct the VueUse useFavicon Composable Video Lesson In this lesson, we look into the VueUse source code and deconstruct the `useFavicon` composable. This is a valuable exercise as it will help us better understand the make-up of a Vue.js composable,... https://player.vimeo.com/video/ 523 yes no 2022-05-05T16:00:00+02:00 yes https://vueschool.io/lessons/create-a-custom-usealertfavicon-composable 2026-03-29 monthly 0.8 Create a Custom useAlertFavicon Composable Video Lesson In this lesson, we build out a custom Vue.js composable using some of the things we learned from deconstructing VueUse’s `useFavicon` function. In it we pattern things after `useFavicon` and even... https://player.vimeo.com/video/ 682 yes no 2022-05-05T16:00:00+02:00 yes https://vueschool.io/lessons/vueuse-for-everyone-course-conclusion 2026-03-29 monthly 0.8 Course Conclusion Video Lesson Congrats! You've finished the “VueUse for Everyone” course. Now you’re ready to start using VueUse to enhance your own Vue.js applications. You might want to bookmark the VueUse docs and also... https://player.vimeo.com/video/ 126 yes no 2022-05-05T16:00:00+02:00 yes https://vueschool.io/lessons/transitions-and-vueuse 2026-03-29 monthly 0.8 Transitions and VueUse Video Lesson In this lesson, we examine how to use the `useTransition` composable from VueUse in order to transition between 2 different numbers. This comes in handy for Vue.js apps, when changing style values... https://player.vimeo.com/video/ 488 yes no 2022-04-14T16:00:00+02:00 yes https://vueschool.io/lessons/vueuse-utilities-computedasync-and-logic-utils 2026-03-29 monthly 0.8 VueUse Utilities: computedAsync and logic utils Video Lesson In this lesson, we learn how to make Vue.js computed properties asynchronous with `computedAsync` . We also learn about the convenient logic utility functions from VueUse for working with reactive... https://player.vimeo.com/video/ 347 yes no 2022-04-28T16:00:00+02:00 yes https://vueschool.io/lessons/create-an-image-carousel-with-vueuse 2026-03-29 monthly 0.8 Create an Image Carousel with VueUse Video Lesson In this lesson, we use the VueUse `useCycleList` composable to create a functional image carousel with a minimal amount of code. Besides, just image carousel’s this function has a number of vario... https://player.vimeo.com/video/ 254 yes no 2022-04-28T16:00:00+02:00 no https://vueschool.io/lessons/how-to-extend-a-vueuse-composable 2026-03-29 monthly 0.8 How to Extend a VueUse Composable Video Lesson In this lesson, we extend the VueUse `useCycleList` composable to add support for `isForward` and `isBackward` booleans. This allows us to create a nice backwards and fowards sliding transition for... https://player.vimeo.com/video/ 632 yes no 2022-04-22T19:00:00+02:00 yes https://vueschool.io/lessons/headless-dialogs-with-useconfirmdialog 2026-03-29 monthly 0.8 Headless Dialogs with useConfirmDialog Video Lesson Confirmation dialogs are common features of the modern day web app. There are many off the shelf components you could reach for to support them but why not use the VueUse package you probably alrea... https://player.vimeo.com/video/ 341 yes no 2023-05-25T15:12:00+02:00 no https://vueschool.io/lessons/usearraydifference-and-other-array-utilities 2026-03-29 monthly 0.8 useArrayDifference and Other Array Utilities Video Lesson Developers work alot with arrays. Why not work with them reactively as effeciently as possible! https://player.vimeo.com/video/ 183 yes no 2023-05-25T15:22:00+02:00 yes https://vueschool.io/lessons/editing-local-files-with-uselocalfilesystemaccess 2026-03-29 monthly 0.8 Editing Local Files with useLocalFileSystemAccess Video Lesson Reading, creating, and updating files on the local file system from the browser? Yes, it's possible! In this video, learn how to do it simply and effectively in your Vue.js project. https://player.vimeo.com/video/ 204 yes no 2023-05-25T15:22:00+02:00 yes https://vueschool.io/courses/typescript-with-vue-js-3 2026-05-12 monthly 0.8 https://vueschool.io/lessons/introduction-to-typescript-with-vue-js-3 2026-04-27 monthly 0.8 0RX9LeZsFLWd8Y4j21BQGsj4Npvv8p7CfRPpWzYQ.avif Introduction to TypeScript with Vue.js 3 Video Lesson In this lesson, we take a look at some of the benefits of using TypeScript with Vue.js including: https://player.vimeo.com/video/ 333 yes no 2022-03-03T16:00:00+01:00 no https://vueschool.io/lessons/typescript-and-vue-js-3-course-prerequisites-and-dependencies 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1386929720-0e6bda14154a44d390982593a88a9ef069d7975874fc651bb0bd457bfd4a1a6d-d_1280x720?r=pad Course PreRequisites and Dependencies Video Lesson In order to follow along with the course, there are several things you must know and some software that should be installed. In this lesson, we’ll cover what’s needed. https://player.vimeo.com/video/ 153 yes no 2022-03-03T16:00:00+01:00 yes https://vueschool.io/lessons/bootstrap-a-vue-js-and-typescript-project 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1386930501-52d141c4270e7471cb807c700e0b77eadc5124a79cd2e8e7db3c923e088b7b8c-d_1280x720?r=pad Bootstrap a Vue.js and TypeScript Project Video Lesson In this lesson, we learn how to start a TypeScript + Vue project via the command line with a tool called `create-vue`. We also download the boilerplate code to get the project setup with some prede... https://player.vimeo.com/video/ 144 yes no 2022-03-03T16:00:00+01:00 yes https://vueschool.io/lessons/setup-vs-code-for-typescript-and-vue 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1386931154-1502c29fad50244af3fc948823ee3aa60588ef3fd5d4ab370fc2b3ee1495fcb1-d_1280x720?r=pad Setup VS Code for TypeScript and Vue Video Lesson In this lesson, we learn how to setup VS Code with the Volar extension. Volar provides support for working with TypeScript in single file components, as well as other Vue features. https://player.vimeo.com/video/ 107 yes no 2022-03-03T16:00:00+01:00 yes https://vueschool.io/lessons/typescript-in-vue-components 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1386931865-2b68aa8668689ac1260d9de13ce47af09419a6a93d7e7e3ccefae31ec70b8254-d_1280x720?r=pad TypeScript in Vue Components Video Lesson In this lesson, we learn how to direct Vue Single File Components to work with typescript. https://player.vimeo.com/video/ 130 yes no 2022-03-03T16:00:00+01:00 no https://vueschool.io/lessons/typing-reactive-data 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1390617214-b1c35edec8088374d34baab103eef2445519d07f196a3b237466bc06af392c12-d_1280x720?r=pad Typing Reactive Data Video Lesson In this lesson, you learn how to type reactive data created with Vue’s reactive utility function. Strategies include relying on inferred types, using type assertion to provide more info inline, a... https://player.vimeo.com/video/ 317 yes no 2022-03-10T16:00:00+01:00 yes https://vueschool.io/lessons/typing-refs 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1390618419-080c1ab9223650ec88a169f1f5216fbda7c06ab093f8f292c466dd8a706546d0-d_1280x720?r=pad Typing Refs Video Lesson In this lesson, we learn how to type reactive refs in Vue.js. Typing reactive refs can often be done explicitly without any loss of type safety or clarity. Other times it’s important to explicitl... https://player.vimeo.com/video/ 420 yes no 2022-03-10T16:00:00+01:00 yes https://vueschool.io/lessons/typing-computed-props 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1390620065-d91ec49f4ddab6e46b427b53ec478cab3511a1860961cd9eb4fc914673119016-d_1280x720?r=pad Typing Computed Props Video Lesson In this lesson, we learn how computed props are implicitly typed based on their return values. We also examine a quick use case for explicitly typing computed props. Finally, we get the character c... https://player.vimeo.com/video/ 229 yes no 2022-03-10T16:00:00+01:00 yes https://vueschool.io/lessons/typing-event-handlers 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1390621107-87847911fd3a0f800a2a68d7ec25ddc902393736aa72b68555eba5827fe4429a-d_1280x720?r=pad Typing Event Handlers Video Lesson In this lesson, learn how to type DOM events and cast DOM event targets to specific element types with TypeScript in Vue.js. https://player.vimeo.com/video/ 387 yes no 2022-03-10T16:00:00+01:00 yes https://vueschool.io/lessons/declaring-component-events 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1390822935-c3fabc8a45112e1bdaa0d78ed988ed08e91a1e53c6848c45ef1ad7d0e04cbf8e-d_1280x720?r=pad Declaring Component Events Video Lesson In this lesson, we learn how to declare the events that could be emitted from a Vue component with `defineEmits`. We also learn how this increases the developer experience when using the component... https://player.vimeo.com/video/ 321 yes no 2022-03-10T16:00:00+01:00 yes https://vueschool.io/lessons/typing-component-events 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1394501150-ee6499f60237488f168f5291173362df98d668b50247588bf3a6c89e2a25e86e-d_1280x720?r=pad Typing Component Events Video Lesson In this lesson, we learn how to type the payload of component events in Vue and TypeScript. https://player.vimeo.com/video/ 320 yes no 2022-03-17T15:00:00+01:00 no https://vueschool.io/lessons/refactoring-in-typescript 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1394502951-2b871af0a8e9adfa9b91db9df311e33ae7992f478486faf9879777e7bbb9a24b-d_1280x720?r=pad Refactoring in TypeScript Video Lesson In this lesson, we do a little refactoring to our Vue.js project to make it less verbose and the journal entry more comprehensive. During the process, you get to see some of the benefits of refacto... https://player.vimeo.com/video/ 467 yes no 2022-03-17T15:00:00+01:00 yes https://vueschool.io/lessons/declaring-and-typing-component-props 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1394508301-7d44728afd811773955ce56d85060866b3fdb7c0d151b343950c99f2cf216ea6-d_1280x720?r=pad Declaring and Typing Component Props Video Lesson In this lesson, we’ll examine how to use TypeScript to define types for Vue component props. Along the way, you’ll also get a first hand look at the great DX this provides for interacting with... https://player.vimeo.com/video/ 587 yes no 2022-03-17T15:00:00+01:00 no https://vueschool.io/lessons/typing-template-refs 2026-01-14 monthly 0.8 https://i.vimeocdn.com/video/1394509704-761f588254ef1b21f91e24b86b8a2da109b333bdbe9d8e072195f88c21c57fd7-d_1280x720?r=pad Typing Template Refs Video Lesson In this lesson, we learn how to work with Vue’s template refs in TypeScript. Since template refs only exist after the component is mounted, it’s necessary to type template refs with a union typ... https://player.vimeo.com/video/ 116 yes no 2022-03-17T15:00:00+01:00 yes https://vueschool.io/lessons/typing-data-injected-via-vue-provide-inject 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1394512113-02a9b32ba9c8984ee4e6e9ec7999f72c53deadd1098076b8c4d77bdddf42328b-d_1280x720?r=pad Typing Data Injected via Vue’s Provide/Inject Video Lesson In this lesson, we learn how to use Vue’s provide/inject funcationality to inject reactive data from components higher up the component tree to components nested down the tree without the use of... https://player.vimeo.com/video/ 512 yes no 2022-03-24T15:00:00+01:00 yes https://vueschool.io/lessons/using-typescript-with-the-options-api-in-components 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1394514574-be39f1e99c2db59035ea090286afacb12bb0d4d7531e39b24778c4305faaf02d-d_1280x720?r=pad Using TypeScript with the Options API in Components Video Lesson In this lesson, we learn how to use TypeScript with the Vue.js Options API to type things such as component props, computed props, and events. https://player.vimeo.com/video/ 319 yes no 2022-03-24T15:00:00+01:00 no https://vueschool.io/lessons/augmenting-global-properties-and-custom-options 2026-01-14 monthly 0.8 https://i.vimeocdn.com/video/1394516731-3bbf6c74a303148299faeff88786ad760d73b2408111176b8c5d17450e05c4ac-d_1280x720?&r=pad&region=us Augmenting Global Properties and Custom Options Video Lesson In this lesson, we learn how to type Vue global custom properties with TypeScript. https://player.vimeo.com/video/688504319 286 yes no 2022-03-24T15:00:00+01:00 yes https://vueschool.io/lessons/typescript-with-vue-js-3-course-conclusion 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1394517464-eb9ba348f0bf63ccf2f879d9091a629f29854d99862685283ef17fc3a3d67430-d_1280x720?r=pad Course Conclusion Video Lesson Congrats! With the conclusion of this course, you’re ready to start using TypeScript to create scalable, type-safe applications with Vue.js. https://player.vimeo.com/video/ 65 yes no 2022-03-24T15:00:00+01:00 yes https://vueschool.io/lessons/challenge-advance-the-app 2026-04-27 monthly 0.8 https://i.vimeocdn.com/video/1391689649-fa3cc8308313224617149d93c1b62fbc2bd35028441f4ef76fb09a7283696f1a-d_1280x720?r=pad Challenge: Advance the App Video Lesson In this lesson, we take a quick break from learning new concepts and tackle a couple hands on challenges. While doing so, you’ll push the app forward, towards a functional journal app and also re... https://player.vimeo.com/video/ 468 yes no 2022-03-17T15:00:00+01:00 yes https://vueschool.io/courses/vue-js-fundamentals-with-the-composition-api 2026-02-19 monthly 0.8 https://vueschool.io/lessons/getting-started-with-vue-js-and-the-composition-api 2026-05-19 monthly 0.8 https://i.vimeocdn.com/video/1347541610-da5c6b194575680f8bc6dba364e711195021ce721e0d92d98ab2d874da349ba4-d_1280x720?r=pad Getting Started with Vue.js and the Composition API Video Lesson In the very first lesson of the Vue Fundamentals with the Composition API course, we take a look at the [official playground](https://sfc.vuejs.org) provided in the Vue.js docs and break down it's... https://player.vimeo.com/video/ 238 yes no 2022-02-14T22:25:00+01:00 no https://vueschool.io/lessons/vue-fundamentals-capi-vue-template-syntax-and-expressions 2026-05-19 monthly 0.8 https://i.vimeocdn.com/video/1347548319-90c11f4d34d1ce9a9ff5db3ea05ce6da40faee4ef056516b6e0d31b5f887eecf-d_1280x720?r=pad Vue Template Syntax and Expressions Video Lesson In the previous lesson, we briefly touched upon the templating syntax to bind Vue data to the DOM. https://player.vimeo.com/video/ 187 yes no 2022-02-14T22:25:00+01:00 no https://vueschool.io/lessons/vue-fundamentals-capi-list-rendering-in-vue 2026-05-19 monthly 0.8 https://i.vimeocdn.com/video/1347588211-dc23b76b88745a41febc67aefa1d68119e0624e4f7131d96eaf62e96f2d75476-d_1280x720?r=pad List Rendering in Vue Video Lesson In almost all applications there is a need to iterate or loop through a list of items and render them on the page. https://player.vimeo.com/video/ 424 yes no 2022-02-14T22:25:00+01:00 no https://vueschool.io/lessons/vue-fundamentals-capi-user-inputs-in-vue 2026-05-19 monthly 0.8 https://i.vimeocdn.com/video/1347589090-9f7ce4c63daf3a4f0f198a51faa435bd01bfe28ffb20dc35a41b956c0f89a4a6-d_1280x720?r=pad User Inputs in Vue Video Lesson We will continue to learn about the reactivity system in this lesson. You'll learn how to handle user inputs with the `v-model` directive. `v-model` gives super powers to text inputs, checkboxes, r... https://player.vimeo.com/video/ 567 yes no 2022-02-14T22:25:00+01:00 no https://vueschool.io/lessons/vue-fundamentals-capi-user-events-in-vue-3 2026-05-19 monthly 0.8 https://i.vimeocdn.com/video/1347590822-99051c0ad242f90f9b9158a748258fc49cdf89ce81e3cf8aa794e7499044c4be-d_1280x720?r=pad User Events in Vue 3 Video Lesson In this lesson, we'll learn how to respond to and handle user events with Vue's `v-on` directive. https://player.vimeo.com/video/ 441 yes no 2022-02-14T22:25:00+01:00 no https://vueschool.io/lessons/vue-fundamentals-capi-methods-in-vue-with-the-composition-api 2026-05-19 monthly 0.8 https://i.vimeocdn.com/video/1347542175-fd0864f5542c1c07d12960621236af85c4458861dd75473ed074fb83384f5239-d_1280x720?r=pad Methods in Vue with the Composition API Video Lesson It is handy to run JavaScript expressions directly in the template or a directive sometimes - but not always. https://player.vimeo.com/video/ 233 yes no 2022-02-14T22:25:00+01:00 no https://vueschool.io/lessons/vue-fundamentals-capi-conditionals-in-vue 2026-05-19 monthly 0.8 https://i.vimeocdn.com/video/1347594189-9956f376565ec63e06bbb8708890f7c8068964890a27195cd02ec57815d77a86-d_1280x720?r=pad Conditionals in Vue Video Lesson Conditional rendering is essential on any dynamic website. Vue.js offers two ways to render elements on our page conditionally, and in this lesson we're learning how the `v-if` and `v-else` directi... https://player.vimeo.com/video/ 253 yes no 2022-02-14T22:25:00+01:00 no https://vueschool.io/lessons/vue-fundamentals-capi-html-attribute-binding-in-vue 2026-05-19 monthly 0.8 https://i.vimeocdn.com/video/1347543566-dfbbfdff936d25c1accf3a7f4a21cb40251594f38f66a9331edfbfd02a2c825f-d_1280x720?r=pad HTML Attribute Binding in Vue Video Lesson We know how to render data in the DOM with Vue 3, and now it's time to take a closer look at how we can bind HTML attributes to our Vue data. https://player.vimeo.com/video/ 203 yes no 2022-02-14T22:25:00+01:00 no https://vueschool.io/lessons/vue-fundamentals-capi-dynamic-css-classes-with-vue 2025-07-23 monthly 0.8 https://i.vimeocdn.com/video/1347598417-6192a95ea8f6ac922a7a2dc5d558269b9d389e33ca3c1ba3ae651a515bc5b6e8-d_1280x720?r=pad Dynamic CSS Classes with Vue Video Lesson A common need and use case for attribute bindings is to manipulate the look of elements with CSS classes or style attributes. https://player.vimeo.com/video/ 441 yes no 2022-02-14T22:25:00+01:00 no https://vueschool.io/lessons/vue-fundamentals-capi-computed-properties-in-vue-with-the-composition-api 2026-05-19 monthly 0.8 https://i.vimeocdn.com/video/1347600369-c1bfc3aa9903d73104e296ff949a53669ced495cc35443e6ff72d1746c2c8d7e-d_1280x720?r=pad Computed Properties in Vue with the Composition API Video Lesson Computed properties are another powerful feature from Vue that allows us to transform or perform calculations on our data and then easily reuse the result as an up-to-date variable in our template.... https://player.vimeo.com/video/ 318 yes no 2022-02-14T22:25:00+01:00 no https://vueschool.io/lessons/vue-fundamentals-capi-reactivity-fundamentals 2026-05-19 monthly 0.8 https://i.vimeocdn.com/video/1347595485-0a67d50253a68da4631eb49d6616d15774add7d37879827517abe4ba21178b79-d_1280x720?r=pad Reactivity Fundamentals Video Lesson What's Vue without it's powerful reactivity system? In this lesson, we dive into reactive data in Vue and explore the different options for declaring reactive data with the `ref()` and `reactive()`... https://player.vimeo.com/video/ 306 yes no 2022-02-14T22:25:00+01:00 no https://vueschool.io/lessons/vue-fundamentals-capi-local-setup-with-vite 2026-05-19 monthly 0.8 https://i.vimeocdn.com/video/1347616559-ad5f67579529bde31ad6e0acb49c2fbedcb46d5995c2c789ab155e84cd9a2eb7-d_1280x720?r=pad Local Setup with Vite Video Lesson In this lesson, we learn how to get a Vue project setup on our local machine with Vite. https://player.vimeo.com/video/ 218 yes no 2022-02-14T22:25:00+01:00 no https://vueschool.io/lessons/vue-fundamentals-capi-course-conclusion 2026-05-19 monthly 0.8 https://i.vimeocdn.com/video/1370656022-1df18bf990f3f62575e9b6bee126a5762ee269e62e4b7bf423290932e5409317-d_1280x720?r=pad Course Conclusion Video Lesson Congrats! You've completed the course and are well on your way to using Vue for your next web development projects! https://player.vimeo.com/video/ 73 yes no 2022-02-14T22:25:00+01:00 no https://vueschool.io/lessons/the-vue-application-instance 2026-05-19 monthly 0.8 https://i.vimeocdn.com/video/1390716227-18c77a8d988683b7b0d1cf42658c2ea80e4ba64054745dafc4371d4c43bae3f7-d_1280x720?r=pad The Vue Application Instance Video Lesson In this lesson, we learn about the Vue application instance and how to mount it to the DOM. While working in the Vue.js playground, this was done behind the scenes for us. Working in the local proj... https://player.vimeo.com/video/ 200 yes no 2022-03-09T18:15:00+01:00 no https://vueschool.io/courses/application-monitoring-in-vue-js-with-sentry 2026-05-12 monthly 0.8 https://vueschool.io/lessons/what-is-application-monitoring-and-sentry 2026-03-28 monthly 0.8 What is Application Monitoring and Sentry? Video Lesson In this lesson, we introduce Application Monitoring with Sentry. Sentry allows us to know what issues customers are having in real time and provides an intuitive way to understand those issues, dir... https://player.vimeo.com/video/ 230 yes no 2022-01-06T16:00:00+01:00 no https://vueschool.io/lessons/create-a-sentry-project 2026-03-28 monthly 0.8 Create a Sentry Project Video Lesson In this lesson, we're introduced to the Sentry Dashboard where we create our very first project in Sentry, and connect it with our Vue.js codebase. https://player.vimeo.com/video/ 284 yes no 2022-01-06T16:00:00+01:00 no https://vueschool.io/lessons/capture-your-first-error-with-sentry 2026-03-28 monthly 0.8 Capture Your First Error with Sentry Video Lesson In this lesson, we capture our first error with Sentry from our Vue.js 3 application. We also learn how to turn browser console logs back on with the logErrors configuration options. Lastly, we get... https://player.vimeo.com/video/ 305 yes no 2022-01-06T16:00:00+01:00 no https://vueschool.io/lessons/releases-in-sentry-and-enabling-source-maps 2026-03-28 monthly 0.8 Releases in Sentry and Enabling Source Maps Video Lesson In this lesson, we learn about a few of the advantages of releases in Sentry. We also learn how to utilize releases to include source maps for more useful stacktraces. https://player.vimeo.com/video/ 553 yes no 2022-01-06T16:00:00+01:00 no https://vueschool.io/lessons/resolving-issues-in-sentry 2026-03-28 monthly 0.8 Resolving Issues in Sentry Video Lesson In this lesson, we take a look at the steps you should take in Sentry, once you've resolved an issue. https://player.vimeo.com/video/ 113 yes no 2022-01-06T16:00:00+01:00 no https://vueschool.io/lessons/enable-suspect-commits-in-sentry 2026-03-28 monthly 0.8 Enable Suspect Commits in Sentry Video Lesson In this lesson, we learn how to link issues to the git commits that likely caused them in the first place. This is very useful, for knowing who best can fix the issue and at what point in the code... https://player.vimeo.com/video/ 373 yes no 2022-01-06T16:00:00+01:00 no https://vueschool.io/lessons/environments-in-sentry 2026-03-28 monthly 0.8 Environments in Sentry Video Lesson In this lesson, we learn how to tag issues in Sentry based on the deployment environment. https://player.vimeo.com/video/ 233 yes no 2022-01-13T16:00:00+01:00 no https://vueschool.io/lessons/alerts-in-sentry 2026-03-28 monthly 0.8 Alerts in Sentry Video Lesson In this lesson, we learn how to setup alerts based on a variety of conditions in Sentry. Alerts can be sent to individuals, teams, or even "Issue Owners" based on technical aspects of the issue. https://player.vimeo.com/video/ 367 yes no 2022-01-13T16:00:00+01:00 no https://vueschool.io/lessons/identifying-end-users-in-sentry 2026-03-28 monthly 0.8 Identifying End Users in Sentry Video Lesson In this lesson, we learn how to pass a user from a Vue.js 3 application to Sentry in order to better identify who is experiencing particular issues. https://player.vimeo.com/video/ 162 yes no 2022-01-13T16:00:00+01:00 no https://vueschool.io/lessons/adding-context-to-issues-in-sentry 2026-03-28 monthly 0.8 Adding Context to Issues in Sentry Video Lesson In this lesson, we learn how to add arbitrary data to an issue in Sentry so that it's more informed about our Vue.js 3 application. This helps give more domain specific information to the developer... https://player.vimeo.com/video/ 283 yes no 2022-01-13T16:00:00+01:00 no https://vueschool.io/lessons/performance-monitoring-in-sentry 2026-03-28 monthly 0.8 Performance Monitoring in Sentry Video Lesson In this lesson, we learn how to monitor a Vue.js 3 application's performance with Sentry. https://player.vimeo.com/video/ 280 yes no 2022-01-13T16:00:00+01:00 no https://vueschool.io/lessons/release-health-in-sentry 2026-03-28 monthly 0.8 Release Health in Sentry Video Lesson In this lesson, we learn how to monitor the health of our Vue.js 3 application using release health in Sentry. https://player.vimeo.com/video/ 164 yes no 2022-01-13T16:00:00+01:00 no https://vueschool.io/lessons/application-monitoring-for-vue-with-sentry-course-conclusion 2026-03-28 monthly 0.8 Course Conclusion Video Lesson With the conclusion of this course, you're ready to start using Sentry to provide application monitoring for your Vue.js 3 applications. https://player.vimeo.com/video/ 63 yes no 2022-01-13T16:00:00+01:00 no https://vueschool.io/courses/rapid-development-with-vite 2026-05-12 monthly 0.8 https://vueschool.io/lessons/introduction-to-vite 2026-04-28 monthly 0.8 Introduction to Vite Video Lesson In this lesson, we take a look at what Vite is and the problems that it aims to solve. https://player.vimeo.com/video/ 238 yes no 2021-12-02T16:00:00+01:00 no https://vueschool.io/lessons/start-a-project-with-vite 2026-04-28 monthly 0.8 Start a Project with Vite Video Lesson In this lesson, we start a new Vue.js 3 project using Vite. The process is lightning fast. https://player.vimeo.com/video/ 110 yes no 2021-12-02T16:00:00+01:00 yes https://vueschool.io/lessons/the-vite-boilerplate-code 2026-05-02 monthly 0.8 The Vite Boilerplate Code Video Lesson In this lesson, we explore what Vite gives us out of the box when starting a new project. Some of the files and folders will look very familiar to users of Vue CLI but perhaps what's most notable i... https://player.vimeo.com/video/ 270 yes no 2021-12-02T16:00:00+01:00 yes https://vueschool.io/lessons/use-create-vue-to-start-a-vite-project 2026-05-02 monthly 0.8 Use Create Vue to Start a Vite Project Video Lesson In this lesson, we take use the create-vue tool to start a new Vite powered Vue project. With create-vue we get the interactive setup your probably used to with Vue CLI. https://player.vimeo.com/video/ 131 yes no 2021-12-02T16:00:00+01:00 yes https://vueschool.io/lessons/jump-start-with-vite-templates 2026-05-02 monthly 0.8 Jump Start with Vite Templates Video Lesson In this lesson we learn about using community provided templates to scaffold a Vite powered application with some more opinionated features. https://player.vimeo.com/video/ 175 yes no 2021-12-02T16:00:00+01:00 yes https://vueschool.io/lessons/css-and-vite 2026-05-02 monthly 0.8 CSS and Vite Video Lesson In this lesson we take a look at the different options for including CSS styles into our Vite powered projects. Options include using style tags in Vue SFCs, importing stylsheets using a JS import... https://player.vimeo.com/video/ 366 yes no 2021-12-02T16:00:00+01:00 no https://vueschool.io/lessons/css-preprocessors-and-vite 2026-05-02 monthly 0.8 CSS PreProcessors and Vite Video Lesson In this lesson, we learn how to use CSS pre-processors like SCSS with Vite and Vue. While CSS pre-processors are supported, Vite documentation does recommended using PostCSS to author future-standa... https://player.vimeo.com/video/ 377 yes no 2021-12-02T16:00:00+01:00 yes https://vueschool.io/lessons/css-modules-and-vite 2026-05-02 monthly 0.8 CSS Modules and Vite Video Lesson In this lesson, we learn how to use CSS modules to prevent style conflicts in Vite. https://player.vimeo.com/video/ 162 yes no 2021-12-09T16:00:00+01:00 yes https://vueschool.io/lessons/images-and-vite 2026-05-02 monthly 0.8 Images and Vite Video Lesson In this lesson, we examine how to import static assets like images into a Vite project. https://player.vimeo.com/video/ 504 yes no 2021-12-09T16:00:00+01:00 no https://vueschool.io/lessons/json-and-vite 2026-05-02 monthly 0.8 JSON and Vite Video Lesson In this lesson, we learn how Vite handles JSON imports for our Vue.js projects. https://player.vimeo.com/video/ 212 yes no 2021-12-09T16:00:00+01:00 no https://vueschool.io/lessons/glob-imports-in-vite 2026-05-02 monthly 0.8 Glob Imports in Vite Video Lesson In this lesson, we learn how to import multiple modules at one time using a glob pattern. https://player.vimeo.com/video/ 300 yes no 2021-12-09T16:00:00+01:00 no https://vueschool.io/lessons/typescript-and-vite 2026-05-02 monthly 0.8 Typescript and Vite Video Lesson In this lesson, we learn how to setup TypeScript to work with Vue on an existing Vite project. https://player.vimeo.com/video/ 302 yes no 2021-12-09T16:00:00+01:00 yes https://vueschool.io/lessons/vite-config 2026-05-02 monthly 0.8 Vite Config Video Lesson In this lesson, we learn how easy it is to configure Vite for our Vue.js projects. We sample a few configuration options like: `resolve.alias`, `build.assetsInlineLimit`, and more. https://player.vimeo.com/video/ 376 yes no 2021-12-09T16:00:00+01:00 yes https://vueschool.io/lessons/use-vite-to-build-for-production 2026-05-02 monthly 0.8 Use Vite to Build for Production Video Lesson In this lesson, we learn about how Vite bundles applications for production and why it even needs to do the bundling in the first place. https://player.vimeo.com/video/ 145 yes no 2021-12-16T16:00:00+01:00 yes https://vueschool.io/lessons/environment-variables-and-modes-in-vite 2026-05-02 monthly 0.8 Environment Variables and Modes in Vite Video Lesson In this lesson, we learn about the value of environment variables, how to define them with .env files, and how to access them in the source code. https://player.vimeo.com/video/ 361 yes no 2021-12-16T16:00:00+01:00 no https://vueschool.io/lessons/migrate-from-vue-cli-to-vite-part-1 2026-05-02 monthly 0.8 Migrate from Vue CLI to Vite Part 1 Video Lesson In this lesson, we spin up a Vue CLI project in order to walk through the steps of converting a Vue CLI project to Vite. https://player.vimeo.com/video/ 185 yes no 2021-12-23T16:00:00+01:00 yes https://vueschool.io/lessons/migrate-from-vue-cli-to-vite-part-2 2026-05-02 monthly 0.8 Migrate from Vue CLI to Vite Part 2 Video Lesson In this lesson we begin the process of migrating a Vue CLI project to use Vite. The first steps include: https://player.vimeo.com/video/ 397 yes no 2021-12-23T16:00:00+01:00 yes https://vueschool.io/lessons/create-a-vite-template 2026-05-02 monthly 0.8 Create a Vite Template Video Lesson In this lesson, we learn how to create a Vite template to quickly scaffold out new projects with opinionated defaults. In the process we also learn how to install Tailwind CSS in a Vite powered Vue... https://player.vimeo.com/video/ 455 yes no 2021-12-30T16:00:00+01:00 yes https://vueschool.io/lessons/use-a-vite-plugin 2026-05-02 monthly 0.8 Use a Vite Plugin Video Lesson In this lesson we take a look at some of the official Vite plugins available as well as some community maintained plugins. https://player.vimeo.com/video/ 160 yes no 2021-12-30T16:00:00+01:00 no https://vueschool.io/lessons/create-a-vite-plugin 2026-05-02 monthly 0.8 Create a Vite Plugin Video Lesson In this lesson, we introduce the basics of creating a Vite plugin by building a markdown to Vue component Vite plugin. https://player.vimeo.com/video/ 497 yes no 2021-12-30T16:00:00+01:00 no https://vueschool.io/lessons/vite-course-conclusion 2026-05-02 monthly 0.8 Course Conclusion Video Lesson Congrats! You’ve finished the course and now you’re equipped to use Vite for your Vue.js projects. https://player.vimeo.com/video/ 56 yes no 2021-12-30T16:00:00+01:00 yes https://vueschool.io/lessons/migrate-from-vue-cli-to-vite-part-3 2026-05-02 monthly 0.8 Migrate from Vue CLI to Vite Part 3 Video Lesson In this lesson, we finish mirgating a Vue CLI project to use Vite. These last steps include: https://player.vimeo.com/video/ 336 yes no 2021-12-23T16:00:00+01:00 yes https://vueschool.io/courses/pinia-the-enjoyable-vue-store 2026-05-12 monthly 0.8 https://vueschool.io/lessons/introduction-to-pinia 2026-05-19 monthly 0.8 https://i.vimeocdn.com/video/1352374025-29d221212e007c5406e34a819b77862d7c29f1f8f30e28301a6f584552fd467c-d_1280x720?r=pad Introduction to Pinia Video Lesson Hello! And welcome to *Pinia, The Enjoyable Vue Store*! In this lesson, we introduce you to Pinia and answer a few questions like: https://player.vimeo.com/video/ 334 yes no 2022-01-20T16:00:00+01:00 no https://vueschool.io/lessons/pinia-course-prerequisites-and-dependencies 2026-05-19 monthly 0.8 https://i.vimeocdn.com/video/1352375124-1bcc710a0c75ff0c2b11c1b543d311330674a8271e078d820452377363fc1892-d_1280x720?r=pad Course Prerequisites and Dependencies Video Lesson In order to follow along with the course, there are several things you must know and some software that should be installed. In this lesson, we’ll cover what’s needed. https://player.vimeo.com/video/ 230 yes no 2022-01-20T16:00:00+01:00 yes https://vueschool.io/lessons/install-and-setup-up-pinia 2026-05-19 monthly 0.8 https://i.vimeocdn.com/video/1352376100-cbd6430c5b6eb291d348002bc0878aff5cf25b8b4b65eafc1dcaf2093438e3f0-d_1280x720?r=pad Install and Setup Up Pinia Video Lesson In this lesson, we manually install Pinia to provide state management for our Vue.js 3 powered pineapple stand. https://player.vimeo.com/video/ 154 yes no 2022-01-20T16:00:00+01:00 yes https://vueschool.io/lessons/define-your-first-pinia-store 2026-05-19 monthly 0.8 https://i.vimeocdn.com/video/1352377550-af184fbd4b9b6e1219a3144f7e797de935e960aa9b7e5b8168a865aa70136477-d_1280x720?r=pad Define Your First Pinia Store Video Lesson In this lesson, we define the first Pinia store for our Vue.js 3 application. By default, Pinia is modular so we’re able to break up our stores right away into topic specific files, starting with... https://player.vimeo.com/video/ 329 yes no 2022-01-20T16:00:00+01:00 no https://vueschool.io/lessons/access-state-from-a-pinia-store 2026-05-19 monthly 0.8 https://i.vimeocdn.com/video/1362704416-c28a9edb410ab2d7ca326dacfc8eb6aa918755730cf98b1eb0da0d2107f6ab1b-d_1280x720?r=pad Access State from a Pinia Store Video Lesson In this lesson, we learn how to access the state defined in a Pinia store. For our Vue.js powered pineapple stand, we use the products state to populate the products on the page. https://player.vimeo.com/video/ 167 yes no 2022-02-03T16:00:00+01:00 no https://vueschool.io/lessons/synchronous-and-asynchronous-actions-in-pinia 2026-05-19 monthly 0.8 https://i.vimeocdn.com/video/1362708675-9e8d43745413a60b45a6d3b35f9561b3ceb09272e1fdabb51a7d73a6fca68576-d_1280x720?r=pad Synchronous and Asynchronous Actions in Pinia Video Lesson In this lesson, we learn how to use a Pinia action to mutate the store’s state. In doing so, we also observe a common pattern in Vue.js applications where data is fetched asyncronously from an AP... https://player.vimeo.com/video/ 187 yes no 2022-02-03T16:00:00+01:00 no https://vueschool.io/lessons/create-a-cart-store-and-the-pinia-devtools-timeline 2026-05-19 monthly 0.8 https://i.vimeocdn.com/video/1362709833-6e9f72f14aaa3963e62bfcc89cdf041f1906fe94b612cce7ad64e0242079c2a8-d_1280x720?r=pad Create a Cart Store and the Pinia Devtools Timeline Video Lesson In this lesson, we progress in adding functionality to our Vue.js powered Pineapple Stand with the beginnings of a working cart. https://player.vimeo.com/video/ 700 yes no 2022-02-03T16:00:00+01:00 yes https://vueschool.io/lessons/an-example-of-local-vs-global-state 2026-05-19 monthly 0.8 https://i.vimeocdn.com/video/1362711205-726cb450642c67300c18f440ffd1d9e25010c4f2e7976197ea41f4d58dcf3a78-d_1280x720?r=pad An Example of Local Vs Global State Video Lesson In this lesson, we take a breather from coding out the Pineapple Stand. Instead we step back, and examine a great example of when state should be defined locally at the component level instead of i... https://player.vimeo.com/video/ 141 yes no 2022-02-03T16:00:00+01:00 yes https://vueschool.io/lessons/getters-in-pinia 2026-05-19 monthly 0.8 https://i.vimeocdn.com/video/1364332161-1d647ba936dc2501592559bce07cd9e376772e28e8b518fde5f26b5644bce606-d_1280x720?r=pad Getters in Pinia Video Lesson In this lesson, we learn about using getters in Pinia to provide computed data based on the state of the store. https://player.vimeo.com/video/ 397 yes no 2022-02-10T16:00:00+01:00 no https://vueschool.io/lessons/dynamic-getters-and-displaying-the-cart-items 2026-05-19 monthly 0.8 https://i.vimeocdn.com/video/1364338827-7d540041c33d1995367008c14ce7e589ae7a6b5728bf7387f0c327079407210a-d_1280x720?r=pad Dynamic Getters and Displaying the Cart Items Video Lesson In this lesson, we use the power of Pinia and Vue.js to display the items in our cart grouped together with a count and subtotal. https://player.vimeo.com/video/ 444 yes no 2022-02-10T16:00:00+01:00 yes https://vueschool.io/lessons/reset-the-state-in-pinia 2026-05-19 monthly 0.8 https://i.vimeocdn.com/video/1364342974-1190aa72bf2cd1c95f7db37985f5be620494ca89ecaf107d688f06597e6ed021-d_1280x720?r=pad Reset the State in Pinia Video Lesson In this lesson, we use Pinia’s $reset function to implement a clear cart button for our Pineapple Stand. https://player.vimeo.com/video/ 80 yes no 2022-02-10T16:00:00+01:00 yes https://vueschool.io/lessons/challenge-cart-modifications 2026-05-19 monthly 0.8 https://i.vimeocdn.com/video/1364344329-ed154c6cdc0d7e2983e74d59399c9a36d7010e826f1acae6ff64b63c5380012f-d_1280x720?r=pad Challenge: Cart Modifications Video Lesson In this lesson, we take some time to get a few of the neglected features of the cart actually functioning. Along the way you get a valuable opporunity to practice what you’ve learned so far and t... https://player.vimeo.com/video/ 354 yes no 2022-02-10T16:00:00+01:00 yes https://vueschool.io/lessons/access-stores-from-other-stores 2026-05-19 monthly 0.8 https://i.vimeocdn.com/video/1364350288-6fada4292835332dd1c0a1abbb56e065be28cd42bad452593cdb61f170597315-d_1280x720?r=pad Access Stores from Other Stores Video Lesson In this lesson, we learn how to access a Pinia store from another Pinia store. Thankfully, with Pinia the process is quite intuitive and works the same way as using the store in a Vue.js component. https://player.vimeo.com/video/ 222 yes no 2022-02-10T16:00:00+01:00 yes https://vueschool.io/lessons/access-pinia-state-in-the-options-api 2026-05-20 monthly 0.8 https://i.vimeocdn.com/video/1365175926-f17feaf3ad15d287ce2fac38ac9f0e0ed5bd425a3f899c006d689563dc055815-d_1280x720?r=pad Access Pinia State in the Options API Video Lesson In this lesson, we learn how to access state from a Pinia store using the options API. This is possible with the Pinia helper functions `mapState` and `mapWritableState`. https://player.vimeo.com/video/ 397 yes no 2022-02-17T17:03:00+01:00 no https://vueschool.io/lessons/access-pinia-actions-in-the-options-api 2026-05-19 monthly 0.8 https://i.vimeocdn.com/video/1365179327-70664e5c11172c0a6af266aa12b09b2527bb785ff13ceedb1a658520ffca7795-d_1280x720?r=pad Access Pinia Actions in the Options API Video Lesson In this lesson, we learn how to call actions from a Pinia store in a Vue.js component setup with the options API. https://player.vimeo.com/video/ 172 yes no 2022-02-17T17:03:00+01:00 no https://vueschool.io/lessons/challenge-part-2-setting-item-counts-in-the-cart 2026-05-19 monthly 0.8 https://i.vimeocdn.com/video/1364348880-65d2f6bd8cce662c9277360b29aa0a03c180c2462aad7db68046dbc58794244f-d_1280x720?r=pad Challenge Part 2: Setting Item Counts in the Cart Video Lesson In this lesson, we continue with another hands on Pinia challenge. https://player.vimeo.com/video/ 343 yes no 2022-02-10T16:00:00+01:00 yes https://vueschool.io/lessons/using-composables-in-the-pinia-state 2026-05-20 monthly 0.8 https://i.vimeocdn.com/video/1369941883-974c01faf929ec9a4520ea9aa561bfe90df447593d8f21726083eb94956319bb-d_1280x720?r=pad Use Composables in the Pinia State Video Lesson In this lesson, we combine the power of composables with the Pinia state in order to give our store persistence in local storage. https://player.vimeo.com/video/ 192 yes no 2022-02-24T16:00:00+01:00 yes https://vueschool.io/lessons/preserve-state-with-hot-module-replacement 2026-05-19 monthly 0.8 https://i.vimeocdn.com/video/1369928142-508268ab7f0db3cf18ddadff2d03bb5a13717e7f34aba5dd61d2e3a186b0279d-d_1280x720?r=pad Preserve State with Hot Module Replacement Video Lesson In this lesson, we learn how to make HMR work for our Pinia stores. Doing so, means changes to the code can ship directly to the browser, while keeping the current state intact and making code chan... https://player.vimeo.com/video/ 224 yes no 2022-02-24T16:00:00+01:00 yes https://vueschool.io/lessons/subscribe-to-the-state 2026-05-19 monthly 0.8 https://i.vimeocdn.com/video/1369932772-0c3adcd380b50f15ba3cb3c2681c0de5206c31b3e77cac8dfef65565d7a54ac8-d_1280x720?r=pad Subscribe to the State Video Lesson In this lesson, we utilize the Pinia $subscribe method to keep watch on the cartStore’s state in order to power a undo/redo feature for our Pineapple stand. https://player.vimeo.com/video/ 590 yes no 2022-02-24T16:00:00+01:00 yes https://vueschool.io/lessons/subscribing-to-actions 2026-05-19 monthly 0.8 https://i.vimeocdn.com/video/1369929573-77f13d41902e51b5e6f8d624ca22f849ccfe1ff9df95b4009b851c1bf4820cfe-d_1280x720?r=pad Subscribing to Actions Video Lesson In this lesson, we learn how to subscribe to Pinia actions in order to perform custom side effects on the run, completion, and/or error of an action. https://player.vimeo.com/video/ 282 yes no 2022-02-24T16:00:00+01:00 yes https://vueschool.io/lessons/pinia-plugins 2026-05-20 monthly 0.8 https://i.vimeocdn.com/video/1369945151-cf054ddbee7e0460649b09f33ef234b47b9f910abc7156459439347e68beeff5-d_1280x720?r=pad Pinia Plugins Video Lesson In this lesson, we create a Pinia plugin to provide reusable undo/redo functionality for our stores. With Pinia plugins you are able do a wide variety of things including: https://player.vimeo.com/video/ 552 yes no 2022-02-24T16:00:00+01:00 yes https://vueschool.io/lessons/access-pinia-getters-in-the-options-api 2026-05-19 monthly 0.8 https://i.vimeocdn.com/video/1365177963-e77a07573f7f34788c37bfff3bf386d81d138c7f3f4e10518a51e77e71567e8b-d_1280x720?r=pad Access Pinia Getters in the Options API Video Lesson In this lesson, we learn how to access getters from a Pinia store using the options API. This is possible with the Pinia helper functions `mapState`. https://player.vimeo.com/video/ 114 yes no 2022-02-17T16:00:00+01:00 no https://vueschool.io/lessons/subscribe-to-the-state-part-2 2026-05-20 monthly 0.8 https://i.vimeocdn.com/video/1369933251-b673d2c4e47b729e526dab538d57ed96bb0ed5a19313d17f911acdee76290459-d_1280x720?r=pad Subscribe to the State (Part 2) Video Lesson In this lesson, we finish up our undo/redo feature by implementing redo. https://player.vimeo.com/video/ 312 yes no 2022-02-24T16:00:00+01:00 yes https://vueschool.io/lessons/pinia-the-enjoyable-vue-store-course-conclusion 2026-05-20 monthly 0.8 https://i.vimeocdn.com/video/1369926390-dbd6d648f32c3e395ef9c7e48bf9c3c674d10730b6fa1fb4d0744e5063997b7d-d_1280x720?r=pad Course Conclusion Video Lesson Congrats! With the conclusion of this course, you’re ready to start using Pinia for state management in your Vue.js applications! https://player.vimeo.com/video/ 78 yes no 2022-02-24T16:00:00+01:00 yes https://vueschool.io/courses/typescript-fundamentals 2026-05-12 monthly 0.8 https://vueschool.io/lessons/typescript-fundamentals-introduction-to-typescript 2026-05-02 monthly 0.8 Introduction to TypeScript Video Lesson Welcome to the TypeScript Fundamentals course! https://player.vimeo.com/video/ 160 yes no 2021-10-21T16:00:00+02:00 no https://vueschool.io/lessons/typescript-fundamentals-what-is-static-typing-in-typescript 2026-05-02 monthly 0.8 What is Static Typing in TypeScript? Video Lesson JavaScript is a dynamically typed language. While this makes it very flexible, it also can cause issues. https://player.vimeo.com/video/ 128 yes no 2021-10-21T16:00:00+02:00 yes https://vueschool.io/lessons/typescript-fundamentals-implicit-and-explicit-types-in-typescript 2026-05-02 monthly 0.8 Implicit and Explicit Types in TypeScript Video Lesson In this lesson we compare implicit and explicit types in TypeScript. https://player.vimeo.com/video/ 233 yes no 2021-10-21T16:00:00+02:00 yes https://vueschool.io/lessons/typescript-fundamentals-array-of-types-in-typescript 2026-05-02 monthly 0.8 Array of Types in TypeScript Video Lesson In this lesson, we learn how to define array types in TypeScript. https://player.vimeo.com/video/ 131 yes no 2021-10-21T16:00:00+02:00 yes https://vueschool.io/lessons/typescript-fundamentals-functions-type-parameters-and-returns-in-typescript 2026-05-02 monthly 0.8 Functions: Type Parameters and Returns In TypeScript Video Lesson In this lesson we lean how to define the type of function parameters, ensuring those who call the function provide proper data. We also define the type of what is returned from the function. https://player.vimeo.com/video/ 181 yes no 2021-10-28T16:00:00+02:00 yes https://vueschool.io/lessons/typescript-fundamentals-union-types-in-typescript 2026-05-02 monthly 0.8 Union Types in TypeScript Video Lesson In this lesson, we learn about union types in TypeScript. https://player.vimeo.com/video/ 162 yes no 2021-10-28T16:00:00+02:00 yes https://vueschool.io/lessons/typescript-fundamentals-literal-types-in-typescript 2026-05-02 monthly 0.8 Literal Types In TypeScript Video Lesson In this lesson, we learn how literal types work in TypeScript and how to use them to define a limited set of options for a function parameter. https://player.vimeo.com/video/ 128 yes no 2021-10-28T16:00:00+02:00 yes https://vueschool.io/lessons/typescript-fundamentals-type-aliases-in-typescript 2026-05-02 monthly 0.8 Type Aliases in TypeScript Video Lesson In this lesson, we begin creating types of our own using type aliases in TypeScript. https://player.vimeo.com/video/ 146 yes no 2021-11-04T15:00:00+01:00 yes https://vueschool.io/lessons/typescript-fundamentals-defining-interfaces-in-typescript 2026-05-02 monthly 0.8 Defining Interfaces in TypeScript Video Lesson In this lesson we learn how to mold our objects into predictable shapes using TypeScript interfaces. https://player.vimeo.com/video/ 170 yes no 2021-11-04T15:00:00+01:00 yes https://vueschool.io/lessons/typescript-fundamentals-using-interfaces-in-typescript 2026-05-02 monthly 0.8 Using Interfaces in TypeScript Video Lesson In this lesson we use our interfaces in order to make the input and output of a purchaseItem function predictable. https://player.vimeo.com/video/ 170 yes no 2021-11-04T15:00:00+01:00 yes https://vueschool.io/lessons/typescript-fundamentals-enums-in-typescript 2026-05-02 monthly 0.8 Enums in TypeScript Video Lesson In this lesson, we learn about using Enums in TypeScript to create a group of constants. https://player.vimeo.com/video/ 234 yes no 2021-11-04T15:00:00+01:00 yes https://vueschool.io/lessons/typescript-fundamentals-classes-in-typescript 2026-05-02 monthly 0.8 Classes in TypeScript Video Lesson In this lesson we'll use TypeScript types to make class properties and methods predictable. https://player.vimeo.com/video/ 267 yes no 2021-11-11T16:00:00+01:00 yes https://vueschool.io/lessons/typescript-fundamentals-class-access-modifiers-in-typescript 2026-05-02 monthly 0.8 Class Access Modifiers in TypeScript Video Lesson In this lesson, we learn how to use TypeScript access modifiers to limit when class methods and properties are accessible. https://player.vimeo.com/video/ 172 yes no 2021-11-11T16:00:00+01:00 yes https://vueschool.io/lessons/typescript-fundamentals-type-assertions-in-typescript 2026-05-02 monthly 0.8 Type Assertions in TypeScript Video Lesson In this lesson, we learn how to use Type Assertions to provide hints to TypeScript about certain types when we know better than it does. https://player.vimeo.com/video/ 200 yes no 2021-11-18T16:00:00+01:00 yes https://vueschool.io/lessons/typescript-fundamentals-generics-in-typescript 2026-05-02 monthly 0.8 Generics in TypeScript Video Lesson In this lesson, we learn how to use generics to create a function that accepts a variable type input and returns data of the exact same type. https://player.vimeo.com/video/ 387 yes no 2021-11-18T16:00:00+01:00 yes https://vueschool.io/lessons/typescript-fundamentals-setting-up-typescript-locally 2026-05-02 monthly 0.8 Setting up TypeScript Locally Video Lesson In this lesson, we learn how to download the TypeScript compiler locally for use with your favorite IDE and other development tools. https://player.vimeo.com/video/ 204 yes no 2021-11-25T16:00:00+01:00 yes https://vueschool.io/lessons/typescript-fundamentals-configuring-typescript-with-tsconfig-json 2026-05-02 monthly 0.8 Configuring TypeScript with tsconfig.json Video Lesson In this lesson, we learn how to use tsconfig.json to provide a variety of different configuration options. https://player.vimeo.com/video/ 375 yes no 2021-11-25T16:00:00+01:00 yes https://vueschool.io/lessons/typescript-fundamentals-course-conclusion 2026-05-02 monthly 0.8 Course Conclusion Video Lesson With the conclusion of this course, you've masted the basics of TypeScript. Be on the lookout for our upcoming "Vue.js 3 with TypeScript" course to learn how to use TypeScript in your Vue.js projec... https://player.vimeo.com/video/ 66 yes no 2021-11-25T16:00:00+01:00 yes https://vueschool.io/lessons/typescript-fundamentals-extending-classes-in-typescript 2026-05-02 monthly 0.8 Extending Classes in TypeScript Video Lesson In this lesson, we learn how to extend classes in TypeScript to consolidate shared logic to one place and keep child classes concerned only with the things that are unique to each class. https://player.vimeo.com/video/ 198 yes no 2021-11-11T16:00:00+01:00 yes https://vueschool.io/lessons/typescript-fundamentals-implementing-interfaces-on-classes-in-typescript 2026-05-02 monthly 0.8 Implementing Interfaces on Classes in TypeScript Video Lesson In this lesson, we learn how to use interfaces along with classes to ensure that our classes provide particular properties and methods. https://player.vimeo.com/video/ 246 yes no 2021-11-11T16:00:00+01:00 yes https://vueschool.io/lessons/typescript-fundamentals-functions-parameter-destructuring-void-and-optional-params-in-typescript 2026-05-02 monthly 0.8 Functions: Parameter Destructuring, Void, and Optional Params in TypeScript Video Lesson In this lesson we learn more about working with functions in TypeScript including: https://player.vimeo.com/video/ 133 yes no 2021-10-28T16:00:00+02:00 yes https://vueschool.io/lessons/typescript-fundamentals-extending-interfaces-in-typescript 2026-05-02 monthly 0.8 Extending Interfaces in TypeScript Video Lesson In this lesson, we learn how to extend interfaces from other interfaces to create custom data hierarchies. https://player.vimeo.com/video/ 194 yes no 2021-11-04T15:00:00+01:00 yes https://vueschool.io/lessons/typescript-fundamentals-the-unknown-type-in-typescript 2026-05-02 monthly 0.8 The Unknown Type in Typescript Video Lesson In this lesson, we learn to combine the unknown type with type assertions to force callers of our functions to think about the returned type and explicitly state it. https://player.vimeo.com/video/ 83 yes no 2021-11-18T16:00:00+01:00 yes https://vueschool.io/lessons/typescript-fundamentals-advanced-narrowing-in-typescript 2026-05-02 monthly 0.8 Advanced Narrowing in TypeScript Video Lesson In this lesson, we learn how to narrow the type of a variable to a more specific type using type guards like typeof, in, and instanceof. https://player.vimeo.com/video/ 373 yes no 2021-11-18T16:00:00+01:00 yes https://vueschool.io/courses/vue-3-single-file-components 2026-05-12 monthly 0.8 https://vueschool.io/lessons/vue-3-introduction-to-single-file-components 2026-03-25 monthly 0.8 Introduction to Single File Components Video Lesson In this lesson we learn about some of the drawbacks of global components and components defined outside .vue files. We also learn how to structure our Single File Components and get a brief glimpse... https://player.vimeo.com/video/ 302 yes no 2021-06-23T17:05:00+02:00 no https://vueschool.io/lessons/vue-3-introduction-to-vue-cli-4 2026-03-25 monthly 0.8 Introduction to Vue-CLI 4 Video Lesson When we’re learning about Vue’s Single File Components, we also need to learn how to use a JavaScript bundler, like [Webpack](https://webpack.js.org/). https://player.vimeo.com/video/ 519 yes no 2021-06-23T17:05:00+02:00 yes https://vueschool.io/lessons/vue-3-create-your-first-single-file-component 2026-03-25 monthly 0.8 Create Your First Single File Component Video Lesson In this lesson, we’ll learn about the structure of a Vue.js 3 Single File Component, which is the `template`, `script`, and `style`. https://player.vimeo.com/video/ 206 yes no 2021-06-23T17:05:00+02:00 yes https://vueschool.io/lessons/vue-3-importing-single-file-components 2026-03-25 monthly 0.8 Importing Single File Components Video Lesson In this lesson, we’ll learn how we can import and reuse our Vue.js 3 Single File Components in other components. https://player.vimeo.com/video/ 186 yes no 2021-06-23T17:05:00+02:00 yes https://vueschool.io/lessons/vue-3-using-css-pre-processors-with-single-file-components 2026-03-25 monthly 0.8 Using CSS Pre-Processors with Single File Components Video Lesson Vue-cli makes it very easy for us to use pre-processors like Pug, Less, Stylus, or Sass with our Single File Components. https://player.vimeo.com/video/ 258 yes no 2021-06-23T17:05:00+02:00 yes https://vueschool.io/lessons/vue-3-scoped-styles 2026-03-25 monthly 0.8 Scoped Styles Video Lesson Scoped styles allow us to apply CSS only to the elements within the current component. This ultimately enables us to mix local component and global application styles. https://player.vimeo.com/video/ 258 yes no 2021-06-23T17:06:00+02:00 yes https://vueschool.io/lessons/vue-3-organizing-single-file-components 2026-03-25 monthly 0.8 Organizing Single File Components Video Lesson Proper file organization is essential for all applications, and organizing single file components in your Vue.js 3 project is no exception. https://player.vimeo.com/video/ 683 yes no 2021-06-23T17:05:00+02:00 yes https://vueschool.io/lessons/vue-3-loading-components-asyncronously 2026-03-25 monthly 0.8 Loading Components Asyncronously Video Lesson In this lesson, we'll learn how to lazy-load Vue.js 3 components to improve performance. https://player.vimeo.com/video/ 639 yes no 2021-06-23T17:06:00+02:00 yes https://vueschool.io/courses/vue-js-3-components-fundamentals 2026-05-12 monthly 0.8 https://vueschool.io/lessons/vue-3-intro-to-components 2026-03-29 monthly 0.8 Intro to Vue 3 Components Video Lesson In this lesson, we'll learn about Vue components. We'll get an introduction to what a component is, why we need components, and how we can create and use a component in our Vue.js 3 applications. https://player.vimeo.com/video/ 220 yes no 2021-06-23T17:02:00+02:00 no https://vueschool.io/lessons/vue-3-component-template 2026-03-29 monthly 0.8 Vue Component Template Video Lesson In this lesson, we're going to learn about component templates in Vue 3. The template is where we define our HTML and general markup for our component. We also bind our component's data to the DOM... https://player.vimeo.com/video/ 136 yes no 2021-06-23T17:03:00+02:00 no https://vueschool.io/lessons/vue-3-reusable-components-with-props 2026-03-29 monthly 0.8 Reusable Components with Props Video Lesson In this lesson, we'll see a realistic use case for reusable components and learn about Vue.js 3 component [props](https://v3.vuejs.org/guide/component-props.html). https://player.vimeo.com/video/ 544 yes no 2021-06-23T17:03:00+02:00 no https://vueschool.io/lessons/vue-3-nested-components-in-vue 2026-03-29 monthly 0.8 Nested Components In Vue Video Lesson Vue.js 3 components allow us to encapsulate functionality and easily reuse them in multiple places in our applications. It is common to have components inside other components to compose the bigger... https://player.vimeo.com/video/ 168 yes no 2021-06-23T17:03:00+02:00 no https://vueschool.io/lessons/vue-3-global-vs-local-vue-components 2026-03-29 monthly 0.8 Global vs Local Vue Components Video Lesson Vue.js 3 allows us to register components both globally and locally. In this lesson, we'll learn the difference between the two types and how it can affect the build size and performance of your ap... https://player.vimeo.com/video/ 275 yes no 2021-06-23T17:03:00+02:00 no https://vueschool.io/lessons/vue-3-communication-between-vue-components-with-custom-events 2026-03-29 monthly 0.8 Communication Between Vue Components with Custom Events Video Lesson We know how to pass data to a child component through props in Vue.js 3. In this lesson, we'll learn how to communicate from a child to a parent component through [custom events](https://v3.vuejs.o... https://player.vimeo.com/video/ 587 yes no 2021-06-23T17:03:00+02:00 no https://vueschool.io/lessons/vue-3-component-naming-best-practices-in-vue 2026-03-29 monthly 0.8 Component Naming Best Practices In Vue Video Lesson In this lesson, we'll learn the best practices of naming our Vue.js 3 components. By following the best practices and official [Vue.js Style Guide](https://vuejs.org/style-guide/) our applications... https://player.vimeo.com/video/ 544 yes no 2021-06-23T17:03:00+02:00 no https://vueschool.io/lessons/vue-3-component-lifecycle-hooks 2026-03-29 monthly 0.8 Vue Component Lifecycle Hooks Video Lesson In this lesson, we learn what Vue.js 3 component lifecycle hooks are and how we can use them. If you want to learn more about Vue.js lifecycle hooks, we recommend our [Understanding the Vue.js Life... https://player.vimeo.com/video/ 191 yes no 2021-06-23T17:03:00+02:00 no https://vueschool.io/lessons/vue-3-component-slots 2026-03-29 monthly 0.8 Vue Component Slots Video Lesson In this lesson, we'll learn how to pass HTML to our Vue.js 3 components using slots. Slots are an awesome feature of Vue.js, and this lesson will teach you what you need to know to get started. https://player.vimeo.com/video/ 598 yes no 2021-06-23T17:04:00+02:00 no https://vueschool.io/lessons/vue-3-build-a-github-user-profile-vue-component 2026-03-29 monthly 0.8 Build a Github User Profile Vue Component Video Lesson This lesson is a component exercise lesson, where we're going to use everything we've learned about Vue.js 3 components so far. https://player.vimeo.com/video/ 596 yes no 2021-06-23T17:04:00+02:00 no https://vueschool.io/lessons/vue-3-build-a-notification-vue-component 2026-03-29 monthly 0.8 Build a Notification Vue Component Video Lesson This lesson is also a component exercise lesson, where we're going to use everything we've learned about Vue.js 3 components so far. https://player.vimeo.com/video/ 486 yes no 2021-06-23T17:04:00+02:00 no https://vueschool.io/courses/vue-router-4-for-everyone 2026-05-12 monthly 0.8 https://vueschool.io/lessons/introduction-to-vue-router-4 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1154312071-05d8001a74c4fb8bb3d72416857e361874947ff4014d1629ea58314e870a3d4c-d_1280x720?r=pad Introduction to Vue Router 4 Video Lesson In this lesson, we take a look at the Vue.js application we're going to build together throughout this course. You'll see Vue Router 4 in action as we browse through the application pages, use a ba... https://player.vimeo.com/video/ 227 yes no 2021-06-03T14:32:00+02:00 no https://vueschool.io/lessons/creating-the-project-with-vite-vite-only 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1154332929-6f1ad49800129fe65d4447150410034e2480c9ef8640eef732babbbc3b472cdf-d_1280x720?r=pad Creating the Project with Vite (Vite Only) Video Lesson In this lesson, we'll use the modern build tool Vite, to scaffold our Vue.js project. Vite provides a faster and leaner development experience that is well suited to our Vue School Travel App. https://player.vimeo.com/video/ 191 yes no 2021-06-03T14:43:00+02:00 no https://vueschool.io/lessons/the-scaffolded-codebase-vite-only 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1840128614-2013115fa3b96a55d94aa613b730e8ec7c90b122afcbd146447214bcee6c0622-d_1280x720?r=pad The Scaffolded Codebase (Vite Only) Video Lesson In this lesson, we take a look at the files that Vite produces for us. We also configure Vite to support the `@` alias that you're probably used to using if you're coming from the Vue CLI. https://player.vimeo.com/video/ 319 yes no 2021-06-03T14:43:00+02:00 no https://vueschool.io/lessons/installing-and-setting-up-vue-router-with-vite-vite-only 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1173314540-7366fc469db550fbd6270e7f2fde30a942014f140c804ca0505a07ffb4212315-d_1280x720?r=pad Installing and Setting Up Vue Router with Vite (Vite Only) Video Lesson In this lesson, we'll learn how to install and set up the project with Vite. https://player.vimeo.com/video/ 719 yes no 2021-06-03T14:43:00+02:00 no https://vueschool.io/lessons/creating-the-project-with-vue-cli-vue-cli-only 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1154312387-36969e02e7169192fd64cf554bb90ebaccab8065819e799e349f6a9c962912a7-d_1280x720?r=pad Creating the Project with Vue CLI (Vue CLI Only) Video Lesson In this lesson, we use the more traditional build tool Vue CLI. Vue CLI is a great tool for rapid Vue.js development and will guide you through setting up the Vue School Travel App project. https://player.vimeo.com/video/ 346 yes no 2021-06-03T14:43:00+02:00 no https://vueschool.io/lessons/the-scaffolded-codebase-vue-cli-only 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1154314491-fbd31a26c0dab7b849bb703742501e3102acbefb024e7c4b3c8a790990b0f18e-d_1280x720?r=pad The Scaffolded Codebase (Vue CLI Only) Video Lesson In this lesson, we take a look at the files and directories that Vue CLI created for us. We especially zone in on the Vue Router 4 related code such as the Vue Router setup, route record registrati... https://player.vimeo.com/video/ 349 yes no 2021-06-03T14:43:00+02:00 no https://vueschool.io/lessons/adding-routes-and-content 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1154317492-f47f91af616ea07e1b295c3f808e8a2a590960e1da6def7bf00968a2db2eedb9-d_1280x720?r=pad Adding Routes and Content Video Lesson In this lesson, we import project assets, like images, a stylesheet, and the data, into the Vue.js application via a [dowload](https://github.com/danielkellyio/vue-4-router-course-starter-files/arc... https://player.vimeo.com/video/ 702 yes no 2021-06-03T14:43:00+02:00 no https://vueschool.io/lessons/history-mode 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1154318045-ec297196ea92a0977f09441688f6563ebcc7677e30cd1b758fcc76c351cbb6cb-d_1280x720?r=pad History Mode: HTML5 vs Hash Video Lesson What's the difference between HTML5 mode and Hash mode in Vue Router 4? In this lesson we find out! We also examine how to enable each one, the pros and cons of each, and when it's appropriate to u... https://player.vimeo.com/video/ 239 yes no 2021-06-03T14:43:00+02:00 no https://vueschool.io/lessons/lazy-loading-routes-vite-only 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1154320091-a009cab298036a5e9049fb9d1227e9019641a6dda97912450908cb237f4de24e-d_1280x720?r=pad Lazy Loading Routes (Vite Only) Video Lesson In this lesson, we use dynamic imports to lazy load different javascript chunks per page. This practice keeps the application lightweight and fast, as code is only requested from the server when it... https://player.vimeo.com/video/ 332 yes no 2021-06-03T14:44:00+02:00 no https://vueschool.io/lessons/lazy-loading-routes-vue-cli-only 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1154319071-5e65d7377fddb9385e4165b8d46ddae6095b80bbd39556743e200ddecd31cf1c-d_1280x720?r=pad Lazy Loading Routes (Vue CLI Only) Video Lesson In this lesson, we use dynamic imports to lazy load different javascript chunks per page. This practice keeps the application lightweight and fast, as code is only requested from the server when it... https://player.vimeo.com/video/ 395 yes no 2021-06-03T14:44:00+02:00 no https://vueschool.io/lessons/navigation-component 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1154327544-e67e9ff98082c964014cae700b2a5f9d9f8b640a77e1514ac18e5176729fb80a-d_1280x720?r=pad Navigation Component Video Lesson In this lesson, we extract the links in App.vue to their own dedicated and semantically name component file. We also follow the Vue.js styleguide, calling it `TheNavigation` since it's a component... https://player.vimeo.com/video/ 101 yes no 2021-06-03T14:44:00+02:00 no https://vueschool.io/lessons/router-link-active-class 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1154320391-30c2a958e86e9ceadd333feee49c5a6a4761468a09668af462d9c31b89419eef-d_1280x720?r=pad Router Link Active Class Video Lesson In this lesson, we learn how to target links for the currently visited page in order to style them differently from other links. This is common practice and provides a good user experience as it gi... https://player.vimeo.com/video/ 212 yes no 2021-06-03T14:44:00+02:00 no https://vueschool.io/lessons/dynamic-routes 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1154321868-b85d8e35ac95b37b74c3bd38eeb0da38a3ac910ac069a96b540f6cf569b39a30-d_1280x720?r=pad Dynamic Routes Video Lesson In this lesson, we take a look at dynamic routes in Vue Router 4 and how to utlize params to identify different destinations and show them all via a single route and page. https://player.vimeo.com/video/ 547 yes no 2021-06-03T14:44:00+02:00 no https://vueschool.io/lessons/named-routes 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1154320883-ac695021a608129745f0568561f243df2dc2a12570204b94e930ec71eb2ff71b-d_1280x720?r=pad Named Routes Video Lesson In this lesson, we examine route names and how they can be useful for identifying routes and updating route paths without having to change any links throughout your application. https://player.vimeo.com/video/ 214 yes no 2021-06-03T14:44:00+02:00 no https://vueschool.io/lessons/clean-up 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1154322435-9452943c84d934e7f77c1a5119e7912f526003a545c39a1d3fadd9151ec12c63-d_1280x720?r=pad Clean Up Video Lesson In this lesson, we clean up some lingering boilerplate and stale code. We also cleanup the URL for the destination show pages with SEO in mind. https://player.vimeo.com/video/ 399 yes no 2021-06-03T14:44:00+02:00 no https://vueschool.io/lessons/reacting-to-param-changes 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1154323474-d03d733d106a97c491476cedd43deb1c1419f004b07dfb5e18ed3c72a311d70d-d_1280x720?r=pad Reacting to Param Changes Video Lesson In this lesson, we take a look at a common gotcha when it comes to using route params with Vue Router and how to account for it. Since the same component instance will be reused when navigating bet... https://player.vimeo.com/video/ 742 yes no 2021-06-03T14:44:00+02:00 no https://vueschool.io/lessons/route-props 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1154322606-b2a5660387c21a143b97a3b0f59e37709cd5c9d004d379da88bb187edaef9a25-d_1280x720?r=pad Route Props Video Lesson In this lesson, we decouple our Vue.js page components from the route params via component props. Vue Router 4 provides multiple ways of doing this: from setting the props property on the route rec... https://player.vimeo.com/video/ 311 yes no 2021-06-03T14:44:00+02:00 no https://vueschool.io/lessons/experience-cards 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1154324357-c0c27a8d9e6cf57ee3430734e8dc4e30ab138d24068419c5b139770cf392a852-d_1280x720?r=pad Experience Cards Video Lesson In this lesson, we create an Experience Card component to display each of the different experiences for each Vue School Travel App destination. We loop over each experience for the different destin... https://player.vimeo.com/video/ 708 yes no 2021-06-03T14:44:00+02:00 no https://vueschool.io/lessons/nested-routes 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1154325831-16bbb4de1646443c9a17cb817ac35740d51b7d96ffe1a6043a6d6f288f7f9fd9-d_1280x720?r=pad Nested Routes Video Lesson In this lesson, we improve the user experience by nesting the Experience page inside of it's parent desination. This is accomplished with Vue Router's nested routes feature. https://player.vimeo.com/video/ 236 yes no 2021-06-03T14:44:00+02:00 no https://vueschool.io/lessons/go-back 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1154324539-ead6790d7ee04fb4b057c7170f6817f1284acb4042fa63735d4949aa300fa025-d_1280x720?r=pad Go Back Video Lesson In this lesson, we use Vue Router's back method to create a simple yet fully functional back button. Clicking the custom back button is the equivalent of clicking the back button in the browser. https://player.vimeo.com/video/ 141 yes no 2021-06-03T14:44:00+02:00 no https://vueschool.io/lessons/route-transitions 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1154327080-169580e36a0120c5965e03069e126646ccf1a65ae5035a08b3b94f14ea0982c3-d_1280x720?r=pad Route Transitions Video Lesson In this lesson, we take advantage of the SPA architecture and Vue.js transitions to transition our page navigations, making them look and feel more like native applications. While we've settled on... https://player.vimeo.com/video/ 422 yes no 2021-06-03T14:44:00+02:00 no https://vueschool.io/lessons/404-not-found-page 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1154327515-19ab08c71a92862825e02d8283a0854526b267799a0dec8708eddd3fd951cdfc-d_1280x720?r=pad Learn How to Handle 404 Not Found Video Lesson In this lesson, we wire up a Not Found so that users get a helpful not found message when they visit a route that doesn't exist. https://player.vimeo.com/video/ 220 yes no 2021-06-03T14:44:00+02:00 no https://vueschool.io/lessons/route-guards 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1154326563-9987bb93a05b0118f6c9f201cc244a4ba95e6f887116f0c8df09def9b51d19ce-d_1280x720?r=pad Route Guards Video Lesson In this lesson, we further solidify our 404 pages by making sure they work for destination pages. This is necessary as certain urls will match the destination.show route but there will not be a cor... https://player.vimeo.com/video/ 272 yes no 2021-06-03T14:44:00+02:00 no https://vueschool.io/lessons/scroll-behavior 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1159354354-aabcd33e4eeb87b991022c795cd6d1f19a21fa39d207e112aeaecec21f32c81b-d_1280x720?r=pad Scroll Behavior Video Lesson In this lesson, we learn how to customize the scroll behavior between route changes in Vue Router. https://player.vimeo.com/video/ 289 yes no 2021-06-09T16:14:00+02:00 no https://vueschool.io/lessons/route-meta-fields 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1159355234-17f4c574a0d226c33cbb9df2ff02fcb0a40ac6506c3eec0bee9028c6bbd10dbe-d_1280x720?r=pad Route Meta Fields Video Lesson In this lesson, we take a look at Vue Router's route meta fields and their ability to attach arbitrary information to a route. https://player.vimeo.com/video/ 737 yes no 2021-06-09T16:14:00+02:00 no https://vueschool.io/lessons/router-query-params 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1159354694-0bf252afd4727d056d994db35aa1f37aab0ae90efac1cedd2e94d70514e094f0-d_1280x720?r=pad Router Query Params Video Lesson In this lesson, we learn about query params in Vue Router. Query params can be used for a number of different things, including storing search parameters for a search results page or, in our case,... https://player.vimeo.com/video/ 425 yes no 2021-06-09T16:15:00+02:00 no https://vueschool.io/lessons/extending-router-link-for-external-urls 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1159355590-44d5540bc0c9271cbe2b64391eaf19c067389278e877dc50252bcd8e6d17f948-d_1280x720?r=pad Extending Router Link for External URLs Video Lesson In this lesson, we wrap Vue Router's router-link component with a custom app-link component that is able to handle bother internal and external URLs. This approach allows not just for intuitive han... https://player.vimeo.com/video/ 511 yes no 2021-06-09T16:15:00+02:00 no https://vueschool.io/lessons/router-and-the-composition-api 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1159354863-f53e2953c3188dbd66d9f5df93c5638cc3584b51a3c3912a3b1e535f58099711-d_1280x720?r=pad Router and the Composition API Video Lesson In this lesson (**optional**), we take a look at how to work with Vue Router with the Composition API. While Vue Router provides a few helper functions, available as imports, to access the router f... https://player.vimeo.com/video/ 495 yes no 2021-06-09T16:16:00+02:00 no https://vueschool.io/lessons/vue-router-4-bonus-lessons 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1379342827-f5a902fbfe7606f0daf3eb2b549ad6e45171cb082d475cc1bb5edf3a95234518-d_1280x720?r=pad Bonus Lessons Video Lesson In this chapter, we provide some more lessons to give you an even more thorough understanding of what’s possible with Vue Router. https://player.vimeo.com/video/ 49 yes no 2022-02-22T17:40:00+01:00 no https://vueschool.io/lessons/vue-router-4-programmatic-navigation 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1379346718-9ddda9c46e4d8b10a87cdec555eead3f477584a6c196bdbc7739f8e8d7fa3c04-d_1280x720?r=pad Programmatic Navigation Video Lesson In this lesson, we learn about using $router.push and $router.replace to navigate to different routes programmatically. https://player.vimeo.com/video/ 286 yes no 2022-02-22T17:40:00+01:00 no https://vueschool.io/lessons/vue-router-4-named-views 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1379348570-91173fecd19f64e57d2932f24d2b4fc1dc405416ece6dac614cc069da1237111-d_1280x720?r=pad Named Views Video Lesson In this lesson, we learn how to utilize named views in order to compose custom layouts per route. https://player.vimeo.com/video/ 312 yes no 2022-02-22T17:40:00+01:00 no https://vueschool.io/lessons/vue-router-4-redirect-and-alias 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1379356665-347f66b0339f014fcd4edf2a5e29a72ee97eff7abb965432a87598c9f8285b17-d_1280x720?r=pad Redirect and Alias Video Lesson In this lesson, we learn more about using the redirect and alias route properties for handling alternate urls. https://player.vimeo.com/video/ 145 yes no 2022-02-22T17:40:00+01:00 no https://vueschool.io/lessons/vue-router-4-detecting-navigation-failures 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1376608440-a797bf6edc63b0659a3dd7b9b7b6b0d4bb5ec0b4b94240a61e0dd10bf3ce8f5e-d_1280x720?r=pad Detecting Navigation Failures Video Lesson In this lesson, we learn that navigating programmatically is an asynchronous operation. By waiting for the result, we can detect navigation failures and perform all sorts of custom actions based on... https://player.vimeo.com/video/ 268 yes no 2022-02-22T17:40:00+01:00 no https://vueschool.io/lessons/vue-router-4-advanced-routes-matching-syntax 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1379360423-c641eefd8dbae63b7c452ac80ae79a66e432864c34b3461881e49dc79b55b74e-d_1280x720?r=pad Advanced Routes’ Matching Syntax Video Lesson In this lesson, we take a look at how to utilize regular expressions and other special symbols to take fine tune control over how routes are matched. https://player.vimeo.com/video/ 336 yes no 2022-02-22T17:40:00+01:00 no https://vueschool.io/lessons/vue-router-4-dynamic-routing 2026-03-19 monthly 0.8 https://i.vimeocdn.com/video/1379362885-2f4a1e8d23e3a6f9968733315e8febc22c1003c21919bc481358c123fe232489-d_1280x720?r=pad Dynamic Routing Video Lesson In this lesson, we learn how to dynamically add or remove routes to Vue Router while the application is already running. https://player.vimeo.com/video/ 284 yes no 2022-02-22T17:40:00+01:00 no https://vueschool.io/courses/vuejs-3-fundamentals 2026-05-12 monthly 0.8 https://vueschool.io/lessons/getting-started-with-vue-js-3 2026-03-30 monthly 0.8 Getting Started with Vue.js 3 Video Lesson In the very first lesson of our Vue.js 3 Fundamentals course, besides of learning how to easily add Vue.js from a [CDN](https://unpkg.com/vue@3) to our site we're going to take a look at Vue.js enj... https://player.vimeo.com/video/ 232 yes no 2021-03-24T12:07:00+01:00 no https://vueschool.io/lessons/vue-js-3-template-syntax-and-expressions 2026-03-30 monthly 0.8 Vue.js 3 template Syntax and Expressions Video Lesson In the previous lesson, we briefly touched upon the templating syntax to bind Vue data to the DOM. https://player.vimeo.com/video/ 146 yes no 2021-03-24T12:08:00+01:00 no https://vueschool.io/lessons/list-rendering-in-vue-3 2026-03-30 monthly 0.8 List Rendering in Vue 3 Video Lesson In almost all applications there is a need to iterate or loop through a list of items and render them on the page. https://player.vimeo.com/video/ 466 yes no 2021-03-24T12:09:00+01:00 no https://vueschool.io/lessons/user-inputs-vue-devtools-in-vue-3 2026-03-30 monthly 0.8 User Inputs in Vue 3 Video Lesson We will continue to learn about the reactivity system in this lesson. You'll learn how to handle user inputs with the `v-model` directive. `v-model` gives super powers to text inputs, checkboxes, r... https://player.vimeo.com/video/ 667 yes no 2021-03-24T12:10:00+01:00 no https://vueschool.io/lessons/user-events-in-vue-3 2026-03-30 monthly 0.8 User Events in Vue 3 Video Lesson In this lesson, we'll learn how to respond to and handle user events with Vue's `v-on` directive. https://player.vimeo.com/video/ 441 yes no 2021-03-24T12:10:00+01:00 no https://vueschool.io/lessons/methods-in-vue-3 2026-03-30 monthly 0.8 Methods in Vue 3 Video Lesson It is handy to run JavaScript expressions directly in the template or a directive sometimes - but not always. https://player.vimeo.com/video/ 318 yes no 2021-03-24T12:11:00+01:00 no https://vueschool.io/lessons/conditional-rendering-in-vue-3 2026-03-30 monthly 0.8 Conditional Rendering in Vue 3 Video Lesson Conditional rendering is essential on any dynamic website. Vue.js offers two ways to render elements on our page conditionally, and in this lesson we're learning how the `v-if` and `v-else` directi... https://player.vimeo.com/video/ 253 yes no 2021-03-24T12:11:00+01:00 no https://vueschool.io/lessons/html-attribute-binding-in-vue-3 2026-03-30 monthly 0.8 HTML Attribute Binding in Vue 3 Video Lesson We know how to render data in the DOM with Vue 3, and now it's time to take a closer look at how we can bind HTML attributes to our Vue data. https://player.vimeo.com/video/ 175 yes no 2021-03-24T12:21:00+01:00 no https://vueschool.io/lessons/dynamic-css-classes-with-vue-3 2026-03-30 monthly 0.8 Dynamic CSS classes with Vue 3 Video Lesson A common need and use case for [attribute bindings](https://vueschool.io/lessons/html-attribute-binding-in-vue-3) is to manipulate the look of elements with CSS classes or style attributes. https://player.vimeo.com/video/ 472 yes no 2021-03-24T12:13:00+01:00 no https://vueschool.io/lessons/computed-properties-in-vue-3 2026-03-30 monthly 0.8 Computed Properties in Vue 3 Video Lesson Computed properties are another powerful feature from Vue that allows us to transform or perform calculations on our data and then easily reuse the result as an up-to-date variable in our template.... https://player.vimeo.com/video/ 270 yes no 2021-03-24T12:22:00+01:00 no https://vueschool.io/lessons/using-vue-dev-tools-with-vuejs-3 2026-03-30 monthly 0.8 Using Vue Devtools with Vue.js 3 Video Lesson The Vue Devtools is an invaluable browser extension to Chrome and Firefox that will speed up your development and bug hunting. https://player.vimeo.com/video/ 277 yes no 2021-04-27T16:25:00+02:00 no https://vueschool.io/courses/reusable-vuejs-components-with-slots 2026-05-12 monthly 0.8 https://vueschool.io/lessons/what-are-slots 2026-05-25 monthly 0.8 What are Slots Video Lesson In this lesson, we'll learn what slots are and the basics of how to use slots to create reusable Vue.js components. https://player.vimeo.com/video/ 228 yes no 2020-10-08T16:19:00+02:00 no https://vueschool.io/lessons/using-slots 2026-05-26 monthly 0.8 Using Slots Video Lesson In this lesson, we'll dive deeper into how slots are helpful when we need to pass HTML and other Vue.js components to our components. https://player.vimeo.com/video/ 235 yes no 2020-10-08T16:19:00+02:00 no https://vueschool.io/lessons/named-slots 2026-05-26 monthly 0.8 Named Slots Video Lesson In this lesson, we'll learn about named slots. Named slots allow us to use multiple slots in one component. https://player.vimeo.com/video/ 226 yes no 2020-10-22T19:00:00+02:00 no https://vueschool.io/lessons/create-a-user-list-component 2026-05-26 monthly 0.8 Create a User List Component Video Lesson In this lesson, we’re going to see how we can use multiple named slots to display a loading and an error state in a component. https://player.vimeo.com/video/ 259 yes no 2020-10-29T17:34:00+01:00 no https://vueschool.io/lessons/fake-scoped-slots-with-functions 2026-05-26 monthly 0.8 Fake Scoped Slots with Functions Video Lesson In this lesson, we'll start learning about scoped slots. To gain a deeper understanding of scoped slots, we'll learn how to create fake scoped slots with functions before using actual scoped slots. https://player.vimeo.com/video/ 341 yes no 2020-10-29T17:35:00+01:00 no https://vueschool.io/lessons/passing-data-to-the-parent-using-scoped-slot 2026-05-26 monthly 0.8 Passing Data to the Parent Using Scoped Slot Video Lesson In this lesson, we'll learn how to use scoped slots to pass data to the parent component. Scoped slots allow us to not only be flexible on which data we show, but we can also customize the appearance. https://player.vimeo.com/video/ 218 yes no 2020-11-12T14:05:00+01:00 no https://vueschool.io/lessons/refactor-user-list-component-using-slots 2026-05-26 monthly 0.8 Refactor User List Component Using Slots Video Lesson In this lesson, we'll learn about component composition using nested slots. https://player.vimeo.com/video/ 338 yes no 2020-11-12T14:07:00+01:00 no https://vueschool.io/lessons/using-scoped-slots-with-functions 2026-05-26 monthly 0.8 Using Scoped Slots with Functions Video Lesson In this lesson, we'll learn how to pass methods to scoped slots, so we can make our slot-based component more interactive. https://player.vimeo.com/video/ 222 yes no 2020-12-24T17:06:00+01:00 no https://vueschool.io/lessons/composing-components 2026-05-26 monthly 0.8 Composing Components Video Lesson In this lesson, we'll extend the example from the previous lesson and learn how to pass methods to slots, so we can compose components without repeating our logic. https://player.vimeo.com/video/ 162 yes no 2020-12-24T17:07:00+01:00 no https://vueschool.io/lessons/dynamic-named-slots 2026-05-26 monthly 0.8 Dynamic Named Slots Video Lesson In this lesson, we'll learn how we can use dynamic slot names, so we can determine which slot to render based on a variable. https://player.vimeo.com/video/ 444 yes no 2020-12-30T13:55:00+01:00 no https://vueschool.io/courses/vue-apollo-graphql-fundamentals 2026-05-12 monthly 0.8 https://vueschool.io/lessons/what-is-vue-apollo 2026-03-25 monthly 0.8 What is Vue-Apollo? Video Lesson This course uses Vue-Apollo to connect to the SpaceX GraphQL API. https://player.vimeo.com/video/ 124 yes no 2020-10-01T13:41:00+02:00 no https://vueschool.io/lessons/setup-vue-apollo 2026-03-25 monthly 0.8 Setup Vue & Apollo Video Lesson In this lesson, we'll learn how to set up and configure Vue-Apollo, to make our Vue.js applications ready to consume a GraphQL API. https://player.vimeo.com/video/ 312 yes no 2020-10-01T13:41:00+02:00 yes https://vueschool.io/lessons/setup-graphql-tooling 2026-03-25 monthly 0.8 Setup GraphQL Tooling Video Lesson In this lesson, we'll install and configure tooling that enhances the developer experience when working with GraphQL and Apollo Client. https://player.vimeo.com/video/ 203 yes no 2020-10-01T13:42:00+02:00 yes https://vueschool.io/lessons/query-graphql-data 2026-03-25 monthly 0.8 Query GraphQL Data Video Lesson In this lesson, we'll learn how to use queries fetch data from GraphQL APIs. https://player.vimeo.com/video/ 455 yes no 2020-10-01T13:42:00+02:00 yes https://vueschool.io/lessons/dynamic-arguments 2026-03-25 monthly 0.8 Dynamic Arguments Video Lesson In this lesson, we'll learn how to pass in arguments and variables to our GraphQL queries, which lets us fetch specific data. https://player.vimeo.com/video/ 332 yes no 2020-11-26T15:01:00+01:00 yes https://vueschool.io/lessons/mutate-graphql-data 2026-03-25 monthly 0.8 Mutate GraphQL Data Video Lesson In this lesson, we'll learn how to write records to our database using GraphQL mutations. https://player.vimeo.com/video/ 614 yes no 2020-11-26T15:02:00+01:00 yes https://vueschool.io/lessons/automatically-refetch-queries 2026-03-25 monthly 0.8 Automatically Refetch Queries Video Lesson In this lesson, we'll learn about the `refetchQueries` option, where we can specify which queries we want to automatically refetch after a mutation has occurred. https://player.vimeo.com/video/ 89 yes no 2020-12-10T14:14:00+01:00 yes https://vueschool.io/lessons/updating-the-cache-after-a-mutation 2026-03-25 monthly 0.8 Updating the cache after a mutation Video Lesson In this lesson, we'll learn how to update the Apollo cache after a mutation has occurred instead of refetching the entire query. Generally speaking, it is more performant to update the cache rather... https://player.vimeo.com/video/ 177 yes no 2020-12-10T14:15:00+01:00 yes https://vueschool.io/lessons/optimistic-response 2026-03-25 monthly 0.8 Optimistic Response Video Lesson In this lesson, we'll learn about GraphQL's optimistic response feature, which allows us to create great user experiences while waiting for a mutation to be executed. https://player.vimeo.com/video/ 177 yes no 2020-12-17T11:00:00+01:00 yes https://vueschool.io/lessons/error-handling 2026-03-25 monthly 0.8 Error Handling Video Lesson In this lesson, we'll learn how to respond to a mutation's success or failure. https://player.vimeo.com/video/ 175 yes no 2020-12-17T10:59:00+01:00 yes https://vueschool.io/courses/whats-new-in-vue-3 2026-05-12 monthly 0.8 https://vueschool.io/lessons/introduction-to-vue-3 2026-03-28 monthly 0.8 Introduction to Vue 3 Video Lesson Vue 3 is smaller and faster than Vue 2, it exposes some lower lever APIs, and it comes with improved TypeScript support and a more maintainable codebase. https://player.vimeo.com/video/ 123 yes no 2020-09-08T16:55:00+02:00 no https://vueschool.io/lessons/vue-3-project-structure 2026-03-28 monthly 0.8 Vue 3 Project Structure Video Lesson In this lesson, we'll learn how to install the latest version of the Vue CLI (called next) that allows us to use Vue 3. We will also take a look through the project structure we get when initializi... https://player.vimeo.com/video/ 189 yes no 2020-09-08T16:58:00+02:00 yes https://vueschool.io/lessons/having-multiple-root-nodes-in-component-template 2026-03-28 monthly 0.8 Multiple root nodes in the template Video Lesson In this lesson, we'll learn that Vue 3 comes with official support for multiple root nodes, which is called fragments. https://player.vimeo.com/video/ 106 yes no 2020-09-10T16:36:00+02:00 yes https://vueschool.io/lessons/vue-3-teleport 2026-03-28 monthly 0.8 Vue 3 Teleport Video Lesson In this lesson, you'll learn how to use the new Vue 3 feature, teleport. Teleport allows us to move an element from one place to another, which is needed for some user interfaces. Teleport is espec... https://player.vimeo.com/video/ 621 yes no 2020-09-17T23:00:00+02:00 yes https://vueschool.io/lessons/automatic-change-detection 2026-03-28 monthly 0.8 Automatic Change Detection Video Lesson In this lesson, we'll look at common reactivity caveats in Vue 2, and how we work around them. The lesson then demonstrates that the reactivity caveats are gone in Vue 3. https://player.vimeo.com/video/ 194 yes no 2020-10-15T19:00:00+02:00 yes https://vueschool.io/lessons/multiple-v-models 2026-03-28 monthly 0.8 Multiple v-models Video Lesson https://player.vimeo.com/video/ 450 yes no 2020-10-15T16:00:00+02:00 yes https://vueschool.io/lessons/defining-custom-events-emits 2026-03-29 monthly 0.8 Defining Custom Events (emits) Video Lesson In this lesson, we'll dive into the new `emits` component option, that allows us to document and validate the custom events a component emits. https://player.vimeo.com/video/ 499 yes no 2020-09-10T16:41:00+02:00 yes https://vueschool.io/courses/vue-3-composition-api 2026-05-12 monthly 0.8 https://vueschool.io/lessons/introduction-to-the-vue-js-3-composition-api 2026-05-04 monthly 0.8 https://i.vimeocdn.com/video/1218732661-48cd273a9a639180698ef212133028b25119abd15e98a831170eb0970f78687b-d_1280x720?r=pad Introduction to the Vue.js 3 Composition API Video Lesson In this lesson, we get acquainted with the Composition API which is introduced in Vue.js 3. We summarize briefly what it is, and examine why it's beneficial. https://player.vimeo.com/video/ 525 yes no 2021-08-19T09:57:00+02:00 no https://vueschool.io/lessons/vue-3-composition-api-set-up-a-local-environment-with-vite 2026-05-04 monthly 0.8 https://i.vimeocdn.com/video/1218732799-60c2453ef00c49146c0d156df314e44161431c628f65d3a5fd5f4fa22a730405-d_1280x720?r=pad Set up a Local Environment with Vite Video Lesson In this lesson we prepare to learn about the Vue.js 3 Composition API by setting up a local environment to work in using Vite. Vite is a build tool that aims to provide a faster and leaner developm... https://player.vimeo.com/video/ 215 yes no 2021-08-19T09:59:00+02:00 yes https://vueschool.io/lessons/vue-composition-api-setup-method 2026-05-04 monthly 0.8 https://i.vimeocdn.com/video/1218733093-57d217b8fc37aa99fdb98be53776eb541a64c24b97f817f3f2a34d400eef4687-d_1280x720?r=pad Vue Composition API Setup Method Video Lesson In this lesson, we learn the basics of using the Vue Composition API setup method. `setup` is executed before the component is created, once the props are resolved, and serves as the entry point fo... https://player.vimeo.com/video/ 413 yes no 2021-08-19T09:59:00+02:00 yes https://vueschool.io/lessons/the-setup-method-s-parameters-props-and-context 2026-05-04 monthly 0.8 https://i.vimeocdn.com/video/1218733155-07fe80d9efda04cbe748aeff2986a9e29c2a02c1187c2f5407cae750200ae855-d_1280x720?r=pad The Setup Method's Parameters: props and context Video Lesson In this lesson, we take a look at accessing the component props and context via the parameters on the setup method. https://player.vimeo.com/video/ 374 yes no 2021-08-19T10:00:00+02:00 yes https://vueschool.io/lessons/reactive-primitives-with-refs 2026-05-04 monthly 0.8 https://i.vimeocdn.com/video/1218733444-3a294b010011ae7e921ebd67e818401829924da8b545051d7400ce1e426b2a26-d_1280x720?r=pad Reactive Primitives with Refs Video Lesson In this lesson we learn how to work with Vue 3 Reactive Refs in order to make our primitive data defined in the setup function reactive. https://player.vimeo.com/video/ 420 yes no 2021-08-19T10:01:00+02:00 yes https://vueschool.io/lessons/reactive-data-with-the-composition-api 2026-05-04 monthly 0.8 https://i.vimeocdn.com/video/1218733528-9d6f9c78821018b8391082833e362ab6e324f0c8ff198b582526900bc6d14647-d_1280x720?r=pad Reactive Data with the Composition API Video Lesson In this lesson we examine an alternative way of making objects reactive with the Vue 3 Composition API. https://player.vimeo.com/video/ 288 yes no 2021-08-19T10:02:00+02:00 yes https://vueschool.io/lessons/refs-vs-reactive-with-the-vue-3-composition-api 2026-05-04 monthly 0.8 https://i.vimeocdn.com/video/1228372214-a382cca75d321da11e2ab76ce50b537ea581947e811c8ac208e686de1b8bb1a5-d_1280x720?r=pad Refs vs Reactive With the Vue 3 Composition API Video Lesson In this lesson we take a look at some advantages and disadvantages of the Vue.js 3 Composition API ref and reactive functions. Each have their pros and can be utilized appropriately depending on th... https://player.vimeo.com/video/ 536 yes no 2021-09-01T16:00:00+02:00 yes https://vueschool.io/lessons/computed-properties-in-the-composition-api 2026-05-04 monthly 0.8 https://i.vimeocdn.com/video/1228372440-7d448bb078c8baef8892a4a6742710977939cd8d433e5316f5cc6c63f115478c-d_1280x720?r=pad Computed Properties in the Composition API Video Lesson In this lesson, we learn about utilizing computed properties inside of the setup method. Thankfully, making the leap from using them with the Options API to using them with the Composition API is o... https://player.vimeo.com/video/ 314 yes no 2021-09-01T16:00:00+02:00 no https://vueschool.io/lessons/using-watch-with-the-composition-api 2026-05-04 monthly 0.8 https://i.vimeocdn.com/video/1228373277-5e2e46e39398c0fa2aadf2696fc9d8bf4c7a17b61bdb06c85b257088faa34013-d_1280x720?r=pad Using Watch with the Composition API Video Lesson In this lesson, we learn about watching data in the composition API in order to perform side affects whenever that data changes. With the composition API we also have the ability to watch multiple... https://player.vimeo.com/video/ 540 yes no 2021-09-01T16:00:00+02:00 no https://vueschool.io/lessons/the-composition-api-watcheffect-function 2026-05-04 monthly 0.8 https://i.vimeocdn.com/video/1228374656-3533b990693e53559461080a605d935f7f1c13481312ffa96d207d429eaba99d-d_1280x720?r=pad The Composition API watchEffect Function Video Lesson In this lesson we compare the Vue Composition API watchEffect function to the watch function and talk about when we should which. https://player.vimeo.com/video/ 171 yes no 2021-09-01T16:00:00+02:00 no https://vueschool.io/lessons/using-provide-inject-with-the-composition-api 2026-05-04 monthly 0.8 https://i.vimeocdn.com/video/1228374721-c5233bb00acf77eb54d3720f86d782ae431b34c6eb0378c17ddc1ed2581f200f-d_1280x720?r=pad Using provide / inject with the Composition API Video Lesson In this lesson, we take a look at using provide/inject with the composition API. Provide/inject gives us the ability to share data from a parent component to deeply nested child components without... https://player.vimeo.com/video/ 521 yes no 2021-09-01T16:00:00+02:00 no https://vueschool.io/lessons/lifecycle-hooks-and-the-composition-api 2026-05-04 monthly 0.8 https://i.vimeocdn.com/video/1228375079-60bc65691652d2907cacc97dfe44adaa42b2ef68f1abc158b2d14b8b41a8a75d-d_1280x720?r=pad Lifecycle hooks and the Composition API Video Lesson In this lesson, we learn how to use component lifecycle hooks with the Vue.js Composition API. https://player.vimeo.com/video/ 61 yes no 2021-09-01T16:00:00+02:00 yes https://vueschool.io/lessons/the-setup-attribute 2026-05-04 monthly 0.8 https://i.vimeocdn.com/video/1228375443-2774bedd919a422013e793875a2ae9fe9f221fbd02524c2a1732084a2b2c9f4a-d_1280x720?r=pad Script Setup Video Lesson In this lesson, we learn about the script tag setup attribute. This attribute allows us to eliminate much of the boilerplate code associated with the Vue.js Composition API. https://player.vimeo.com/video/ 251 yes no 2021-09-01T16:00:00+02:00 no https://vueschool.io/lessons/vue-3-composition-api-overview-of-example-blog 2026-05-04 monthly 0.8 https://i.vimeocdn.com/video/1243210234-d5ee94ec6136da1502220b4d5c7cee731bdfbf0d3ce0cd04cb878b7e364bdf7d-d_1280x720?r=pad Overview of Example Blog Video Lesson In this lesson, we take a look at the example blog application we're going to build in order to get a little more real life experience with the Composition API. https://player.vimeo.com/video/ 263 yes no 2021-09-16T16:00:00+02:00 yes https://vueschool.io/lessons/creating-a-usepost-composable 2026-05-04 monthly 0.8 https://i.vimeocdn.com/video/1237191012-7086a6007e3b4cd618af720ad4bbd39eb91275206640bff1947b2c61dac70842-d_1280x720?r=pad Creating a usePost Composable Video Lesson In this lesson we create our first Vue Composition API composable! Composables provide us with the ability to do things outside of a component that we would normally do inside of a setup function.... https://player.vimeo.com/video/ 241 yes no 2021-09-16T16:00:00+02:00 yes https://vueschool.io/lessons/using-the-usepost-composable-in-multiple-components 2026-05-04 monthly 0.8 https://i.vimeocdn.com/video/1243213767-ddd72657de9a51ca8c8ea3e1fa235c1e2b7087e8f14796f02db582c183b688d6-d_1280x720?r=pad Using the usePost Composable in Multiple Components Video Lesson In this lesson, we extend the usePost composable to handle not just an API call to retrieve all the posts but also an API call to get a single post. Because Vue.js composables are external to compo... https://player.vimeo.com/video/ 178 yes no 2021-09-16T16:00:00+02:00 yes https://vueschool.io/lessons/vue-3-composition-api-using-vue-router-with-composition-api 2026-05-04 monthly 0.8 https://i.vimeocdn.com/video/1243215210-8562bf79d01ab4bdb056cb206198e4c870165fc4336dac816161f0f6bd177c65-d_1280x720?r=pad Using Vue Router with Composition API Video Lesson In this lesson we learn how to access the Vue Router `route` and `router` objects from inside the setup function. Since setup() is called before other component options are resolved the `this` keyw... https://player.vimeo.com/video/ 184 yes no 2021-09-16T16:00:00+02:00 yes https://vueschool.io/lessons/refactoring-for-a-more-versatile-composable 2026-05-04 monthly 0.8 https://i.vimeocdn.com/video/1237192846-0be61a40e7bcc2b2ca2a78881936d010a805a95f2e0fc7a003712c1a1afec8af-d_1280x720?r=pad Refactoring for a More Versatile Composable Video Lesson In this lesson, we create a `useResource` composable to handle the fetching logic and state for both posts and users. https://player.vimeo.com/video/ 406 yes no 2021-09-16T16:00:00+02:00 yes https://vueschool.io/lessons/asynchronous-data-and-the-composition-api 2026-05-04 monthly 0.8 https://i.vimeocdn.com/video/1243216528-58f852c49cd4a2d87c0001717c73bf490626de0809641829a2ea3fb681eceffc-d_1280x720?r=pad Asynchronous Data and the Composition API Video Lesson In this lesson, we take a look at how to work with asyncronous data inside of the Composition API setup function. https://player.vimeo.com/video/ 300 yes no 2021-09-16T16:00:00+02:00 yes https://vueschool.io/lessons/vue-3-composition-api-the-suspense-component 2026-05-04 monthly 0.8 https://i.vimeocdn.com/video/1243217244-33cd781585aafe833fee32e24c95dd0187274ad5c45b607f1b7bd2c88da1f451-d_1280x720?r=pad The Suspense Component Video Lesson In this lesson, we take a look at the Vue.js Suspense Component and how it can improve upon our async code. https://player.vimeo.com/video/ 295 yes no 2021-09-16T16:00:00+02:00 yes https://vueschool.io/lessons/use-shared-state-between-uses-of-a-composable 2026-05-04 monthly 0.8 https://i.vimeocdn.com/video/1237281425-a9ad224fc3fba1d9b5bda6c92207951d27ff94595121d87b42438647998d90fc-d_1280x720?r=pad Use Shared State Between Uses of a Composable Video Lesson In this lesson, we learn how to share state between multiple uses of a composable. We use this knowledge to create a one off loading indicator at the top level of our application for every page, as... https://player.vimeo.com/video/ 572 yes no 2021-09-16T16:00:00+02:00 yes https://vueschool.io/lessons/course-introduction 2026-05-04 monthly 0.8 https://i.vimeocdn.com/video/1593979699-1749380f12f2427e6bcd070528c52b3a55c9f4f4db82bae37a884ac4214273fd-d_1280x720?r=pad Course Introduction Video Lesson Hello and welcome to the course 👋! https://player.vimeo.com/video/ 84 yes no 2023-01-23T19:46:00+01:00 no https://vueschool.io/lessons/vue-3-composition-api-course-conclusion 2026-05-04 monthly 0.8 https://i.vimeocdn.com/video/1944334232-0ed822fb16e11be5a36537950495f78e9cc422098d6eb0af5b496459d7fed877-d_1280x720?r=pad Course Conclusion Video Lesson Thanks for watching! https://player.vimeo.com/video/ 43 yes no 2024-10-30T15:47:00+01:00 yes https://vueschool.io/courses/storybook-with-vuejs 2026-05-12 monthly 0.8 https://vueschool.io/lessons/what-is-storybook 2026-03-29 monthly 0.8 What is Storybook Video Lesson In this lesson, we'll explain what Storybook is and demonstrate the benefits of having a component library for our Vue.js components. https://player.vimeo.com/video/ 166 yes no 2020-06-11T16:40:00+02:00 no https://vueschool.io/lessons/install-storybook-with-vue-cli 2026-03-29 monthly 0.8 Install Storybook with Vue CLI Video Lesson In this lesson, you will learn how to install and configure Storybook in a Vue.js project made with Vue CLI. https://player.vimeo.com/video/ 388 yes no 2020-06-11T16:40:00+02:00 yes https://vueschool.io/lessons/writing-stories-in-storiesjs-files 2026-03-29 monthly 0.8 Writing stories in *.stories.js files Video Lesson In this lesson, we'll learn how to write Storybook Stories for our Vue.js components. We will also learn how to pass props to our components to showcase them in different states. https://player.vimeo.com/video/ 389 yes no 2020-06-11T16:40:00+02:00 yes https://vueschool.io/lessons/storybook-story-hierarchy 2026-03-29 monthly 0.8 Set a Story Hierarchy Video Lesson In this lesson, we'll learn how to organize our stories in the sidebar. You'll learn how to name stories if they contain untraditional characters which are invalid as JavaScript variable names, you... https://player.vimeo.com/video/ 443 yes no 2020-06-25T16:00:00+02:00 yes https://vueschool.io/lessons/decorate-stories 2026-03-29 monthly 0.8 Decorate Stories Video Lesson Decorators allow us to wrap our stories in additional code. We can use decorators to alter the appearance or state of our components. https://player.vimeo.com/video/ 259 yes no 2020-06-25T16:00:00+02:00 yes https://vueschool.io/lessons/installing-storybook-addons 2026-03-29 monthly 0.8 Installing Storybook Addons Video Lesson In this lesson, we'll learn about Storybook Addons and how to install them. https://player.vimeo.com/video/ 299 yes no 2020-07-09T08:00:00+02:00 yes https://vueschool.io/lessons/storybook-knobs-addon 2026-03-29 monthly 0.8 Storybook Knobs Addon Video Lesson In this lesson, we'll dive into the Storybook Knobs addon and learn how we can use it to interact with our components without changing our code. https://player.vimeo.com/video/ 294 yes no 2020-07-09T08:00:00+02:00 yes https://vueschool.io/lessons/storybook-actions-addon 2026-03-29 monthly 0.8 Storybook Actions Addon Video Lesson In this lesson, we'll dive into the Actions addon for Storybook and learn how we can use it to monitor the events our components emits. https://player.vimeo.com/video/ 257 yes no 2020-07-23T08:00:00+02:00 yes https://vueschool.io/lessons/storybook-links-addon 2026-03-29 monthly 0.8 Storybook Links Addon Video Lesson In this lesson, we'll dive into the Links addon for Storybook and learn how we can use it to create links that allow us to navigate between stories without using the sidebar. https://player.vimeo.com/video/ 133 yes no 2020-07-23T08:00:00+02:00 yes https://vueschool.io/lessons/storybook-notes-addon 2026-03-29 monthly 0.8 Storybook Notes Addon Video Lesson In this lesson, we'll dive into the Notes addon for Storybook and learn how we can use it to describe our components. https://player.vimeo.com/video/ 182 yes no 2020-08-06T12:48:00+02:00 yes https://vueschool.io/lessons/storybook-docs-addon 2026-03-29 monthly 0.8 Storybook Docs Addon Video Lesson In this lesson, we'll dive into the Docs addon for Storybook and learn how we can write our stories and documentation in MDX files, allowing us to have the documentation alongside the component sto... https://player.vimeo.com/video/ 455 yes no 2020-08-06T12:48:00+02:00 yes https://vueschool.io/lessons/manually-install-storybook-and-configure-tailwindcss 2026-03-29 monthly 0.8 Manually Install Storybook and configure TailwindCSS Video Lesson In this lesson, we'll learn how to manually install Storybook.js in an existing Vue.js project not created with the Vue CLI. https://player.vimeo.com/video/ 409 yes no 2020-08-20T15:08:00+02:00 yes https://vueschool.io/lessons/configure-storybook-to-use-vuetify 2026-03-29 monthly 0.8 Configure Storybook to use Vuetify Video Lesson In this lesson, we'll learn how to configure Storybook to use Vuetify components. https://player.vimeo.com/video/ 322 yes no 2020-08-20T15:10:00+02:00 yes https://vueschool.io/lessons/configure-storybook-to-use-vuex 2026-03-29 monthly 0.8 Configure Storybook to use Vuex Video Lesson In this lesson, we'll learn to configure Storybook to use Vuex in our Vue.js projects. https://player.vimeo.com/video/ 327 yes no 2020-09-03T11:00:00+02:00 yes https://vueschool.io/lessons/configure-storybook-to-use-vue-router 2026-03-29 monthly 0.8 Configure Storybook to use Vue Router Video Lesson In this lesson, we'll learn how to mock the Vue Router when we're using it with Storybook. https://player.vimeo.com/video/ 258 yes no 2020-09-03T11:00:00+02:00 yes https://vueschool.io/lessons/importing-stories-from-vue-components 2026-03-29 monthly 0.8 Importing Stories from Vue Components Video Lesson In this lesson, we'll learn a technique that allows us to write our stories in Single File Components. https://player.vimeo.com/video/ 535 yes no 2020-09-24T15:29:00+02:00 yes https://vueschool.io/courses/functional-components 2026-05-12 monthly 0.8 https://vueschool.io/lessons/what-are-functional-components 2026-05-26 monthly 0.8 What are functional components Video Lesson In this lesson, we'll start looking at what functional components are and see a demonstration of the performance gains we can get by using functional components where applicable. https://player.vimeo.com/video/ 255 yes no 2020-05-14T14:30:00+02:00 no https://vueschool.io/lessons/our-first-functional-component 2026-05-27 monthly 0.8 Our first functional component Video Lesson In this lesson, we'll see what it takes to refactor a classic Vue Component into a functional component. https://player.vimeo.com/video/ 151 yes no 2020-05-14T14:30:00+02:00 yes https://vueschool.io/lessons/the-caveats-of-functional-components 2026-05-27 monthly 0.8 The biggest caveats of functional components Video Lesson There are some caveats to be aware of when you're working with functional components in Vue.js. In this lesson, you'll learn all about those caveats. https://player.vimeo.com/video/ 295 yes no 2020-05-22T12:39:00+02:00 yes https://vueschool.io/lessons/working-with-the-context-and-templates 2026-05-27 monthly 0.8 Working with the context and templates Video Lesson In this lesson, we'll learn about the context object and how slots behave with our functional component. https://player.vimeo.com/video/ 205 yes no 2020-05-28T13:49:00+02:00 yes https://vueschool.io/lessons/introduction-to-render-functions 2026-05-27 monthly 0.8 Introduction to render functions Video Lesson In this lesson, we'll learn how to use render functions to create the template for our functional Vue.js components. https://player.vimeo.com/video/ 297 yes no 2020-06-19T12:30:00+02:00 yes https://vueschool.io/lessons/nesting-render-functions 2026-05-27 monthly 0.8 Nesting render functions Video Lesson In this lesson, we'll learn how to nest render functions in to create nested HTML. https://player.vimeo.com/video/ 232 yes no 2020-07-02T17:26:00+02:00 yes https://vueschool.io/lessons/how-to-structure-complex-render-functions-in-functional-components 2026-05-27 monthly 0.8 How to structure complex render functions Video Lesson In this lesson, we'll port our functional User Card component into render functions. https://player.vimeo.com/video/ 332 yes no 2020-07-02T17:26:00+02:00 yes https://vueschool.io/lessons/being-successful-with-implementing-functional-components 2026-05-27 monthly 0.8 Being successful with implementing functional components Video Lesson In this lesson, we'll dive into some strategical aspects of using functional components and how to successfully adopt them in your Vue.js projects. https://player.vimeo.com/video/ 125 yes no 2020-07-16T08:00:00+02:00 yes https://vueschool.io/courses/internationalization-with-vue-i18n 2026-05-12 monthly 0.8 https://vueschool.io/lessons/do-it-yourself-i18n 2026-05-20 monthly 0.8 Do it Yourself i18n Video Lesson Before we start using the [vue-i18n](https://kazupon.github.io/vue-i18n/) plugin, we'll create a DIY solution for internationalization. https://player.vimeo.com/video/ 187 yes no 2019-12-26T16:00:00+01:00 no https://vueschool.io/lessons/introduce-vue-i18n-through-the-gui 2026-05-20 monthly 0.8 Introduce Vue i18n through the GUI Video Lesson In this lesson, we'll learn how to install the [vue-i18n](https://kazupon.github.io/vue-i18n/) plugin through the Vue CLI Graphical User Interface (GUI). https://player.vimeo.com/video/ 396 yes no 2019-12-26T16:00:00+01:00 no https://vueschool.io/lessons/translations-in-action 2026-05-20 monthly 0.8 Translations in Action Video Lesson In this lesson, you'll learn how to add, modify, and delete translations. We'll see how we can add additional languages, work directly with JSON files, and also explore the power of Vue CLI when wo... https://player.vimeo.com/video/ 554 yes no 2020-01-02T16:00:00+01:00 no https://vueschool.io/lessons/changing-locale 2026-05-20 monthly 0.8 Changing Locale Video Lesson It is important that users are able to change the language on our website when we support multiple languages. https://player.vimeo.com/video/ 96 yes no 2020-01-09T11:06:00+01:00 no https://vueschool.io/lessons/persist-locale-changes 2026-05-21 monthly 0.8 Persist Locale Changes Video Lesson In the previous lesson, we learned how to change the active locale programmatically and how users can set their preferred locale through the user interface. However, we didn't persist the changes,... https://player.vimeo.com/video/ 179 yes no 2020-01-09T11:06:00+01:00 no https://vueschool.io/lessons/getting-the-locale-from-the-browser 2026-05-21 monthly 0.8 Getting the Locale from the Browser Video Lesson In this lesson, we'll learn another technique to detect which language a user prefers. We'll learn how to get the user's locale directly from the browser. https://player.vimeo.com/video/ 225 yes no 2020-01-17T13:44:00+01:00 no https://vueschool.io/lessons/named-formatting 2026-05-21 monthly 0.8 Named Formatting Video Lesson In this lesson, we'll learn how to use named formatting with vue-i18n to include dynamic text in our translations. https://player.vimeo.com/video/ 168 yes no 2020-01-17T13:46:00+01:00 no https://vueschool.io/lessons/pluralisation 2026-05-21 monthly 0.8 Pluralisation Video Lesson In this lesson, we'll learn how to use vue-i18n and translate with pluralization. We'll learn how to cover singular and plural, how to pass in and use the actual count, and also take a look at how... https://player.vimeo.com/video/ 260 yes no 2020-01-23T10:34:00+01:00 no https://vueschool.io/lessons/format-dates-and-time 2026-05-21 monthly 0.8 Format Dates and Time Video Lesson One thing that can be challenging when working with a multilingual website is to manage the different date and time formats. In this lesson, we'll learn some powerful techniques that make it easy t... https://player.vimeo.com/video/ 436 yes no 2020-01-30T14:37:00+01:00 no https://vueschool.io/lessons/vue-i18n-number-localization 2026-05-21 monthly 0.8 Number Localization Video Lesson When it comes to localization, all countries do not display the currency and dates in the same way, even if they have the same language. https://player.vimeo.com/video/ 292 yes no 2020-04-23T13:21:00+02:00 no https://vueschool.io/lessons/component-interpolation-working-with-links 2026-05-21 monthly 0.8 Component Interpolation (Working with links) Video Lesson In this lesson, we'll learn how to best work with sentences that include links. https://player.vimeo.com/video/ 328 yes no 2020-04-30T14:46:00+02:00 no https://vueschool.io/lessons/vue-i18n-style-number-formatting 2026-05-21 monthly 0.8 Style Number Formatting Video Lesson In this lesson, we'll learn how to style and control the visuals of our numbers. This is handy if we want to emphasize certain parts of our number, or if we want to reduce the size of the currency... https://player.vimeo.com/video/ 244 yes no 2020-05-07T16:09:00+02:00 no https://vueschool.io/courses/learn-graphql-fundamentals 2026-05-12 monthly 0.8 https://vueschool.io/lessons/what-is-graphql 2026-03-29 monthly 0.8 What is GraphQL Video Lesson In this lesson, we'll learn what GraphQL is and what some of the benefits of using GraphQL are. https://player.vimeo.com/video/ 242 yes no 2020-07-30T08:00:00+02:00 no https://vueschool.io/lessons/exploring-graphiql 2026-05-04 monthly 0.8 Exploring GraphiQL Video Lesson In this lesson, we'll dive into the excellent GraphiQL tool. GraphiQL is an interactive in-browser IDE to explore and test GraphQL APIs. https://player.vimeo.com/video/ 197 yes no 2020-07-30T08:00:00+02:00 yes https://vueschool.io/lessons/using-graphiql 2026-05-04 monthly 0.8 Using GraphiQL Video Lesson In this lesson, we'll learn how to use the powerful GraphiQL tool, to explore our APIs. https://player.vimeo.com/video/ 320 yes no 2020-08-13T14:15:00+02:00 yes https://vueschool.io/lessons/graphql-queries 2026-05-04 monthly 0.8 GraphQL Queries Video Lesson In this lesson, we'll learn about over and under fetching, and how we can control it with GraphQL queries. https://player.vimeo.com/video/ 365 yes no 2020-08-25T11:00:00+02:00 yes https://vueschool.io/lessons/graphql-mutations 2026-05-04 monthly 0.8 GraphQL Mutations Video Lesson In this lesson, we'll learn how to modify (insert, update, and delete) data with GraphQL mutations. https://player.vimeo.com/video/ 286 yes no 2020-08-27T11:00:00+02:00 yes https://vueschool.io/courses/vue-router-for-everyone 2026-05-12 monthly 0.8 https://vueschool.io/lessons/vue-router-course-and-resource-overview 2026-05-26 monthly 0.8 Vue Router Course and Resource overview Video Lesson In this lesson, we're demonstrating the [travel app](https://vue-router-course.netlify.com/) that we are going to build while learning how to master the Vue.js Router. https://player.vimeo.com/video/ 201 yes no 2019-07-18T12:06:00+02:00 no https://vueschool.io/lessons/create-a-new-project-with-vue-router-using-the-vue-cli-ui 2026-05-26 monthly 0.8 Create a new project with Vue Router using the Vue CLI UI Video Lesson In this lesson, we’re learning how to create a new Vue project that includes the Vue router with the Vue CLI GUI. https://player.vimeo.com/video/ 171 yes no 2019-07-18T12:06:00+02:00 no https://vueschool.io/lessons/understanding-how-vue-router-is-setup 2026-05-26 monthly 0.8 Understanding how Vue Router is setup Video Lesson In this lesson, we’re getting a tour in our newly created Vue project that we created with Vue CLI GUI. https://player.vimeo.com/video/ 300 yes no 2019-07-18T12:06:00+02:00 no https://vueschool.io/lessons/vuejs-router-creating-routes 2026-05-26 monthly 0.8 Creating Routes Video Lesson In this lesson, we’re going to learn how to add new routes and pages to the Vue Router. https://player.vimeo.com/video/ 414 yes no 2019-07-25T18:00:00+02:00 no https://vueschool.io/lessons/how-to-lazy-load-routes-with-vue-router 2026-05-26 monthly 0.8 How to lazy load routes with Vue Router Video Lesson In this lesson, we’re going to learn how to lazy load Vue Router routes and what it actually means to lazy load components and routes. https://player.vimeo.com/video/ 299 yes no 2019-07-25T18:00:00+02:00 no https://vueschool.io/lessons/vue-router-active-class 2026-06-02 monthly 0.8 Vue Router Active Class Video Lesson In this lesson, we learn about Vue router active class. The active class is automatically handled by the `router-link` component and allows us to mark which route we are currently viewing with CSS. https://player.vimeo.com/video/ 199 yes no 2019-08-01T15:00:00+02:00 no https://vueschool.io/lessons/vue-router-named-routes-and-params 2026-06-02 monthly 0.8 Vue Router Named Routes and Params Video Lesson In this lesson, we learn how to work with Vue router and named routes. We also learn how to pass dynamic parameters to the router, called params. https://player.vimeo.com/video/ 226 yes no 2019-08-01T15:00:00+02:00 no https://vueschool.io/lessons/vue-router-dynamic-routes 2026-06-02 monthly 0.8 Vue Router Dynamic Routes Video Lesson In this lesson, we’ll learn how to work with dynamic routes in Vue router. https://player.vimeo.com/video/ 235 yes no 2019-08-08T14:00:00+02:00 no https://vueschool.io/lessons/how-to-rerender-components-when-vue-router-params-changes 2026-06-02 monthly 0.8 How to rerender components when vue router params changes Video Lesson In this lesson, we learn how to re-render components when Vue Router params of the same route changes. https://player.vimeo.com/video/ 269 yes no 2019-08-08T14:00:00+02:00 no https://vueschool.io/lessons/how-to-pass-vue-router-params-as-props-to-components 2026-06-02 monthly 0.8 How to pass Vue Router params as props to components Video Lesson In this lesson, we’ll do some refactoring to improve our travel app. First we'll refactor our route params from using an ID to using a slug. At the end of the lesson, we learn how to pass route p... https://player.vimeo.com/video/ 232 yes no 2019-08-15T09:50:00+02:00 no https://vueschool.io/lessons/vue-router-nested-routes 2026-06-02 monthly 0.8 Vue Router Nested Routes Video Lesson In this lesson, we're learning how to work with nested routes. Nested routes and multiple router-views are a common pattern. However, there are a few things you have to do correctly to make it work... https://player.vimeo.com/video/ 453 yes no 2019-08-22T16:00:00+02:00 no https://vueschool.io/lessons/creating-a-go-back-button 2026-06-02 monthly 0.8 Creating a Go-Back button Video Lesson In this lesson, we learn how to create a go-back button and programmatically navigate to the previously visited page with Vue Router. https://player.vimeo.com/video/ 117 yes no 2019-08-22T16:00:00+02:00 no https://vueschool.io/lessons/how-to-create-route-transitions-with-vue-router 2026-06-02 monthly 0.8 How to create route transitions with Vue Router Video Lesson In this lesson, we learn how to create cool transitions when users navigate between pages on our website with the [transition classes](https://vuejs.org/v2/guide/transitions.html#Transition-Classes... https://player.vimeo.com/video/ 208 yes no 2019-08-22T16:00:00+02:00 no https://vueschool.io/lessons/how-to-create-a-404-not-found-route-and-page-with-vue-router 2026-06-02 monthly 0.8 How to create a 404 Not Found route and page with Vue Router Video Lesson In this lesson, we're learning how to create a route that catches all non-existing routes with vue router. This is the classic 404 Not found behavior. https://player.vimeo.com/video/ 299 yes no 2019-08-29T16:00:00+02:00 no https://vueschool.io/lessons/how-to-control-the-scroll-behavior-of-vue-router 2026-06-02 monthly 0.8 How to control the scroll behavior of Vue Router Video Lesson In this lesson, we learn how to add and control scroll behavior when navigating to sections on the same page. This technique is very handy and can provide a much better user experience to our appli... https://player.vimeo.com/video/ 310 yes no 2019-08-29T16:00:00+02:00 no https://vueschool.io/lessons/how-to-configure-an-authentication-middleware-route-guard-with-vue-router 2026-06-02 monthly 0.8 How to configure an authentication middleware (route guard) with Vue Router Video Lesson In this lesson, we'll learn how to create authentication middleware by using route guards and meta fields. https://player.vimeo.com/video/ 559 yes no 2019-09-12T00:00:00+02:00 no https://vueschool.io/lessons/vue-router-query-parameters 2026-06-02 monthly 0.8 Vue Router Query Parameters Video Lesson In this lesson, we'll learn what query parameters are and how we can use them in our Vue.js applications with Vue Router. https://player.vimeo.com/video/ 270 yes no 2019-09-12T00:00:00+02:00 no https://vueschool.io/courses/modern-javascript-es6-and-beyond 2026-05-12 monthly 0.8 https://vueschool.io/lessons/why-is-es6-and-beyond-considered-to-be-modern-javascript 2026-05-03 monthly 0.8 Why is ES6 and beyond considered to be modern JavaScript? Video Lesson In the first lesson of our course about modern JavaScript, including ES6, ES7, and ES8, we briefly explain the differences between older and newer versions of JavaScript. https://player.vimeo.com/video/ 94 yes no 2019-07-04T12:49:00+02:00 no https://vueschool.io/lessons/what-is-the-difference-between-var-let-and-const 2026-05-03 monthly 0.8 What is the difference between var, let and const? Video Lesson In this lesson from our modern JavaScript course about ES6, ES7, ES8, we will answer the commonly asked question, "What is the difference between the var, let and const keywords in JavaScript?" https://player.vimeo.com/video/ 266 yes no 2019-07-04T12:49:00+02:00 no https://vueschool.io/lessons/learn-how-to-use-arrow-functions-in-javascript-es6 2026-05-03 monthly 0.8 Learn how to use arrow functions in JavaScript ES6 Video Lesson In this lesson, we’ll learn how to use ES6 arrow functions. Arrow functions are a syntactically compact alternative to regular *function expressions*. https://player.vimeo.com/video/ 485 yes no 2019-08-13T09:09:00+02:00 yes https://vueschool.io/lessons/es6-template-literals-and-string-interpolation 2026-05-03 monthly 0.8 ES6 Template Literals and String Interpolation Video Lesson ES6 introduced a new way to declare and work with strings. In this lesson, we’ll learn about string interpolation and the opportunities the template literals opens up. https://player.vimeo.com/video/ 310 yes no 2019-08-13T09:09:00+02:00 yes https://vueschool.io/lessons/learn-how-to-set-default-parameter-values-in-javascript-functions 2026-05-03 monthly 0.8 Learn how to set default parameter values in JavaScript functions Video Lesson Prior to ES6, it wasn't possible to set default parameter values when defining our functions in JavaScript. In this lesson, we learn how to create default values to our function parameters. https://player.vimeo.com/video/ 239 yes no 2019-08-27T14:00:00+02:00 no https://vueschool.io/lessons/learn-what-the-rest-and-spread-operators-are-in-es6 2026-05-03 monthly 0.8 Learn what the Rest and Spread operators are in ES6 Video Lesson In this lesson, we'll learn about the Rest and Spread operators which were added to JavaScript in ES6. https://player.vimeo.com/video/ 202 yes no 2019-09-03T16:00:00+02:00 yes https://vueschool.io/lessons/learn-which-features-and-syntaxes-changes-es6-introduced-to-javascript-objects 2026-05-03 monthly 0.8 Learn which features and syntax changes ES6 introduced to JavaScript Objects Video Lesson ES6 introduced new features and syntaxes for Objects. In this lesson, we will learn how to omit to explicitly define the key for properties and functions in certain circumstances. We'll also learn... https://player.vimeo.com/video/ 279 yes no 2019-08-27T14:00:00+02:00 yes https://vueschool.io/lessons/learn-what-es6-modules-are-and-how-to-export-and-import-them 2026-05-03 monthly 0.8 Learn what ES6 modules are and how to export and import them Video Lesson ES6 introduced modules to JavaScript. Modules are chunks of JavaScripts that can be exported and then imported in other files in your application. In this lesson, we'll learn how to do so with the... https://player.vimeo.com/video/ 306 yes no 2019-09-10T16:00:00+02:00 yes https://vueschool.io/lessons/learn-how-to-create-classes-in-javascript-es6 2026-05-03 monthly 0.8 Learn how to create Classes in JavaScript (ES6) Video Lesson ES6 introduced the `class` keyword to provide class-based programming in JavaScript. In this lesson, we'll learn how to create classes in JavaScript. We also learn how to create classes that extend... https://player.vimeo.com/video/ 227 yes no 2019-09-10T16:00:00+02:00 yes https://vueschool.io/lessons/learn-promises-in-javascript 2026-05-03 monthly 0.8 Learn Promises in JavaScript Video Lesson In this lesson, we're learning how we can use Promises to work with asynchronous code and fetch resources from third party APIs. We'll be using the fun and delightful [dog.ceo](https://dog.ceo/dog-... https://player.vimeo.com/video/ 746 yes no 2019-10-11T12:53:00+02:00 yes https://vueschool.io/lessons/learn-asyncawait-in-javascript 2026-05-03 monthly 0.8 Learn Async/Await in JavaScript Video Lesson In this lesson, we'll learn an alternative method for working with Promises and asynchronous code, namely async/await. https://player.vimeo.com/video/ 472 yes no 2019-10-17T14:44:00+02:00 yes https://vueschool.io/lessons/learn-how-to-work-with-sets-and-maps-in-javascript 2026-05-03 monthly 0.8 Learn how to work with Sets and Maps in JavaScript Video Lesson In this lesson, we learn about two new data structures that were added to JavaScript in ES6 - Sets, and Maps. https://player.vimeo.com/video/ 688 yes no 2019-11-21T10:08:00+01:00 yes https://vueschool.io/lessons/what-is-symbols-in-javascript 2026-05-03 monthly 0.8 What is symbols in JavaScript? Video Lesson ES6 introduced a new datatype called Symbols. Symbols are a very powerful feature that allows us to mitigate the risk of name collisions, typically in plugins and libraries. https://player.vimeo.com/video/ 399 yes no 2019-12-19T13:24:00+01:00 yes https://vueschool.io/lessons/learn-which-object-methods-was-added-in-es6-javascript 2026-05-03 monthly 0.8 Learn which Object Methods was added in ES6 JavaScript Video Lesson ES6 introduced some new methods to JavaScript objects. In this lesson, we learn how to use the new `assign`, `keys`, `values`, and `entries` methods in our applications. https://player.vimeo.com/video/ 400 yes no 2019-12-05T17:24:00+01:00 yes https://vueschool.io/lessons/learn-the-new-string-methods-in-es6-javascript 2026-05-03 monthly 0.8 Learn the new String methods in ES6 JavaScript Video Lesson We got some new and handy string methods in JavaScript with ES6. This lesson covers these handy methods and demonstrates how they can be valuable to our JavaScript applications. https://player.vimeo.com/video/ 336 yes no 2019-11-28T13:54:00+01:00 yes https://vueschool.io/lessons/how-to-destructure-arrays-and-objects-in-javascript-es6 2026-05-03 monthly 0.8 How to Destructure Arrays and Objects in JavaScript ES6 Video Lesson In this lesson, we'll learn about the destructuring assignment syntax, which makes it possible to unpack values from JavaScript arrays, or properties from objects into separate variables. https://player.vimeo.com/video/ 331 yes no 2019-09-03T16:00:00+02:00 yes https://vueschool.io/lessons/learn-array-foreach-and-array-map-in-javascript-es6 2026-05-03 monthly 0.8 Learn Array.forEach and Array.map in JavaScript Video Lesson In this lesson, we'll learn how to use two new array helper methods that was introduced to JavaScript in ES6, namely the Array.forEach and Array.map functions. https://player.vimeo.com/video/ 168 yes no 2019-10-24T11:58:00+02:00 yes https://vueschool.io/lessons/learn-array-filter-in-javascript-es6 2026-05-03 monthly 0.8 Learn Array.filter in JavaScript Video Lesson In this lesson, we'll learn how to use the Array.filter helper method that was introduced to JavaScript in ES6. https://player.vimeo.com/video/ 102 yes no 2019-10-24T11:59:00+02:00 yes https://vueschool.io/lessons/learn-array-find-in-javascript-es6 2026-05-03 monthly 0.8 Learn Array.find in JavaScript Video Lesson In this lesson, we'll learn how to use the Array.find helper method that was introduced to JavaScript in ES6. https://player.vimeo.com/video/ 202 yes no 2019-10-31T19:39:00+01:00 yes https://vueschool.io/lessons/learn-array-indexof-in-javascript-es6 2026-05-03 monthly 0.8 Learn Array.indexOf in JavaScript Video Lesson In this lesson, we'll learn how to use the Array.indexOf helper method that was introduced to JavaScript in ES6. https://player.vimeo.com/video/ 113 yes no 2019-10-31T19:40:00+01:00 yes https://vueschool.io/lessons/learn-array-reduce-in-javascript-es6 2026-05-03 monthly 0.8 Learn Array.reduce in JavaScript Video Lesson In this lesson, we'll learn how to use the Array.reduce helper method that was introduced to JavaScript in ES6. https://player.vimeo.com/video/ 309 yes no 2019-11-07T11:16:00+01:00 yes https://vueschool.io/lessons/exercise-use-multiple-array-helper-methods-together 2026-05-03 monthly 0.8 Exercise: Use multiple Array helper methods together Video Lesson In this lesson, you can see how powerful the Array helper methods, that were introduced to JavaScript in ES6, can be when used together. https://player.vimeo.com/video/ 243 yes no 2019-11-07T11:17:00+01:00 yes https://vueschool.io/lessons/number-methods 2026-05-03 monthly 0.8 Number Methods Video Lesson In this lesson, we'll learn about the new methods that ES6 introduced to improve how we work with numbers. https://player.vimeo.com/video/ 263 yes no 2019-12-12T12:52:00+01:00 yes https://vueschool.io/lessons/learn-how-to-use-generator-functions-in-javascript 2026-05-03 monthly 0.8 Learn How To Use Generator Functions in JavaScript Video Lesson In this lesson, we're learning about a new type of function that ES6 introduced to JavaScript - namely the Generator functions. https://player.vimeo.com/video/ 536 yes no 2020-02-28T16:00:00+01:00 yes https://vueschool.io/lessons/learn-how-to-use-generators-with-iterators-and-iterables-in-javascript 2026-05-03 monthly 0.8 Learn How To Use Generators With Iterators and Iterables in JavaScript Video Lesson In this lesson, we'll learn how we can use generator functions to make objects iterable. This is a powerful technique that should be used with caution. https://player.vimeo.com/video/ 185 yes no 2020-03-12T15:10:00+01:00 yes https://vueschool.io/courses/web-accessibility-fundamentals 2026-05-12 monthly 0.8 https://vueschool.io/lessons/introduction-to-web-accessibility-fundamentals 2026-05-04 monthly 0.8 Introduction to Web Accessibility Fundamentals Video Lesson In this lesson, we’ll give a quick walkthrough of what we’ll learn in this accessibility course. We’ll also learn why we often refer to accessibility as A11y. https://player.vimeo.com/video/ 63 yes no 2019-10-02T15:22:00+02:00 no https://vueschool.io/lessons/population 2026-05-04 monthly 0.8 Population Video Lesson In this lesson, we learn about how many people have some sort of impairment. We also get to see a demo of how an application might look like for someone with a visual impairment. https://player.vimeo.com/video/ 266 yes no 2019-10-02T15:22:00+02:00 yes https://vueschool.io/lessons/business-advantages-of-accessible-websites 2026-05-04 monthly 0.8 Business advantages of accessible websites Video Lesson In this lesson, we learn about the business advantages of having accessible websites. We also talk about the responsibility of making inclusive websites and the legal aspect in many countries. https://player.vimeo.com/video/ 119 yes no 2019-10-09T13:31:00+02:00 yes https://vueschool.io/lessons/web-content-accessibility-guidelines-wcag 2026-05-04 monthly 0.8 Web Content Accessibility Guidelines (WCAG) Video Lesson In this lesson, we'll learn about the Web Content Accessibility Guidelines (WCAG), and get an introduction to the four principles of accessibility, and what they embrace: https://player.vimeo.com/video/ 194 yes no 2020-02-20T14:35:00+01:00 yes https://vueschool.io/lessons/color-and-color-contrast 2026-05-04 monthly 0.8 Color and Color Contrast Video Lesson In this lesson, we'll learn how important color and color contrast is for the accessibility of our website. We'll learn how to simulate how colorblind users perceive our websites and use tools and... https://player.vimeo.com/video/ 352 yes no 2020-03-04T20:45:00+01:00 yes https://vueschool.io/lessons/link-color 2026-05-04 monthly 0.8 Link Color Video Lesson In this lesson, we'll continue to learn about the importance of colors and contrast. We will focus on how we can make our links accessible with color and text-decoration. https://player.vimeo.com/video/ 312 yes no 2020-04-09T17:44:00+02:00 yes https://vueschool.io/lessons/choosing-the-right-font-family 2026-05-04 monthly 0.8 Choosing the right Font Family Video Lesson It's important that our websites are readable. In this lesson, we'll learn about the criteria for making our text readable, legible, and thus accessible for our users. https://player.vimeo.com/video/ 267 yes no 2020-04-16T17:00:00+02:00 yes https://vueschool.io/courses/the-vuejs-3-options-api-master-class 2026-05-12 monthly 0.8 https://vueschool.io/lessons/what-do-i-need-to-take-the-vue-3-masterclass 2026-05-28 monthly 0.8 What Do I Need to Take the Vue 3 Masterclass? Video Lesson In this lesson, we’ll go through the software you need to take our Vue 3 Masterclass. https://player.vimeo.com/video/ 159 yes no 2021-01-27T10:59:00+01:00 no https://vueschool.io/lessons/install-vue-cli-and-its-dependencies 2026-05-30 monthly 0.8 Install Vue CLI and Its Dependencies Video Lesson Vue CLI is a simple, but powerful utility tool (Command Line Interface) for scaffolding Vue.js projects with different build systems. With the Vue CLI you will have a boilerplate application ready... https://player.vimeo.com/video/ 321 yes no 2021-01-27T10:55:00+01:00 yes https://vueschool.io/lessons/scaffold-a-new-vue-3-project-with-vue-cli 2026-05-30 monthly 0.8 Scaffold a New Vue 3 Project With Vue CLI Video Lesson In this lesson, we’ll scaffold - or create - a new Vue 3 project from scratch with Vue CLI in our terminal. https://player.vimeo.com/video/ 167 yes no 2021-01-27T11:09:00+01:00 yes https://vueschool.io/lessons/exploring-the-scaffolded-vue-3-project 2026-05-30 monthly 0.8 Exploring the Scaffolded Vue 3 Project Video Lesson In this lesson, we'll look through the boilerplate that Vue CLI made for us. We’ll not cover how to install Vue CLI. If that’s what you’re looking for, check out our [Install Vue CLI lesson](... https://player.vimeo.com/video/ 272 yes no 2021-01-27T11:13:00+01:00 yes https://vueschool.io/lessons/automatic-and-static-code-review-with-eslint-linting 2026-05-30 monthly 0.8 Automatic and Static Code Review With ESLint (Linting) Video Lesson A linter is a software that programmatically reviews your code and reports suspicious code to the author. https://player.vimeo.com/video/ 565 yes no 2021-01-27T11:19:00+01:00 yes https://vueschool.io/lessons/choosing-eslint-presets 2026-05-30 monthly 0.8 Choosing ESLint Presets Video Lesson In this lesson, we'll review the different ESLint presets that we have available for our Vue projects. https://player.vimeo.com/video/ 379 yes no 2021-01-27T13:57:00+01:00 yes https://vueschool.io/lessons/initialize-a-vue-3-app-using-createapp 2026-05-30 monthly 0.8 Initialize a Vue 3 App Using createApp Video Lesson In this lesson, we will review the initialization code to understand how our Vue application is created and mounted to the DOM. https://player.vimeo.com/video/ 330 yes no 2021-01-27T11:29:00+01:00 yes https://vueschool.io/lessons/structuring-our-forum-data 2026-05-30 monthly 0.8 Structuring Our Forum Data Video Lesson In this lesson, we'll take a break to decide how we should structure our application's data. https://player.vimeo.com/video/ 515 yes no 2021-01-27T11:34:00+01:00 yes https://vueschool.io/lessons/how-to-import-data-from-json-files-in-a-vue-3-app 2026-05-30 monthly 0.8 How to Import Data From JSON Files in a Vue 3 App Video Lesson In this lesson, we'll learn how to import data from static JSON files into our Vue.js applications. https://player.vimeo.com/video/ 206 yes no 2021-01-27T11:37:00+01:00 yes https://vueschool.io/lessons/displaying-a-list-of-elements-in-vue-3 2026-05-30 monthly 0.8 Displaying a List of Elements in Vue 3 Video Lesson In this lesson, we’ll create the first page of our forum - the home page. https://player.vimeo.com/video/ 747 yes no 2021-01-27T11:42:00+01:00 yes https://vueschool.io/lessons/styling-vue-components 2026-05-30 monthly 0.8 Styling Vue Components Video Lesson In this lesson, we'll import and setup the theme for our forum application. Make sure you grab the stylesheet from below if you're following along. https://player.vimeo.com/video/ 358 yes no 2021-02-04T12:00:00+01:00 yes https://vueschool.io/lessons/install-and-configure-vue-router-4 2026-05-30 monthly 0.8 Install and Configure Vue Router 4 Video Lesson In this lesson, we'll learn how to install and configure the Vue Router. https://player.vimeo.com/video/ 435 yes no 2021-02-04T15:26:00+01:00 yes https://vueschool.io/lessons/using-router-link-to-navigate-between-page-components 2026-06-01 monthly 0.8 Using router-link to Navigate Between Page Components Video Lesson In this lesson, we’ll learn how our single page application can take advantage of the powerful vue-router by navigating to routes without reloading the page. We'll also cover named routes. https://player.vimeo.com/video/ 247 yes no 2021-02-11T18:37:00+01:00 yes https://vueschool.io/lessons/creating-a-not-found-page-with-vue-router 2026-06-01 monthly 0.8 Creating a Not Found Page with Vue Router Video Lesson Since we're creating a single page application, we need to create a route that will catch all non-existing pages/routes. https://player.vimeo.com/video/ 290 yes no 2021-02-11T18:38:00+01:00 yes https://vueschool.io/lessons/reorganizing-the-page-components 2026-06-01 monthly 0.8 Reorganizing the Page Components Video Lesson In this lesson, we'll reorganize our page components and do some housekeeping so our project stays nice and clean. https://player.vimeo.com/video/ 292 yes no 2021-02-25T17:11:00+01:00 yes https://vueschool.io/lessons/creating-a-forum-post-component 2026-06-01 monthly 0.8 Creating a Forum Post Component Video Lesson In this lesson, we'll continue on the path we started in the previous lesson by refactoring the `ThreadShow` component and extract the posts to a new component. https://player.vimeo.com/video/ 378 yes no 2021-02-25T17:11:00+01:00 yes https://vueschool.io/lessons/creating-base-components-in-a-vue-application 2026-06-01 monthly 0.8 Creating Base Components in a Vue Application Video Lesson In this lesson, we'll create a Base Component to handle the dates in our forum. https://player.vimeo.com/video/ 369 yes no 2021-03-04T16:13:00+01:00 yes https://vueschool.io/lessons/adding-human-readable-dates 2026-06-01 monthly 0.8 Adding Human Readable Dates Video Lesson In this lesson, we’ll install a node module and learn how to import the external JavaScript library. With the Day.js library, we'll transform our dates into human-readable dates. https://player.vimeo.com/video/ 433 yes no 2021-03-04T16:12:00+01:00 yes https://vueschool.io/lessons/organizing-threads-in-forums 2026-06-02 monthly 0.8 Organizing Threads in Forums Video Lesson In this lesson, we'll implement the Forum page in our application. A forum is a group of threads, which is about the same topic. https://player.vimeo.com/video/ 390 yes no 2021-03-11T20:35:00+01:00 yes https://vueschool.io/lessons/how-to-migrate-vue-applications-state-to-vuex 2026-06-02 monthly 0.8 How to Migrate Vue Application’s State to Vuex Video Lesson In this lesson, we'll install Vuex and set up our store. Vuex is the official state management pattern and library for Vue.js. https://player.vimeo.com/video/ 623 yes no 2021-03-18T18:16:00+01:00 yes https://vueschool.io/lessons/vuex-actions-and-mutations 2026-06-02 monthly 0.8 Vuex Actions & Mutations Video Lesson In this lesson, we'll continue with the refactoring and set up our Vuex Actions and Mutations so we can create new posts and store them in Vuex. https://player.vimeo.com/video/ 393 yes no 2021-03-18T18:16:00+01:00 yes https://vueschool.io/lessons/creating-a-forum-navbar 2026-06-02 monthly 0.8 Creating a Forum Navbar Video Lesson In this lesson, we'll create a navbar so we can navigate our forum. https://player.vimeo.com/video/ 245 yes no 2021-03-18T18:17:00+01:00 yes https://vueschool.io/lessons/fetching-the-authenticated-user-from-vuex 2026-06-02 monthly 0.8 Fetching the Authenticated User From Vuex Video Lesson In this lesson, we’ll create the functionality for getting the authenticated user directly from the state and display it in the NavBar. https://player.vimeo.com/video/ 214 yes no 2021-03-25T16:51:00+01:00 yes https://vueschool.io/lessons/global-styles-and-stylesheet-processing 2026-05-30 monthly 0.8 Global Styles and Stylesheet Processing Video Lesson In this lesson, we'll learn how we can individually style our components to increase the performance of our vue.js applications. https://player.vimeo.com/video/ 271 yes no 2021-02-04T12:00:00+01:00 yes https://vueschool.io/lessons/dynamic-route-matching-route-params 2026-05-30 monthly 0.8 Dynamic Route Matching & Route Params Video Lesson In this lesson, we'll learn how to create dynamic routes with Vue Router. We'll create a route that will match `/thread/5`, and we'll fetch and show the thread with the provided ID (5). https://player.vimeo.com/video/ 360 yes no 2021-02-04T15:27:00+01:00 yes https://vueschool.io/lessons/extract-router-configuration 2026-05-30 monthly 0.8 Extract Router Configuration Video Lesson In this lesson, we'll learn how to extract our router configuration to a separate file. https://player.vimeo.com/video/ 129 yes no 2021-02-04T15:27:00+01:00 yes https://vueschool.io/lessons/create-threadlist-vue-and-clean-up-the-homepage 2026-05-30 monthly 0.8 Create ThreadList.vue and Clean up the Homepage Video Lesson In this lesson, we'll create a ThreadList component and clean up our homepage. https://player.vimeo.com/video/ 523 yes no 2021-02-11T18:37:00+01:00 yes https://vueschool.io/lessons/redirect-with-vue-router-without-changing-the-url 2026-06-01 monthly 0.8 Redirect With Vue Router Without Changing the URL Video Lesson In this lesson, we'll learn to use the Vue router's Route Guards (middleware) to check if a resource exists before entering the route. https://player.vimeo.com/video/ 628 yes no 2021-02-11T18:39:00+01:00 yes https://vueschool.io/lessons/creating-a-post-editor-component 2026-06-01 monthly 0.8 Creating a Post Editor Video Lesson In this lesson, we'll create a post editor, so that users can participate in discussions in our forum. https://player.vimeo.com/video/ 663 yes no 2021-02-25T17:12:00+01:00 yes https://vueschool.io/lessons/communication-between-components-1 2026-06-01 monthly 0.8 Communication Between Components Video Lesson In this lesson, we'll extract the post editor to a PostEditor component and wire up the communication between the parent and child components. https://player.vimeo.com/video/ 506 yes no 2021-02-25T17:12:00+01:00 yes https://vueschool.io/lessons/registering-base-components-globally 2026-06-01 monthly 0.8 Registering Base Components Globally Video Lesson In this lesson, we'll learn how to register our Base Components globally in our Vue.js application. This allows us to use the component directly without importing and registering it everywhere befo... https://player.vimeo.com/video/ 348 yes no 2021-03-04T16:14:00+01:00 yes https://vueschool.io/lessons/creating-a-forumlist-component 2026-06-02 monthly 0.8 Creating a ForumList Component Video Lesson In this lesson, we'll move the threads from our home page and refactor them into a ForumList component. https://player.vimeo.com/video/ 522 yes no 2021-03-11T20:36:00+01:00 yes https://vueschool.io/lessons/introducing-categories-collections-of-forums 2026-06-02 monthly 0.8 Introducing Categories, Collections of Forums Video Lesson In this lesson, we'll implement Categories in our application. Categories are collections of forums. It is the very first node in our application structure, and it is of great organizational help! https://player.vimeo.com/video/ 757 yes no 2021-03-12T15:56:00+01:00 yes https://vueschool.io/lessons/creating-the-user-profile-page 2026-06-03 monthly 0.8 Creating the User Profile Page Video Lesson In this lesson, we’ll create a Profile page which will be the page we use to display information about the given user, which threads he's participated in, and so on. https://player.vimeo.com/video/ 438 yes no 2021-03-25T16:52:00+01:00 yes https://vueschool.io/lessons/extracting-user-posts-and-threads-to-the-store 2026-06-03 monthly 0.8 Extracting User Posts and Threads to the Store Video Lesson In this lesson, we'll improve our Profile page and extract the user's posts and threads to our Vuex store. https://player.vimeo.com/video/ 384 yes no 2021-03-25T16:53:00+01:00 yes https://vueschool.io/lessons/javascript-passed-by-reference-vs-by-value 2026-06-03 monthly 0.8 JavaScript: Passed by Reference vs by Value Video Lesson This lesson is not a Vue.js tutorial. Instead, we’ll go through an important concept in JavaScript. It is important to understand how variable types are stored and copied in JavaScript. They can... https://player.vimeo.com/video/ 264 yes no 2021-03-25T16:52:00+01:00 yes https://vueschool.io/lessons/updating-the-user-profile 2026-06-03 monthly 0.8 Updating the User Profile Video Lesson In this lesson, we'll create a `UserProfileCardEditor` component and let users update their profile page. https://player.vimeo.com/video/ 454 yes no 2021-03-25T16:53:00+01:00 yes https://vueschool.io/lessons/sharing-components-between-multiple-pages 2026-06-03 monthly 0.8 Sharing Components Between Multiple Pages Video Lesson In this lesson, we'll learn how to share one Page component between two routes and show different components on the page based on which route is active. https://player.vimeo.com/video/ 281 yes no 2021-04-01T17:04:00+02:00 yes https://vueschool.io/lessons/using-the-authid-when-creating-new-posts 2026-06-03 monthly 0.8 Using the authId When Creating new posts Video Lesson In this lesson, we’ll make a few enhancements and fix a few small things that we've missed in the previous lessons. https://player.vimeo.com/video/ 142 yes no 2021-04-01T17:05:00+02:00 yes https://vueschool.io/lessons/creating-new-forum-threads 2026-06-03 monthly 0.8 Creating New Forum Threads Video Lesson We’ve come to a new chapter in The Vue.js 3 Masterclass, it's time to let our users start their own discussions by creating new threads. https://player.vimeo.com/video/ 214 yes no 2021-04-01T17:06:00+02:00 yes https://vueschool.io/lessons/refactoring-the-forum-thread-related-actions-and-mutations 2026-06-03 monthly 0.8 Refactoring the Forum Thread Related Actions and Mutations Video Lesson In this lesson, we'll do some refactoring and create the Vuex actions and mutations that will be responsible for creating new threads. https://player.vimeo.com/video/ 459 yes no 2021-04-01T17:06:00+02:00 yes https://vueschool.io/lessons/creating-a-route-to-create-new-forum-threads 2026-06-03 monthly 0.8 Creating a Route to Create New Forum Threads Video Lesson In this lesson, we'll build a new route that we can use to create new forum threads, and test drive what we’ve made so far in this chapter. https://player.vimeo.com/video/ 269 yes no 2021-04-01T17:06:00+02:00 yes https://vueschool.io/lessons/redirecting-when-creating-new-threads 2026-03-30 monthly 0.8 Redirecting When Creating New Threads Video Lesson In this vue.js lesson, we'll learn how to programatically redirect a user with Vue router. https://player.vimeo.com/video/ 224 yes no 2021-04-01T17:07:00+02:00 yes https://vueschool.io/lessons/creating-a-threadeditor-component 2026-03-30 monthly 0.8 Creating a ThreadEditor Component Video Lesson In this lesson, we'll extract our thread editor into an individual component and use route params when we create new threads. https://player.vimeo.com/video/ 233 yes no 2021-04-08T17:23:00+02:00 yes https://vueschool.io/lessons/editing-threads 2026-03-30 monthly 0.8 Editing Threads Video Lesson Now that we have the `ThreadEditor`component in place, it's time to refactor it so we can use it to edit our threads as well. https://player.vimeo.com/video/ 649 yes no 2021-04-08T17:23:00+02:00 yes https://vueschool.io/lessons/improving-the-threadeditor 2026-03-30 monthly 0.8 Improving the ThreadEditor Video Lesson In this lesson, we'll make some improvements and fix a few bugs in our application. https://player.vimeo.com/video/ 206 yes no 2021-04-08T17:24:00+02:00 yes https://vueschool.io/lessons/what-is-a-higher-order-function-in-javascript 2026-03-30 monthly 0.8 What Is a Higher Order Function in JavaScript? Video Lesson In this lesson we'll learn about a cool concept in Javascript called "Higher Order Functions". A higher order function in Javascript is a function that takes a function as one of its arguments or r... https://player.vimeo.com/video/ 419 yes no 2021-04-15T18:13:00+02:00 yes https://vueschool.io/lessons/creating-dynamic-vuex-getters-with-higher-order-functions 2026-03-30 monthly 0.8 Creating Dynamic Vuex Getters with Higher Order Functions Video Lesson In this lesson, we'll use "Dynamic Getters" to get our thread from the state along with some extra meta information that can be computed based on the thread properties stored in our data. https://player.vimeo.com/video/ 627 yes no 2021-04-15T18:35:00+02:00 yes https://vueschool.io/lessons/creating-vuex-mutations-with-higher-order-functions 2026-03-30 monthly 0.8 Creating Vuex Mutations with Higher Order Functions Video Lesson Higher order functions can be used to consolidate similar Vuex mutations into a single Higher Order function. Merging the logic of each "append child to parent" Vuex mutation into a single Higher O... https://player.vimeo.com/video/ 592 yes no 2021-04-15T18:34:00+02:00 yes https://vueschool.io/lessons/minor-improvements-before-introducing-the-cloud-firestore 2026-03-30 monthly 0.8 Minor Improvements Before Introducing the Cloud Firestore Video Lesson In this lesson, we'll continue to put our newly gained knowledge of "Dynamic Getters" to work for us by using the thread getter to fix the reply count on the Forum page. https://player.vimeo.com/video/ 357 yes no 2021-04-15T18:36:00+02:00 yes https://vueschool.io/lessons/scroll-to-top-with-vue-router 2026-06-03 monthly 0.8 Scroll to Top with Vue Router Video Lesson In this lesson, we'll learn a nice technique where we tell Vue Router to scroll the page to the top on certain navigations. https://player.vimeo.com/video/ 147 yes no 2021-04-01T17:05:00+02:00 yes https://vueschool.io/lessons/creating-helper-functions 2026-03-30 monthly 0.8 Creating Helper Functions Video Lesson In this lesson, we'll DRY up our code a bit and extracting some repeated code that's repeated throughout our store file. https://player.vimeo.com/video/ 553 yes no 2021-04-08T17:24:00+02:00 yes https://vueschool.io/lessons/firebase-setup-and-installation 2026-03-30 monthly 0.8 Firebase Setup and Installation Video Lesson Firebase is a google cloud solution that covers an array of needs such as hosting, authentication, server functions, file storage, databases, and more. In this lesson, we're going to get setup with... https://player.vimeo.com/video/ 401 yes no 2021-04-22T17:41:00+02:00 yes https://vueschool.io/lessons/set-up-the-cloud-firestore-database 2026-03-30 monthly 0.8 Set up the Cloud Firestore Database Video Lesson In this lesson, we're going to setup the Firestore database in the Firebase console. It's a quick and simple process that takes only a few clicks. https://player.vimeo.com/video/ 356 yes no 2021-04-22T17:42:00+02:00 yes https://vueschool.io/lessons/understanding-the-lifecycle-hooks-in-vue-js 2026-03-30 monthly 0.8 Understanding the Lifecycle Hooks in Vue.js Video Lesson Vue goes through a series of initialization steps when it's created - for example, it needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when... https://player.vimeo.com/video/ 393 yes no 2021-04-22T17:43:00+02:00 yes https://vueschool.io/lessons/migrating-vuex-to-use-cloud-firestore-database 2026-03-30 monthly 0.8 Migrating Vuex to use Cloud Firestore Database Video Lesson With the Firebase project set up and the lifecycle hooks fresh in memory we are ready to start migrating our vue.js application to use the data from the database instead of the JSON file. https://player.vimeo.com/video/ 664 yes no 2021-04-22T17:43:00+02:00 yes https://vueschool.io/lessons/fetching-data-from-cloud-firestore-with-vuex-actions 2026-03-30 monthly 0.8 Fetching Data from Cloud Firestore with Vuex Actions Video Lesson In this lesson, we're going to put the calls to the Cloud Firestore and the corresponding mutation commits in Vuex actions as is best practice. Then we'll clean up our code in the created at lifecy... https://player.vimeo.com/video/ 335 yes no 2021-04-22T17:44:00+02:00 yes https://vueschool.io/lessons/creating-reusable-vuex-actions-and-mutations 2026-03-30 monthly 0.8 Creating Reusable Vuex Actions and Mutations Video Lesson It is important to keep your code DRY, in the previous lesson we created Vuex actions to fetch threads, posts, and users but they all essentially do the same thing. https://player.vimeo.com/video/ 532 yes no 2021-04-29T12:00:00+02:00 yes https://vueschool.io/lessons/creating-vuex-actions-that-fetch-multiple-items-from-cloud-firestore 2026-03-30 monthly 0.8 Creating Vuex Actions that Fetch Multiple Items from Cloud Firestore Video Lesson When we're working with a data structure that has multiple resources grouped under https://player.vimeo.com/video/ 468 yes no 2021-04-29T17:31:00+02:00 yes https://vueschool.io/lessons/fetching-data-in-beforeCreate-on-the-homepage 2026-03-30 monthly 0.8 Fetching Data in beforeCreate on the Homepage Video Lesson With the tools ready to fetch single and multiple resources from Firebase, we're well equipped to work on more of the forum pages. https://player.vimeo.com/video/ 512 yes no 2021-04-29T17:32:00+02:00 yes https://vueschool.io/lessons/fetching-data-for-the-forum-page 2026-03-30 monthly 0.8 Fetching Data for the Forum Page Video Lesson In this lesson, we'll dispatch some of our newly created Vuex Actions in the created hook of the forum page to fill it with the data it needs and address a couple errors that result from the async... https://player.vimeo.com/video/ 359 yes no 2021-04-29T17:32:00+02:00 yes https://vueschool.io/lessons/mapping-our-vuex-actions 2026-03-30 monthly 0.8 Mapping Vuex Actions Video Lesson As a developer, we always strive to create clean, clear, and understandable code. In this lesson, we clean up our Vue components, by mapping the Vuex actions to component methods. https://player.vimeo.com/video/ 451 yes no 2021-05-06T16:24:00+02:00 yes https://vueschool.io/lessons/splitting-the-vuex-store-into-multiple-files 2026-03-30 monthly 0.8 Splitting the Vuex Store into Multiple Files Video Lesson In this lesson, we'll split our Vuex store into multiple files and refactor the code to make our Vue.js codebase shorter and more organized. https://player.vimeo.com/video/ 398 yes no 2021-05-06T16:25:00+02:00 yes https://vueschool.io/lessons/fetching-app-wide-data 2026-03-30 monthly 0.8 Fetching App-Wide Data Video Lesson In this lesson, we learn how to fetch data that should be available across every page of a Vue.js application. The authenticated user should be available on every page since it's info is displayed... https://player.vimeo.com/video/ 239 yes no 2021-05-06T16:25:00+02:00 yes https://vueschool.io/lessons/storing-new-posts-in-cloud-firestore-with-vuex 2026-03-30 monthly 0.8 Storing New Posts in Cloud Firestore with Vuex Video Lesson In this lesson, we're going to make posts that are newly added to our Vue.js powered forum, persist to the Cloud Firestore. To do that, we'll update the createPost action in the Vuex store to inclu... https://player.vimeo.com/video/ 581 yes no 2021-05-14T17:32:00+02:00 yes https://vueschool.io/lessons/storing-new-threads-in-cloud-firestore-with-vuex 2026-03-30 monthly 0.8 Storing New Threads in Cloud Firestore with Vuex Video Lesson In this lesson, we'll use what we learned storing posts to Firestore to do the same for threads. https://player.vimeo.com/video/ 581 yes no 2021-05-14T17:33:00+02:00 yes https://vueschool.io/lessons/incrementing-the-users-posts-count 2026-03-30 monthly 0.8 Incrementing the User's Posts Count Video Lesson In this lesson, we fix the posts and threads count on the user so that they correctly reflect what's in the firestore and don't rely on all the posts and threads being in the Vuex store as they did... https://player.vimeo.com/video/ 481 yes no 2021-05-14T17:34:00+02:00 yes https://vueschool.io/lessons/updating-a-post-in-firestore 2026-03-30 monthly 0.8 Updating a Post in Cloud Firestore Video Lesson In this lesson, we use a Vuex action to make updates to posts in Cloud Firestore and in the Vuex store's state. We also add an edited property to the post on update to keep track of when edits are... https://player.vimeo.com/video/ 352 yes no 2021-05-20T16:00:00+02:00 yes https://vueschool.io/lessons/updating-a-thread-in-the-firestore 2026-03-30 monthly 0.8 Updating a Thread in the Firestore Video Lesson In this lesson, we make updates to threads persist to the Cloud Firestore by adding to the updateThread Vuex action. https://player.vimeo.com/video/ 394 yes no 2021-05-20T16:00:00+02:00 yes https://vueschool.io/lessons/hiding-content-until-data-is-fully-loaded 2026-03-30 monthly 0.8 Hiding Content Until Data is Fully Loaded Video Lesson In this lesson we improve user experience by removing the incremental showing, hiding all page content until all the data is available. In the Vue.js created hook, we're able to wait for all the da... https://player.vimeo.com/video/ 160 yes no 2021-05-20T12:00:00+02:00 yes https://vueschool.io/lessons/sharing-logic-between-components-with-mixins 2026-03-30 monthly 0.8 Sharing Logic Between Components with Mixins Video Lesson In this lesson we learn about Vue.js Mixins and how they enable us to share share logic between multiple components. We implement an asyncDataStatus mixin to hide page content on all pages until th... https://player.vimeo.com/video/ 523 yes no 2021-05-27T16:00:00+02:00 yes https://vueschool.io/lessons/displaying-a-loading-indicator-while-components-fetch-async-data 2026-03-30 monthly 0.8 Displaying a Loading Indicator while Components Fetch Async Data Video Lesson In this lesson, we use a scalable solution for displaying a loading indicator across all the application's pages. Adding a conditional to Vue Router's router-view component makes for an elegant sol... https://player.vimeo.com/video/ 563 yes no 2021-05-27T16:00:00+02:00 yes https://vueschool.io/lessons/show-a-loading-spinner-while-fetching-async-data 2026-03-30 monthly 0.8 Show a Loading Spinner while Fetching Async Data Video Lesson In this lesson, we'll replace the boring loading text with a nice loading spinner. Since we've [already implemented the loading functionality](https://vueschool.io/lessons/displaying-a-loading-indi... https://player.vimeo.com/video/ 131 yes no 2021-05-27T16:00:00+02:00 yes https://vueschool.io/lessons/showing-a-progress-bar-while-components-fetch-asynchronous-data 2026-03-30 monthly 0.8 Showing a Progress Bar while Components Fetch Asynchronous Data Video Lesson In this lesson we'll improve the user experience even further by adding a progress bar to our Vue.js application using the NProgress javascript library. https://player.vimeo.com/video/ 257 yes no 2021-05-27T16:00:00+02:00 yes https://vueschool.io/lessons/firebase-tools-cli 2026-03-30 monthly 0.8 Firebase Tools (CLI) Video Lesson In this lesson we pair the Cloud Firebase CLI tools with our Vue.js project to optimize our development workflow. https://player.vimeo.com/video/ 361 yes no 2021-06-10T15:45:00+02:00 yes https://vueschool.io/lessons/seeding-the-database 2026-03-30 monthly 0.8 Seeding the Database Video Lesson In this lesson, we'll learn how to reseed our database use the Firebase CLI tools, along with the firestore-export-import library. Combining them both allows us to wipe the Cloud Firestore clean an... https://player.vimeo.com/video/ 384 yes no 2021-06-10T15:45:00+02:00 yes https://vueschool.io/lessons/using-env-for-different-environment-configuration 2026-03-30 monthly 0.8 Using .env for Different Environment Configuration Video Lesson In this lesson, we learn what environment variables are and how to use them in Vue.js with the Vue CLI. https://player.vimeo.com/video/ 413 yes no 2021-06-10T15:46:00+02:00 yes https://vueschool.io/lessons/fetching-data-for-all-remaining-pages 2026-03-30 monthly 0.8 Fetching Data For All Remaining Pages Video Lesson In this lesson, we keep pluging away making all the pages work with data fetched from the Cloud Firestore. Though, we've had a few errors along the way switching from static data to the Firestore,... https://player.vimeo.com/video/ 771 yes no 2021-05-06T16:23:00+02:00 yes https://vueschool.io/lessons/using-the-server-timestamp-for-post-published-at 2026-03-30 monthly 0.8 Using the Server Timestamp for Post Published At Video Lesson In this lesson, we use the Firstore server timestamp to set the publishedAt property on newly created posts. While Date.now() is readily available in Javascript the serverTimestamp ensures better c... https://player.vimeo.com/video/ 372 yes no 2021-05-14T17:32:00+02:00 yes https://vueschool.io/lessons/creating-a-font-awesome-plugin-in-vue-3 2026-03-30 monthly 0.8 Creating a Font Awesome Plugin in Vue 3 Video Lesson In this lesson, we use npm to install Font Awesome and cherry pick the Pencil Alt icon for use as an edit post trigger. We also extract the FontAwesome component icon setup into it's own Vue 3 plug... https://player.vimeo.com/video/ 590 yes no 2021-05-20T16:00:00+02:00 yes https://vueschool.io/lessons/preparing-the-interface-for-post-updates 2026-03-30 monthly 0.8 Preparing the User Interface for Post Updates Video Lesson In this lesson, we create the user interface for an "Edit Mode" in the PostList component to accommodate editing posts. We also play on a top strength of Vue.js, reusing the PostEditor component fo... https://player.vimeo.com/video/ 509 yes no 2021-05-20T16:00:00+02:00 yes https://vueschool.io/lessons/unsubscribing-from-firestore-snapshots 2026-03-30 monthly 0.8 Unsubscribing from Cloud Firestore Snapshots Video Lesson In this lesson we learn how to unsubscribe from the Cloud Firestore onSnapshot events between route changes to prevent memory leaks and performance issues from negatively affecting our Vue.js appli... https://player.vimeo.com/video/ 844 yes no 2021-05-20T16:00:00+02:00 yes https://vueschool.io/lessons/creating-the-user-registration-form 2026-03-30 monthly 0.8 Creating the User Registration Form Video Lesson In this lesson, we create a user registration form in our Vue.js SPA, in order to prepare for adding new users to the Cloud Firestore. https://player.vimeo.com/video/ 264 yes no 2021-06-17T16:37:00+02:00 yes https://vueschool.io/lessons/storing-new-users-in-the-firestore 2026-03-30 monthly 0.8 Storing New Users in the Firestore Video Lesson In this lesson, we'll create a Vuex action to save users to the Cloud Firestore. https://player.vimeo.com/video/ 366 yes no 2021-06-17T16:37:00+02:00 yes https://vueschool.io/lessons/integrating-registration-with-firebase-authentication 2026-03-30 monthly 0.8 Integrating Registration with Firebase Authentication Video Lesson In this lesson, we use the Firebase Authentication service to register users for the Vue.js Forum application. https://player.vimeo.com/video/ 421 yes no 2021-06-17T16:38:00+02:00 yes https://vueschool.io/lessons/signing-the-user-in-after-registration 2026-03-30 monthly 0.8 Signing the User in after Registration Video Lesson In this lesson, we update the fetchAuthUser action in order to use the id from the logged in user. We also utlize the authStateChange event in order to make sure we set the logged in user to the Vu... https://player.vimeo.com/video/ 344 yes no 2021-06-17T12:00:00+02:00 yes https://vueschool.io/lessons/signing-users-in-and-out 2026-03-30 monthly 0.8 Signing Users In and Out Video Lesson In this lesson, we create a sign in form and sign in/out links so that a user can easily login and logout of their account. https://player.vimeo.com/video/ 465 yes no 2021-06-24T16:00:00+02:00 yes https://vueschool.io/lessons/using-class-bindings-for-user-drop-down-menu 2026-03-30 monthly 0.8 Using Class Bindings for User Drop Down Menu Video Lesson In this lesson, we use a class binding to toggle the visibility of the user dropdown in the navigation bar. Class bindings are a powerful tool that enable you to dynamically add and remove classes... https://player.vimeo.com/video/ 302 yes no 2021-06-24T16:00:00+02:00 yes https://vueschool.io/lessons/in-component-navigation-guards-with-vue-router 2026-03-30 monthly 0.8 In Component Navigation Guards with Vue Router Video Lesson In this lesson, we use Vue Router 4's in component navigation guard `beforeRouteEnter` to redirect a guest from the profile page to the home page since guests don't have a profile page. https://player.vimeo.com/video/ 710 yes no 2021-07-01T17:38:00+02:00 yes https://vueschool.io/lessons/navigation-guards-for-componentless-routes 2026-03-30 monthly 0.8 Navigation Guards for Componentless Routes Video Lesson In this lesson we move the Vue Router 4 in component route navigation guard protecting the profile page to the routes file for better organization. We also use a "componentless" navigation guard in... https://player.vimeo.com/video/ 286 yes no 2021-07-01T17:39:00+02:00 yes https://vueschool.io/lessons/meta-fields-and-global-navigation-guards 2026-03-30 monthly 0.8 Meta Fields and Global Navigation Guards Video Lesson In this lesson we use Vue Router 4 meta fields so that we easily identify routes that require authentication and let a global navigation guard handle it from there. This approach to protecting rout... https://player.vimeo.com/video/ 380 yes no 2021-07-01T17:39:00+02:00 yes https://vueschool.io/lessons/navigation-guards-and-firebase-authentication 2026-03-30 monthly 0.8 Navigation Guards and Firebase Authentication Video Lesson In this lesson, we get Vue Router navigation guards playing nicely with Firebase Authentication by making it so that the navigation guard will wait on the Firebase Auth to get the user before check... https://player.vimeo.com/video/ 470 yes no 2021-07-01T17:40:00+02:00 yes https://vueschool.io/lessons/firestore-rules-and-protecting-pages-for-authenticated-users 2026-03-30 monthly 0.8 Firestore Rules and Protecting Pages for Authenticated Users Video Lesson In this lesson we utilize the `requiresAuth` route meta to keep guests from visiting pages that they shouldn't. We also put some Firestore Rules into place so that users and guests can't alter data... https://player.vimeo.com/video/ 839 yes no 2021-07-08T16:00:00+02:00 yes https://vueschool.io/lessons/redirecting-users-after-logging-in-to-the-page-they-tried-to-visit 2026-03-30 monthly 0.8 Redirecting Users After Logging In to the Page they Tried to Visit Video Lesson It can be a really frustrating user experience when you login to a website and aren't directed to the place you were originally trying to access. In this lesson, we learn how straigtforward Vue Rou... https://player.vimeo.com/video/ 266 yes no 2021-07-08T16:00:00+02:00 yes https://vueschool.io/lessons/allowing-only-authenticated-users-to-create-and-edit-posts 2026-03-30 monthly 0.8 Allowing Only Authenticated Users to Create and Edit Posts Video Lesson n this lesson, we hide the PostEditor from guests and replace it with a message that tells the user to either sign in or register a new account to participate in the discussions. https://player.vimeo.com/video/ 172 yes no 2021-07-15T16:00:00+02:00 yes https://vueschool.io/lessons/the-authenticated-user-s-profile-page 2026-03-30 monthly 0.8 The Authenticated User's Profile Page Video Lesson In this lesson we revive the users profile page and use a Firestore query to get all the logged in user's posts from the database. https://player.vimeo.com/video/ 336 yes no 2021-07-15T16:00:00+02:00 yes https://vueschool.io/lessons/forcing-vue-router-to-destroy-component-to-trigger-lifecycle-hooks 2026-03-30 monthly 0.8 Forcing Vue Router to Destroy Component to Trigger Lifecycle Hooks Video Lesson In this lesson, we learn how to force Vue Router to destroy the component when we're navigating to another route that uses the same page component. This is important when you're relying on Vue's li... https://player.vimeo.com/video/ 363 yes no 2021-07-15T16:00:00+02:00 yes https://vueschool.io/lessons/authenticating-users-via-3rd-party-providers 2026-03-30 monthly 0.8 Authenticating Users via 3rd Party Providers Video Lesson In this lesson, we will use the third party provider Google to register for and sign into the Vue.js SPA. Firebase Authentication makes this process straightforward. https://player.vimeo.com/video/ 361 yes no 2021-06-24T16:00:00+02:00 yes https://vueschool.io/lessons/using-env-for-secure-secrets 2026-03-30 monthly 0.8 Using .env for Secure Secrets Video Lesson In this lesson, we learn how to store secret data in .env.local files in Vue.js. Keeping such data outside of version control not only keeps secret information safer but also provides an avenue for... https://player.vimeo.com/video/ 312 yes no 2021-06-02T22:21:00+02:00 yes https://vueschool.io/lessons/unsubscribing-from-the-auth-user-snapshot 2026-03-30 monthly 0.8 Unsubscribing from the Auth User Snapshot Video Lesson In this lesson, we tidy up the authenticated user functionality by subscribing to it's snapshot for the entirety of the logged in session and only cleaning up the snapshot after the authentication... https://player.vimeo.com/video/ 549 yes no 2021-06-24T16:00:00+02:00 yes https://vueschool.io/lessons/404-thread-show-page-and-async-thread-data 2026-03-30 monthly 0.8 404 Thread Show Page and Async Thread Data Video Lesson Vue Router 4 let's us use async await on global navigation guards and route specific navigation guards alike. https://player.vimeo.com/video/ 208 yes no 2021-07-08T16:00:00+02:00 yes https://vueschool.io/lessons/hiding-guest-pages-from-logged-in-users 2026-03-30 monthly 0.8 Hiding Guest Pages from Logged In Users Video Lesson In this lesson, we use what we've learned about Vue Router 4 route guards and route meta to protect pages for authenticated users and do the reverse. For user experience sake, we redirect certain p... https://player.vimeo.com/video/ 168 yes no 2021-07-08T16:00:00+02:00 yes https://vueschool.io/lessons/splitting-a-large-vuex-store-into-namespaced-modules-part-1 2026-03-30 monthly 0.8 Splitting a Large Vuex Store Into Namespaced Modules Part 1 Video Lesson In this lesson we begin to split up the Vuex store into modules in order to organize our store by resource. https://player.vimeo.com/video/ 658 yes no 2021-07-22T16:00:00+02:00 yes https://vueschool.io/lessons/splitting-a-large-vuex-store-into-namespaced-modules-part-2 2026-03-30 monthly 0.8 Splitting a Large Vuex Store Into Namespaced Modules Part 2 Video Lesson n this lesson, we continue to break up the Vuex store into modules. In doing so, we utilize Vuex module namespaces to keep actions, mutations, and getters from clashing across modules. https://player.vimeo.com/video/ 747 yes no 2021-07-22T16:00:00+02:00 yes https://vueschool.io/lessons/closing-dropdown-on-click-outside 2026-03-30 monthly 0.8 Closing Dropdown on Click Outside Video Lesson In this lesson, we create a custom Vue.js 3 directive `v-click-outside` in order to close the user dropdown in the navbar whenever a user clicks outside of it. https://player.vimeo.com/video/ 413 yes no 2021-07-29T16:00:00+02:00 yes https://vueschool.io/lessons/building-a-mobile-navbar 2026-03-30 monthly 0.8 Building a Mobile Navbar Video Lesson In this lesson, we use Vue.js 3 class bindings to make our mobile navigation menu open and close. We also get to utilize the the v-click-outside we used in the last lesson! That's the beauty of dir... https://player.vimeo.com/video/ 271 yes no 2021-07-29T16:00:00+02:00 yes https://vueschool.io/lessons/closing-the-mobile-navbar-on-scroll 2026-03-30 monthly 0.8 Closing the Mobile Navbar on Scroll Video Lesson In this lesson we create another custom Vue.js 3 directive to run code when the page is scrolled. We also learn about debouncing scroll events, in order to prevent over firing our onscroll functions. https://player.vimeo.com/video/ 366 yes no 2021-07-29T16:00:00+02:00 yes https://vueschool.io/lessons/pagination-and-indexes-in-the-cloud-firestore 2026-03-30 monthly 0.8 Pagination and Indexes in the Cloud Firestore Video Lesson In this lesson, we learn how to paginate queries to the Google Cloud Firestore. We also learn about the importance of Firestore indexes and the process for creating new Composite indexes. https://player.vimeo.com/video/ 603 yes no 2021-08-05T16:00:00+02:00 yes https://vueschool.io/lessons/paginating-threads-with-pagination-component 2026-03-30 monthly 0.8 Paginating Threads with Pagination Component Video Lesson In this lesson, we use the third party Vue 3 Pagination package to implement pagination on the Forum page. Also, since we're storing an array of the thread ids on the forum, we can explore an alter... https://player.vimeo.com/video/ 1031 yes no 2021-08-05T16:00:00+02:00 yes https://vueschool.io/lessons/storing-the-current-page-as-a-url-query-variable 2026-03-30 monthly 0.8 Storing the Current Page as a URL Query Variable Video Lesson In this lesson, we make a page of threads in a forum directly accessible by providing a page variable in the query string. With Vue Router 4 we can accomplish this with just a few lines of code. https://player.vimeo.com/video/ 187 yes no 2021-08-05T16:00:00+02:00 yes https://vueschool.io/lessons/paginating-user-posts-with-infinite-scroll 2026-03-30 monthly 0.8 Paginating User Posts with Infinite Scroll Video Lesson In this lesson, we use a custom made infinite scroll component that utilizes the Intersection Observer browser API, to paginate the posts on the user profile page. https://player.vimeo.com/video/ 337 yes no 2021-08-05T16:00:00+02:00 yes https://vueschool.io/lessons/introduction-to-veevalidate 2026-03-30 monthly 0.8 Introduction to VeeValidate Video Lesson In this lesson, we install the Vue 3 library VeeValidate in order to provide easy, yet robust form validation. https://player.vimeo.com/video/ 283 yes no 2021-09-23T16:00:00+02:00 yes https://vueschool.io/lessons/displaying-error-messages-with-veevalidate 2026-03-30 monthly 0.8 Displaying Error Messages with VeeValidate Video Lesson In this lesson we use the VeeValidate ErrorMessage component to inform the user why the form did not submit. We also explore, defining validations at the field level as opposed to the form level. https://player.vimeo.com/video/ 198 yes no 2021-09-23T16:00:00+02:00 yes https://vueschool.io/lessons/defining-global-components-and-rules 2026-03-30 monthly 0.8 Defining Global Components and Rules Video Lesson In this lesson, we make the required validation rule globally available to all forms for ease of use. We also make the VeeValidation components globally available. https://player.vimeo.com/video/ 365 yes no 2021-09-23T16:00:00+02:00 yes https://vueschool.io/lessons/using-multiple-rules-on-a-single-field 2026-03-30 monthly 0.8 Using Multiple Rules on a Single Field Video Lesson In this lesson we provide both a required and an email rule to the email field on the Registration form. https://player.vimeo.com/video/ 108 yes no 2021-09-23T16:00:00+02:00 yes https://vueschool.io/lessons/clean-up-to-prep-for-notifications 2026-03-30 monthly 0.8 Clean Up to Prep for Notifications Video Lesson In this lesson, we do a little clean up to make sure everything is ready to smoothly implement notifications. https://player.vimeo.com/video/ 648 yes no 2021-08-26T16:00:00+02:00 yes https://vueschool.io/lessons/a-composable-for-storing-and-interacting-with-notifications 2026-03-30 monthly 0.8 A Composable for Storing and Interacting with Notifications Video Lesson In this lesson, we use the Vue 3 composition API to create a reusable "composable" for working with application notifications. The "composable" provides a way for us to expose shared state and func... https://player.vimeo.com/video/ 648 yes no 2021-08-26T16:00:00+02:00 yes https://vueschool.io/lessons/implementing-notifications-on-thread-page-part-1 2026-03-30 monthly 0.8 Implementing Notifications on Thread Page Part 1 Video Lesson In this lesson, we begin implementing the notifications for when updates to a thread occur. We also sync newly added posts to threads. https://player.vimeo.com/video/ 555 yes no 2021-08-26T16:00:00+02:00 yes https://vueschool.io/lessons/uploading-avatars-to-firebase-storage-during-registration 2026-03-30 monthly 0.8 Uploading Avatars to Firebase Storage During Registration Video Lesson In this lesson, we improve the user experience during registration by allowing them to upload avatars directly instead of providing a url. Firebase storage allows us to store those images quickly a... https://player.vimeo.com/video/ 487 yes no 2021-09-02T16:00:00+02:00 yes https://vueschool.io/lessons/use-the-pixabay-rest-api-to-enable-random-profile-pictures 2026-03-30 monthly 0.8 Use the Pixabay REST API to Enable Random Profile Pictures Video Lesson In this lesson we use the Pixabay REST API along with the JavaScript `fetch` function to generate random user avatars. https://player.vimeo.com/video/ 592 yes no 2021-09-09T16:00:00+02:00 yes https://vueschool.io/lessons/storing-images-to-firebase-storage-from-a-web-url 2026-03-30 monthly 0.8 Storing Images to Firebase Storage from a Web URL Video Lesson In this lesson, we download the images from Pixabay to the Firebse Cloud Storage for continuous use throughout the application. This is necessary to comply with the agreement we make with Pixabay... https://player.vimeo.com/video/ 210 yes no 2021-09-09T16:00:00+02:00 yes https://vueschool.io/lessons/last-minute-clean-up-part-1 2026-03-30 monthly 0.8 Last Minute Clean Up Part 1 Video Lesson In this lesson, we tighten up a few loose screws and fix a couple bugs in order to prepare for deploying the application. Issues we correct include: https://player.vimeo.com/video/ 343 yes no 2021-10-07T16:00:00+02:00 yes https://vueschool.io/lessons/last-minute-clean-up-part-2 2026-03-30 monthly 0.8 Last Minute Clean Up Part 2 Video Lesson In this lesson we continue cleaning up the codebase to prep for deployment. Issues resolved include: https://player.vimeo.com/video/ 402 yes no 2021-10-07T16:00:00+02:00 yes https://vueschool.io/lessons/meta-for-seo-with-netlify-prerendering 2026-03-30 monthly 0.8 Meta for SEO with Netlify PreRendering Video Lesson In this lesson, we combine the power of Netlify Prerendering with the @vueuse/head library to provide meta tags for optimizing SEO and social sharing previews. https://player.vimeo.com/video/ 514 yes no 2021-10-14T16:00:00+02:00 yes https://vueschool.io/lessons/deploying-to-netlify 2026-03-30 monthly 0.8 Deploying to Netlify Video Lesson In this lesson, we deploy our Vue.js 3 powered application to Netlify for the world to see. https://player.vimeo.com/video/ 224 yes no 2021-10-14T16:00:00+02:00 yes https://vueschool.io/lessons/ci-cd-with-netlify 2026-03-30 monthly 0.8 CI/CD with Netlify Video Lesson In this lesson, we set up CI/CD with Netlify so that whenever we push code to the Github repo, it's automatically deployed. https://player.vimeo.com/video/ 186 yes no 2021-10-14T16:00:00+02:00 yes https://vueschool.io/lessons/splitting-a-large-vuex-store-into-namespaced-modules-part-3 2026-03-30 monthly 0.8 Splitting a Large Vuex Store Into Namespaced Modules Part 3 Video Lesson In this lesson we finish up our Vuex modules refactor by making the necessary code changes in the components that interact with the store. Though the process has been long and tedious, some obvious... https://player.vimeo.com/video/ 869 yes no 2021-07-22T16:00:00+02:00 yes https://vueschool.io/lessons/implementing-the-notifications-on-thread-page-part-2 2026-03-31 monthly 0.8 Implementing the Notifications on Thread Page Part 2 Video Lesson In this lesson, we finish up implementing the notifications for when threads update. https://player.vimeo.com/video/ 219 yes no 2021-08-26T16:00:00+02:00 yes https://vueschool.io/lessons/extending-notifications-with-options 2026-03-31 monthly 0.8 Extending Notifications with Options Video Lesson In this lesson, we make the notifications composable more flexible and reusable by learning how to configure each use of it with it's own options. https://player.vimeo.com/video/ 184 yes no 2021-08-26T16:00:00+02:00 yes https://vueschool.io/lessons/using-the-transition-group-component 2026-03-31 monthly 0.8 Using the Transition Group Component Video Lesson In this lesson we use the Vue.js 3 transition group component to make the notifications transition smoothly into the window. https://player.vimeo.com/video/ 110 yes no 2021-08-26T16:00:00+02:00 yes https://vueschool.io/lessons/securing-files-with-firebase-storage-rules 2026-03-31 monthly 0.8 Securing Files with Firebase Storage Rules Video Lesson In this lesson, we secure the user's avatar by putting Firebase Storage rules into place. The rules do 2 things for us: https://player.vimeo.com/video/ 117 yes no 2021-09-02T16:00:00+02:00 yes https://vueschool.io/lessons/editing-the-user-avatar-on-the-profile-page 2026-03-31 monthly 0.8 Editing the User Avatar on the Profile Page Video Lesson In this lesson, we provide the same avatar upload functionality on the profile edit page as we did during user registration. Along the way we extract out the logic of uploading an avatar into it's... https://player.vimeo.com/video/ 317 yes no 2021-09-02T16:00:00+02:00 yes https://vueschool.io/lessons/improving-the-avatar-editing-user-experience 2026-03-31 monthly 0.8 Improving the Avatar Editing User Experience Video Lesson In this lesson, we improve the UI for updating a profile picture. https://player.vimeo.com/video/ 413 yes no 2021-09-02T16:00:00+02:00 yes https://vueschool.io/lessons/handing-errors-with-image-uploads 2026-03-31 monthly 0.8 Handling Errors With Image Uploads Video Lesson In this lesson, we use the notifications composable to alert the user of failed image uploads. https://player.vimeo.com/video/ 298 yes no 2021-09-09T16:00:00+02:00 yes https://vueschool.io/lessons/providing-an-avatar-placeholder-for-users-with-no-avatar 2026-03-31 monthly 0.8 Providing an Avatar Placeholder for Users with no Avatar Video Lesson In this lesson, we provide a placeholder avatar image for users who don't provide an avatar. https://player.vimeo.com/video/ 278 yes no 2021-09-09T16:00:00+02:00 yes https://vueschool.io/lessons/passing-arguments-to-veevalidate-rules 2026-03-31 monthly 0.8 Passing Arguments to VeeValidate Rules Video Lesson In this lesson we use the min rule to ensure the password is at least 8 characters long. Allowing rules to accept arguments makes them more flexible, reusable, and expressive. https://player.vimeo.com/video/ 127 yes no 2021-09-23T16:00:00+02:00 yes https://vueschool.io/lessons/customizing-veevalidate-error-messages 2026-03-30 monthly 0.8 Customizing VeeValidate Error Messages Video Lesson In this lesson, we use the VeeValidate i18n plugin to tailor custom error messages for each rule. https://player.vimeo.com/video/ 294 yes no 2021-09-30T16:00:00+02:00 yes https://vueschool.io/lessons/defining-async-rules-with-veevalidate 2026-03-31 monthly 0.8 Defining Async Rules with VeeValidate Video Lesson In this lesson, we take advantage of VeeValidate's built in support for async validation rules to ensure that the username and email provided on the registration form are unique. https://player.vimeo.com/video/ 384 yes no 2021-09-30T16:00:00+02:00 yes https://vueschool.io/lessons/wrapping-veevalidate-field-with-custom-appformfield 2026-03-31 monthly 0.8 Wrapping VeeValidate Field with Custom AppFormField Video Lesson In this lesson, we DRY up our form field code to reduce repetitive elements like the label and the name. https://player.vimeo.com/video/ 360 yes no 2021-09-30T16:00:00+02:00 yes https://vueschool.io/lessons/adding-validation-to-all-the-forms 2026-03-31 monthly 0.8 Adding Validation to all the Forms Video Lesson In this lesson we add validation to all the forms throughout the application. https://player.vimeo.com/video/ 364 yes no 2021-09-30T16:00:00+02:00 yes https://vueschool.io/lessons/creating-a-simple-autocomplete-location-field 2026-03-31 monthly 0.8 Creating a Simple Autocomplete Location Field Video Lesson In this lesson, we use the [restcountries.com](http://restcountries.com) REST API to dynamically fetch options for the locations input on the profile edit form. https://player.vimeo.com/video/ 415 yes no 2021-09-30T16:00:00+02:00 yes https://vueschool.io/lessons/last-minute-clean-up-part-3 2026-03-31 monthly 0.8 Last Minute Clean Up Part 3 Video Lesson In this lesson we do just a bit more clean up including: https://player.vimeo.com/video/ 293 yes no 2021-10-07T16:00:00+02:00 yes https://vueschool.io/lessons/updating-the-user-email-address 2026-03-31 monthly 0.8 Updating the User Email Address Video Lesson In this lesson, we update the UserProfileCardEditor to actually update the users email address in the Firebase auth service as well as in the firestore. https://player.vimeo.com/video/ 607 yes no 2021-10-07T16:00:00+02:00 yes https://vueschool.io/lessons/updating-the-user-email-address-part-2 2026-03-31 monthly 0.8 Updating the User Email Address Part 2 Video Lesson In this lesson we finish updating the users email address in Firebase Authentication so that we can successfully login with the updated email address. https://player.vimeo.com/video/ 305 yes no 2021-10-07T16:00:00+02:00 yes https://vueschool.io/lessons/course-conclusion 2026-03-31 monthly 0.8 Course Conclusion Video Lesson https://player.vimeo.com/video/ 49 yes no 2021-10-14T16:00:00+02:00 yes https://vueschool.io/lessons/analyzing-bundle-size-and-code-splitting-routes 2026-03-31 monthly 0.8 Analyzing Bundle Size and Code Splitting Routes Video Lesson In this lesson, we use webpack bundle analyzer to determine the dependencies contributing most to our final bundle sizes. https://player.vimeo.com/video/ 483 yes no 2021-10-14T16:00:00+02:00 yes https://vueschool.io/lessons/ftf-hello-from-the-future 2026-05-30 monthly 0.8 🔮 FTF - Hello from the Future Video Lesson Hello and greetings from the future! This video and others like it are recorded and inserted after the initial course. Lesson from the future will all be denoted with the prefix 🔮 FTF-. https://player.vimeo.com/video/ 270 yes no 2022-12-15T16:00:00+01:00 yes https://vueschool.io/lessons/ftf-from-vue-cli-to-vite 2026-05-30 monthly 0.8 🔮FTF - From Vue CLI to Vite Video Lesson Front end development moves fast and Vite is the development server that can keep up. In this lesson, learn about an alternative build tool to Vue CLI called Vite. https://player.vimeo.com/video/ 109 yes no 2022-12-15T16:00:00+01:00 yes https://vueschool.io/lessons/ftf-bootstrap-the-project-with-vite 2026-05-30 monthly 0.8 🔮 FTF - Bootstrap the Project with Vite Video Lesson In this lesson, I’ll show you how to bootstrap a Vue.js project instead of with Vue CLI. https://player.vimeo.com/video/ 482 yes no 2022-12-15T16:00:00+01:00 yes https://vueschool.io/lessons/ftf-from-options-to-capi 2026-05-30 monthly 0.8 🔮 FTF - From Options to CAPI Video Lesson In this lesson, learn about the alternative API for interacting with Vue’s reactivity system: the composition API. In Vue 3, the composition api was added to the existing options API for a few re... https://player.vimeo.com/video/ 308 yes no 2022-12-15T16:00:00+01:00 yes https://vueschool.io/lessons/ftf-refactor-the-homepage-component-using-the-composition-api 2026-05-30 monthly 0.8 🔮 FTF - Refactor the HomePage Component Using the Composition API Video Lesson In this lesson, we take the homepage component that was coded in the Options API and refactor it to use the Composition API instead. https://player.vimeo.com/video/ 587 yes no 2022-12-15T16:00:00+01:00 yes https://vueschool.io/lessons/ftf-refactor-the-threadlist-component-with-the-composition-api 2026-06-01 monthly 0.8 🔮 FTF - Refactor the ThreadList Component with the Composition API Video Lesson In this lesson, let’s develop the ThreadList component witht the Composition API and learn how to accept props with script setup. https://player.vimeo.com/video/ 301 yes no 2022-12-15T16:00:00+01:00 yes https://vueschool.io/lessons/ftf-refactor-the-thread-editor-component-with-the-composition-api 2026-03-30 monthly 0.8 🔮 FTF - Refactor the Thread Editor Component with the Composition API Video Lesson In this lesson, we’ll refactor the ThreadEditor component to use the Composition API instead of the options API. https://player.vimeo.com/video/ 574 yes no 2022-12-22T16:00:00+01:00 yes https://vueschool.io/lessons/ftf-from-vuex-to-pinia 2026-06-02 monthly 0.8 🔮 FTF - From Vuex to Pinia Video Lesson In this lesson, I’ll introduce you to Pinia as an alternative to Vuex. As of winter 2021, Pinia is now the official global state management solution for Vue. https://player.vimeo.com/video/ 292 yes no 2022-12-22T16:00:00+01:00 yes https://vueschool.io/lessons/ftf-setup-initial-state-in-pinia 2026-06-02 monthly 0.8 🔮 FTF - Setup Initial State in Pinia Video Lesson In this lesson, let’s implement global state management with Pinia instead of Vuex. https://player.vimeo.com/video/ 741 yes no 2022-12-22T16:00:00+01:00 yes https://vueschool.io/lessons/ftf-use-pinia-actions-for-adding-posts 2026-06-02 monthly 0.8 🔮 FTF - Use Pinia Actions for Adding Posts Video Lesson In this lesson, let’s use a Pinia action to add a new post to the PostsStore. https://player.vimeo.com/video/ 580 yes no 2022-12-22T16:00:00+01:00 yes https://vueschool.io/lessons/ftf-from-firebase-8-9 2026-03-30 monthly 0.8 🔮 FTF - From Firebase 8 - 9 Video Lesson In this lesson we learn about the updated Firebase version v9. https://player.vimeo.com/video/ 145 yes no 2022-12-22T16:00:00+01:00 yes https://vueschool.io/courses/vuejs-single-file-components 2026-05-12 monthly 0.8 https://vueschool.io/lessons/introduction-to-single-file-components 2026-05-25 monthly 0.8 Introduction to Single File Components Video Lesson In the first lesson in our course about Single File Components in Vue.js, we're learning about the drawbacks of global components. We also learn how to structure our Single File Components and get... https://player.vimeo.com/video/ 240 yes no 2019-04-24T07:37:00+02:00 no https://vueschool.io/lessons/introduction-to-vue-cli-3 2026-05-25 monthly 0.8 Introduction to Vue-CLI 3 Video Lesson When we’re learning about Vue’s Single File Components, we also need to learn how to use a JavaScript bundler, like [Webpack](https://webpack.js.org/). https://player.vimeo.com/video/ 344 yes no 2019-04-24T08:26:00+02:00 yes https://vueschool.io/lessons/create-your-first-single-file-component 2026-05-25 monthly 0.8 Create Your First Single File Component Video Lesson In this lesson, we’ll learn about the structure of a Single File Component, which is the `template`, `script`, and `style`. https://player.vimeo.com/video/ 157 yes no 2019-05-02T18:00:00+02:00 yes https://vueschool.io/lessons/import-single-file-components 2026-05-25 monthly 0.8 Import Single File Components Video Lesson In this lesson, we’ll learn how we can import and reuse our Single File Components in other components. https://player.vimeo.com/video/ 144 yes no 2019-05-02T18:00:00+02:00 yes https://vueschool.io/lessons/using-css-pre-processors-with-single-file-components 2026-05-25 monthly 0.8 Using CSS Pre-Processors with Single File Components Video Lesson Vue-cli makes it very easy for us to use pre-processors like Pug, Less, Stylus, or Sass with our Single File Components. https://player.vimeo.com/video/ 166 yes no 2019-05-09T18:00:00+02:00 yes https://vueschool.io/lessons/scoped-styles 2026-05-25 monthly 0.8 Scoped Styles Video Lesson Scoped styles allow us to apply CSS to the components element only. Which ultimately enables us to mix local component and global application styles. https://player.vimeo.com/video/ 116 yes no 2019-05-09T18:00:00+02:00 yes https://vueschool.io/lessons/organizing-single-file-components 2026-05-25 monthly 0.8 Organizing Single File Components Video Lesson Proper organization is essential for all applications, and organizing single file components are no exceptions. https://player.vimeo.com/video/ 558 yes no 2019-05-16T14:00:00+02:00 yes https://vueschool.io/lessons/dynamically-load-components 2026-05-25 monthly 0.8 Load Vue Components Asynchronously Video Lesson In this lesson, we'll learn how to lazy-load vue.js components to improve performance. https://player.vimeo.com/video/ 513 yes no 2019-05-24T16:00:00+02:00 no https://vueschool.io/courses/learn-how-to-test-vuejs-components 2026-05-12 monthly 0.8 https://vueschool.io/lessons/installing-vue-test-utils 2026-03-26 monthly 0.8 Installing Vue Test Utils Video Lesson Before we learn how to test our vue.js components, we need to install a few packages that will be the tools we use. https://player.vimeo.com/video/ 315 yes no 2019-05-30T14:00:00+02:00 no https://vueschool.io/lessons/mounting-components-with-vue-test-utils 2026-03-26 monthly 0.8 Mounting Components with Vue Test Utils Video Lesson When we’re testing our vue.js components, we need a way to mount and render the component. https://player.vimeo.com/video/ 420 yes no 2019-05-30T14:00:00+02:00 no https://vueschool.io/lessons/the-wrapper-object 2026-03-26 monthly 0.8 The Wrapper Object Video Lesson In this lesson, we’ll learn about the wrapper object, and how we can access the component through the `vm` property, as we would when we're tinkering with our components in the browser console. https://player.vimeo.com/video/ 260 yes no 2019-06-06T18:00:00+02:00 no https://vueschool.io/lessons/learn-how-to-test-vuejs-methods 2026-03-26 monthly 0.8 Learn How To Test Vue.js Methods Video Lesson In this lesson, we’re learning how to test a Vue component’s methods. https://player.vimeo.com/video/ 562 yes no 2019-06-13T18:00:00+02:00 yes https://vueschool.io/lessons/learn-how-to-test-computed-properties-and-watchers-vuejs 2026-05-26 monthly 0.8 Learn How To Test Computed Properties and Watchers Video Lesson In this lesson, we’ll learn how to test one of our favorite features of Vue.js, computed properties, and watchers. https://player.vimeo.com/video/ 407 yes no 2019-06-06T18:00:00+02:00 yes https://vueschool.io/lessons/learn-how-to-test-vuejs-lifecycle-methods 2026-05-26 monthly 0.8 Learn How to Test Vue.js Lifecycle Methods Video Lesson Lifecycle methods are a very power Vue.js feature, that we use all time time. https://player.vimeo.com/video/ 471 yes no 2019-06-13T18:00:00+02:00 no https://vueschool.io/lessons/traversing-the-dom 2026-05-26 monthly 0.8 Traversing The DOM Video Lesson In this lesson, we'll learn the handy techniques of traversing the DOM of a mounted vue.js component and how to interact with it through triggering native DOM events, like click and input events. https://player.vimeo.com/video/ 276 yes no 2019-06-20T18:00:00+02:00 no https://vueschool.io/lessons/how-to-stub-a-vuejs-child-component 2026-05-26 monthly 0.8 How to Stub a Vue.js Child Component Video Lesson In this lesson, we'll learn how we can use stubs to replace child components. This is a powerful testing technique that we can use to reduce the complexity of our apps when testing and also speed u... https://player.vimeo.com/video/ 264 yes no 2019-06-20T18:00:00+02:00 yes https://vueschool.io/lessons/how-to-test-vuejs-component-with-vuex-store 2026-05-26 monthly 0.8 How to test that a Vuex Store is injected into a Vue.js component Video Lesson Sometimes when we're working with Vuex, it's essential to test that our components are properly integrated with Vuex. https://player.vimeo.com/video/ 344 yes no 2019-06-27T18:00:00+02:00 no https://vueschool.io/lessons/exercise-1-rendering-a-list-of-users 2026-05-26 monthly 0.8 Exercise 1: Rendering a List of Users Video Lesson This lesson is a fun exercise! We recommend that you [download the starting point](https://github.com/vueschool/testing-vue-components/archive/1b3ec258a7b8ce1267322074f6765ad8c4bc2865.zip) before y... https://player.vimeo.com/video/ 386 yes no 2020-03-19T20:04:00+01:00 yes https://vueschool.io/lessons/exercise-2-interacting-with-a-form 2026-05-26 monthly 0.8 Exercise 2: Interacting with a Form Video Lesson In this exercise, we'll be testing a form from a user's perspective. We'll be using snapshots to implicitly test the underlying logic of a working form. https://player.vimeo.com/video/ 266 yes no 2020-04-02T14:58:00+02:00 yes https://vueschool.io/courses/vuejs-components-fundamentals 2026-05-12 monthly 0.8 https://vueschool.io/lessons/introduction-to-components 2026-03-29 monthly 0.8 Introduction to Components Video Lesson In this lesson, we'll learn about Vue components. We'll get an introduction to what a component is, why we need components and lastly how we can create and use a component in our Vue.js app. https://player.vimeo.com/video/ 171 yes no 2019-02-21T09:04:00+01:00 no https://vueschool.io/lessons/components-template 2026-03-29 monthly 0.8 Component's Template Video Lesson In this lesson, we're going to learn about a Vue component's template. Essentially, the template is where we define our HTML and general markup for our component. We also bind our component's data... https://player.vimeo.com/video/ 140 yes no 2019-02-21T09:21:00+01:00 no https://vueschool.io/lessons/reusable-components-with-props 2026-03-29 monthly 0.8 Reusable Components with Props Video Lesson In this lesson, we'll see a realistic use case for reusable components and learn about Vue.js component [props](https://vuejs.org/v2/guide/components-props). https://player.vimeo.com/video/ 406 yes no 2019-04-17T10:47:00+02:00 no https://vueschool.io/lessons/nested-components 2026-03-29 monthly 0.8 Nested Components Video Lesson Components allow us to encapsulate functionality and easily reuse them in multiple places in our applications. It is common to have components inside other components to compose the bigger features... https://player.vimeo.com/video/ 110 yes no 2019-04-03T10:51:00+02:00 no https://vueschool.io/lessons/global-vs-local-components 2026-03-29 monthly 0.8 Global vs Local Components Video Lesson Vue.js allows us to register components both globally and locally. In this lesson, we'll learn the difference between the two types and how it can affect the build size and performance of your appl... https://player.vimeo.com/video/ 191 yes no 2019-04-03T11:12:00+02:00 no https://vueschool.io/lessons/communication-between-components 2026-03-29 monthly 0.8 Communication Between Components with Custom Events Video Lesson We know how to pass data to a child component through [props](https://vueschool.io/lessons/reusable-components-with-props). In this lesson, we'll learn how to communicate from a child to a parent c... https://player.vimeo.com/video/ 444 yes no 2019-03-21T10:20:00+01:00 no https://vueschool.io/lessons/component-lifecycle-hooks 2026-03-29 monthly 0.8 Component Lifecycle Hooks Video Lesson In this lesson, we learn what Vue.js component lifecycle hooks are and how we can use them. If you want to learn more about Vue.js lifecycle hooks, we recommend our [Understanding the Vue.js Lifecy... https://player.vimeo.com/video/ 134 yes no 2019-03-07T11:26:00+01:00 no https://vueschool.io/lessons/component-slots 2026-03-29 monthly 0.8 Component Slots Video Lesson In this lesson, we'll learn how to pass `HTML` to our Vue.js components using slots. Slots are an awesome feature of Vue.js, and this lesson will teach you what you need to know to get started. https://player.vimeo.com/video/ 477 yes no 2019-03-07T11:27:00+01:00 no https://vueschool.io/lessons/build-a-github-user-profile-component 2026-03-29 monthly 0.8 #1 Build a GitHub User Profile Component Video Lesson This lesson is a component exercise lesson, where we're going to use everything we've learned about Vue.js components so far. https://player.vimeo.com/video/ 468 yes no 2019-03-01T11:28:00+01:00 no https://vueschool.io/lessons/create-a-notification-message-component 2026-03-29 monthly 0.8 #2 Create a Notification Message Component Video Lesson This lesson is also a component exercise lesson, where we're going to use everything we've learned about Vue.js components so far. https://player.vimeo.com/video/ 273 yes no 2019-03-01T11:29:00+01:00 no https://vueschool.io/lessons/vuejs-component-naming-best-practices 2026-03-29 monthly 0.8 Component Naming Best Practices Video Lesson In this lesson, we'll learn the best practices of naming our Vue.js components. By following the best practices and official [Vue.js Style Guide](https://vuejs.org/v2/style-guide/) our applications... https://player.vimeo.com/video/ 412 yes no 2019-03-21T12:23:00+01:00 no https://vueschool.io/courses/static-site-generation-with-nuxtjs 2026-05-12 monthly 0.8 https://vueschool.io/lessons/what-is-pre-rendering 2026-05-04 monthly 0.8 What is Prerendering? Video Lesson In the first lesson of this course, you will learn what prerendering is. Prerendering is also known as static site generation and is easily confused with server-side rendering. This lesson will bre... https://player.vimeo.com/video/ 114 yes no 2019-01-02T12:45:00+01:00 no https://vueschool.io/lessons/prerendering-a-static-application 2026-05-04 monthly 0.8 Prerendering Static Routes Video Lesson In this lesson, we'll learn how to prerender our static routes with Nuxt.js. https://player.vimeo.com/video/ 149 yes no 2019-01-02T12:56:00+01:00 yes https://vueschool.io/lessons/prerendering-dynamic-routes 2026-05-04 monthly 0.8 Prerendering Dynamic Routes Video Lesson In this lesson, we learn how to prerender dynamic Nuxt routes. https://player.vimeo.com/video/ 262 yes no 2019-01-02T13:25:00+01:00 yes https://vueschool.io/lessons/cache-fetched-data-to-speed-up-route-generation 2026-05-04 monthly 0.8 Cache fetched Data to Speed Up Route Generation Video Lesson In this lesson, we learn an important performance trick to reduce the outbound network calls when we generate static sites of dynamic routes with Nuxt.js. https://player.vimeo.com/video/ 177 yes no 2019-01-02T13:48:00+01:00 yes https://vueschool.io/courses/async-data-with-nuxtjs 2026-05-12 monthly 0.8 https://vueschool.io/lessons/introduction-to-asynchronous-data-with-nuxt.js 2026-05-21 monthly 0.8 Introduction to Asynchronous Data with Nuxt.js Video Lesson This course is all about asynchronous data. To work along you will need an API. We recommend the [JSON Placeholder API](https://jsonplaceholder.typicode.com/) if you want to get up and running quic... https://player.vimeo.com/video/ 292 yes no 2018-12-17T10:31:00+01:00 no https://vueschool.io/lessons/fetch-async-data-with-axios 2026-05-21 monthly 0.8 Fetch Async Data with Axios Video Lesson In this lesson, we will switch to [axios](https://github.com/axios/axios), which is a full-blown, promise-based HTTP client that both works in the browser and the Node environment. https://player.vimeo.com/video/ 100 yes no 2018-12-17T11:05:00+01:00 no https://vueschool.io/lessons/the-asyncdata-method-and-the-context 2026-05-25 monthly 0.8 The asyncData method and the context Video Lesson Nuxt.js has a special method called `asyncData` that we have to use when we're rendering our application on the server-side. In this lesson, we'll learn how to fetch data with `asyncData` and also... https://player.vimeo.com/video/ 336 yes no 2018-12-17T11:16:00+01:00 yes https://vueschool.io/lessons/the-axios-module 2026-05-25 monthly 0.8 The Axios Module Video Lesson Nuxt modules are extensions to the framework that allows us to extend its core functionality. https://player.vimeo.com/video/ 210 yes no 2018-12-17T11:23:00+01:00 no https://vueschool.io/lessons/configuring-the-axios-module 2026-05-25 monthly 0.8 Configuring the Axios Module Video Lesson In this lesson, we're learning how to configure our Axios module in the Nuxt Config file, by setting a predefined base URL. https://player.vimeo.com/video/ 70 yes no 2018-12-18T14:12:00+01:00 yes https://vueschool.io/lessons/global-authentication-headers-nuxtjs 2026-05-25 monthly 0.8 Global Authentication Headers Video Lesson In this lesson, we're learning how to create a Nuxt.js plugin. We'll create a plugin that extends the Axios module by passing authentication headers along with every HTTP request. https://player.vimeo.com/video/ 136 yes no 2018-12-18T14:21:00+01:00 yes https://vueschool.io/lessons/async-data-in-vuex-with-nuxtjs 2026-05-25 monthly 0.8 Async Data in Vuex with Nuxt Video Lesson In this lesson, we're learning how to fetch asynchronous data with Nuxt.js using Vuex on the server side. This lesson requires that you're familiar with Vuex and also know [How to integrate Vuex in... https://player.vimeo.com/video/ 293 yes no 2018-12-18T14:31:00+01:00 yes https://vueschool.io/courses/test-with-jest 2026-05-12 monthly 0.8 https://vueschool.io/lessons/install-jest 2026-03-07 monthly 0.8 Install Jest Video Lesson This course is all about unit testing with [Jest](https://jestjs.io/) and in this lesson, we'll learn how to install Jest in our project. https://player.vimeo.com/video/ 178 yes no 2018-11-20T11:11:00+01:00 no https://vueschool.io/lessons/running-the-first-test 2026-06-03 monthly 0.8 Running the First Test Video Lesson In this lesson, we'll learn how to define our first test, also called specs which is short for specifications. https://player.vimeo.com/video/ 182 yes no 2018-11-20T11:55:00+01:00 no https://vueschool.io/lessons/jest-expectations 2026-03-07 monthly 0.8 Jest Expectations Video Lesson In this lesson, we're diving a little further into the [Jest expectations](https://jestjs.io/docs/en/expect) that we can use to test different data types. https://player.vimeo.com/video/ 202 yes no 2018-11-20T12:04:00+01:00 yes https://vueschool.io/lessons/snapshot-testing-with-jest 2026-03-07 monthly 0.8 Snapshot Testing with Jest Video Lesson Snapshot testing is a very interesting testing technique provided by Jest. In this lesson, we'll learn what snapshots are and how to use snapshots in our tests. https://player.vimeo.com/video/ 158 yes no 2018-11-20T12:19:00+01:00 yes https://vueschool.io/lessons/execute-code-before-and-after-jest-tests 2026-06-03 monthly 0.8 Execute Code Before and After Tests Video Lesson Short tests are often good tests. In order to prevent unnecessarily repetitions, we can use Jest's hooks to run code before or after every test. https://player.vimeo.com/video/ 153 yes no 2018-11-20T12:28:00+01:00 yes https://vueschool.io/lessons/run-specific-tests-only-jest 2026-06-03 monthly 0.8 Run Specific Tests Only Video Lesson There are times when we want to only run a specific test, or skip a specific test. In this lesson, we'll learn how to manipulate which tests are run by jest. https://player.vimeo.com/video/ 69 yes no 2018-11-20T12:35:00+01:00 yes https://vueschool.io/lessons/run-tests-in-watch-mode 2026-06-03 monthly 0.8 Run Tests in Watch Mode Video Lesson Restarting the tests manually can become cumbersome. In this lesson, we'll learn about the watch mode and how to automatically run our tests while working on them. https://player.vimeo.com/video/ 65 yes no 2018-11-20T12:41:00+01:00 yes https://vueschool.io/lessons/building-and-testing-a-library 2026-06-03 monthly 0.8 Building and Testing a Library Video Lesson In this chapter of the course, we will get our hands dirty by building and testing a JavaScript library with the TDD methodology. https://player.vimeo.com/video/ 329 yes no 2019-01-31T16:02:00+01:00 yes https://vueschool.io/lessons/the-record-method 2026-03-07 monthly 0.8 https://i.vimeocdn.com/video/757978063-ade4317f9ced9190a79d9018167b2a36dd23790d0f7f92ee1facde55c2350ff1-d_1280x720?&r=pad&region=us The Record Method Video Lesson In this lesson, we'll continue our test-driven development journey by creating a method that adds items to our model. We'll also find a great use case for a [spy](https://vueschool.io/lessons/what-... https://player.vimeo.com/video/316053850 292 yes no 2019-01-31T16:14:00+01:00 yes https://vueschool.io/lessons/the-all-method 2026-06-03 monthly 0.8 The All Method Video Lesson In this lesson, we'll work on retrieving all entries in our model. Since JavaScript pass arrays by reference we need to be careful with our model and make sure we serve a copy of our data. In this... https://player.vimeo.com/video/ 302 yes no 2019-01-31T16:16:00+01:00 yes https://vueschool.io/lessons/the-update-method 2026-06-03 monthly 0.8 The Update Method Video Lesson In this lesson, we'll implement the `update` method. We will write tests and specs for both updating and extending an existing entry, as well as for the error handling in case the entry doesn't exi... https://player.vimeo.com/video/ 464 yes no 2019-01-31T16:17:00+01:00 yes https://vueschool.io/lessons/customizable-options 2026-06-03 monthly 0.8 Customizable Options Video Lesson In the previous lesson, we implemented a more sophisticated architecture for our `record` method, which inevitably can be customized to different use cases. In this lesson, we'll refactor our Model... https://player.vimeo.com/video/ 436 yes no 2019-01-31T16:18:00+01:00 yes https://vueschool.io/lessons/the-find-method 2026-06-03 monthly 0.8 The Find Method Video Lesson In this lesson, we'll continue working on our library in a test-driven fashion. We'll implement the `find` method, a method that allows us to search for existing records. https://player.vimeo.com/video/ 325 yes no 2019-02-05T14:20:00+01:00 yes https://vueschool.io/courses/nuxtjs-fundamentals 2026-05-12 monthly 0.8 https://vueschool.io/lessons/what-is-nuxtjs 2026-03-30 monthly 0.8 What is Nuxt.js? Video Lesson Nuxt.js is a framework for creating Vue.js applications. Its goal is to help Vue developers take advantage of top-notch technologies, fast, easy and in an organized way. https://player.vimeo.com/video/ 225 yes no 2018-11-06T13:27:00+01:00 no https://vueschool.io/lessons/create-nuxt-app 2026-03-30 monthly 0.8 Create Nuxt App Video Lesson Nuxt.js has an official scaffolding tool (`create-nuxt-app`), that you can use from your package manager. https://player.vimeo.com/video/ 98 yes no 2018-11-06T13:36:00+01:00 no https://vueschool.io/lessons/guided-nuxtjs-project-tour 2026-03-30 monthly 0.8 Guided Nuxt.js Project Tour Video Lesson In this lesson, we'll show you around in our newly created Nuxt project. https://player.vimeo.com/video/ 122 yes no 2018-11-06T13:53:00+01:00 no https://vueschool.io/lessons/customize-the-home-page 2026-03-30 monthly 0.8 Customize the home page Video Lesson In this lesson, we start to customize our home page of our Nuxt project. https://player.vimeo.com/video/ 56 yes no 2018-11-06T14:16:00+01:00 no https://vueschool.io/lessons/nuxtjs-page-components 2026-03-30 monthly 0.8 Nuxt.js Page Components Video Lesson In this lesson, we will learn how to create new pages in a Nuxt.js application. We also see a real-world example of why you should always use **multi-worded names** on your components. https://player.vimeo.com/video/ 179 yes no 2018-11-06T14:21:00+01:00 no https://vueschool.io/lessons/global-css 2026-03-30 monthly 0.8 Global CSS Video Lesson While scoped styles are handy, they cannot solve all our CSS needs. You often need to have a set of global CSS rules to take care of your fundamental styling needs. https://player.vimeo.com/video/ 151 yes no 2018-11-06T14:33:00+01:00 no https://vueschool.io/lessons/adding-a-navbar-to-nuxt-apps 2026-03-30 monthly 0.8 Adding a Navbar to Nuxt Apps Video Lesson In this lesson, we're exploring where to put your navbar and other parts of your application that will be present on all pages. https://player.vimeo.com/video/ 89 yes no 2018-11-06T14:36:00+01:00 no https://vueschool.io/lessons/nuxtjs-dynamic-routes 2026-03-30 monthly 0.8 Dynamic Routes Video Lesson In this Nuxt.js lesson, we're looking into the router and dynamic routes. When we are working with dynamic content we need to pass the ID (or similar) of the content we would like to visit. https://player.vimeo.com/video/ 113 yes no 2018-11-06T14:38:00+01:00 no https://vueschool.io/lessons/linking-between-pages 2026-03-30 monthly 0.8 Linking Between Pages Video Lesson In this lesson, we'll learn how to link between pages in Nuxt, with `nuxt-link`. https://player.vimeo.com/video/ 157 yes no 2018-11-06T14:40:00+01:00 no https://vueschool.io/lessons/utilising-the-vuex-store-nuxtjs 2026-03-30 monthly 0.8 Utilising the Vuex Store Video Lesson Another great feature of Nuxt.js is that it supports [Vuex](https://vuex.vuejs.org/) out of the box. In this lesson, we're learning what we need to know to work with Vuex and Nuxt. https://player.vimeo.com/video/ 253 yes no 2018-11-06T14:42:00+01:00 no https://vueschool.io/lessons/nuxtjs-seo-and-meta-tags 2026-03-30 monthly 0.8 SEO and Meta Tags Video Lesson In this lesson, we're going to learn how Nuxt.js can make our JavaScript applications SEO friendly with pre-rendering and meta tags. https://player.vimeo.com/video/ 194 yes no 2018-11-06T14:45:00+01:00 no https://vueschool.io/lessons/builde-and-serve-the-nuxtjs-app 2026-03-30 monthly 0.8 Build and Serve the Nuxt.js App Video Lesson When our Nuxt app is ready to be deployed, we have to `build` our application before we can publish it on the internet. In this lesson, we're learning how to do just that. https://player.vimeo.com/video/ 49 yes no 2018-11-06T14:46:00+01:00 no https://vueschool.io/lessons/how-to-deploy-nuxtjs-to-heroku 2026-03-30 monthly 0.8 How to Deploy Nuxt.js to Heroku Video Lesson [Heroku](https://www.heroku.com/) is an easy and affordable service that we can use to host our Nuxt applications. In this lesson, we'll learn how to deploy our nuxt.js application to Heroku. https://player.vimeo.com/video/ 227 yes no 2018-11-06T15:32:00+01:00 no https://vueschool.io/lessons/how-to-deploy-nuxtjs-to-netlify 2026-03-30 monthly 0.8 How to Deploy Nuxt.js to Netlify Video Lesson A cool feature of Nuxt is that it can generate a static version of your application which you can deploy without the need of a server. This means that you can host your application in a service lik... https://player.vimeo.com/video/ 234 yes no 2018-11-06T15:34:00+01:00 no https://vueschool.io/courses/custom-vuejs-directives 2026-05-12 monthly 0.8 https://vueschool.io/lessons/understanding-vuejs-directives 2026-05-25 monthly 0.8 Understanding Vue.js Directives Video Lesson In this lesson, we go through Vue.js directives from top to bottom. We learn what they are and how you use them. We learn that a directive's job is to apply side effects to the DOM and that they ca... https://player.vimeo.com/video/ 155 yes no 2018-10-15T14:37:00+02:00 no https://vueschool.io/lessons/create-vuejs-directive 2026-05-25 monthly 0.8 Create Vue.js Directive Video Lesson In this lesson, you'll learn how to create a custom Vue.js directive. https://player.vimeo.com/video/ 83 yes no 2018-10-15T14:47:00+02:00 no https://vueschool.io/lessons/custom-vuejs-directive-values 2026-05-25 monthly 0.8 Custom Directive's Value Video Lesson Many directives require a value, and in this lesson, we're learning how to pass, receive and act upon the custom directive's value. https://player.vimeo.com/video/ 201 yes no 2018-10-15T14:51:00+02:00 no https://vueschool.io/lessons/vuejs-directives-are-reactive 2026-05-25 monthly 0.8 Directives are Reactive Video Lesson Vue.js directives are reactive. In this lesson, we're seeing that our custom directive respond when the dependency change. https://player.vimeo.com/video/ 91 yes no 2018-10-15T15:04:00+02:00 yes https://vueschool.io/lessons/custom-vuejs-directives-argument 2026-05-25 monthly 0.8 Directive's Argument Video Lesson Custom Vue.js directives support up to one argument. The argument, in this case `slow`, is specified with the colon `v-switch-color:slow`. https://player.vimeo.com/video/ 110 yes no 2018-10-15T15:09:00+02:00 yes https://vueschool.io/lessons/custom-vuejs-directive-modifiers 2026-05-25 monthly 0.8 Directive's Modifiers Video Lesson Custom Vue.js Directives accepts multiple modifiers. In this lesson, we learn how to create custom modifiers on our directives. https://player.vimeo.com/video/ 108 yes no 2018-10-15T15:12:00+02:00 yes https://vueschool.io/lessons/the-bind-hook 2026-03-29 monthly 0.8 The Bind Hook Video Lesson Custom Directives have the same [hooks](https://vuejs.org/v2/guide/custom-directive.html#Hook-Functions) as any vue.js component. In this lesson, we're learning when and how to use the `bind` direc... https://player.vimeo.com/video/ 94 yes no 2018-10-15T15:33:00+02:00 yes https://vueschool.io/lessons/the-unbind-hook 2026-03-29 monthly 0.8 The Unbind Hook Video Lesson In this lesson, we learn about a common gotcha when using custom directives together with intervals and events and how we can use the [unbind hook](https://vuejs.org/v2/guide/custom-directive.html#... https://player.vimeo.com/video/ 124 yes no 2018-10-15T15:38:00+02:00 yes https://vueschool.io/lessons/click-outside-directive 2026-03-29 monthly 0.8 Click Outside Directive Video Lesson In this lesson, you learn how to create a click outside directive. This directive solves a real-world problem and is a very handy custom vue.js directive that we use all the time. https://player.vimeo.com/video/ 131 yes no 2018-10-15T15:43:00+02:00 yes https://vueschool.io/lessons/register-directives-locally 2026-05-25 monthly 0.8 Register Directives Locally Video Lesson In this lesson, we learn how to define custom directives locally in our components. https://player.vimeo.com/video/ 140 yes no 2018-10-15T16:09:00+02:00 yes https://vueschool.io/courses/javascript-testing-fundamentals 2026-05-12 monthly 0.8 https://vueschool.io/lessons/what-to-test 2026-03-25 monthly 0.8 What to test? Video Lesson In this testing lesson, we're going to learn how to evaluate our code and identify what we should test. We walk through a `User` class and evaluate each method. https://player.vimeo.com/video/ 259 yes no 2018-10-15T09:00:00+02:00 no https://vueschool.io/lessons/types-of-testing 2026-03-25 monthly 0.8 Types of Testing Video Lesson In this lesson about testing, we're learning about the different types of tests we can create. https://player.vimeo.com/video/ 290 yes no 2018-10-15T09:57:00+02:00 no https://vueschool.io/lessons/what-are-mocks-and-mocking-javascript-testing 2026-03-25 monthly 0.8 What are mocks and mocking? Video Lesson Mocks are a common tool when writing tests for your software. In this lesson, we're learning what mocks are and why and when they are useful. https://player.vimeo.com/video/ 250 yes no 2018-10-15T10:05:00+02:00 no https://vueschool.io/lessons/what-are-spies-javascript-testing 2026-03-25 monthly 0.8 What are spies? Video Lesson In this lesson, we're going to learn what spies are when it comes to testing in JavaScript. Spies are very handy and often has a lighter footprint than [mocks](https://vueschool.io/lessons/what-are... https://player.vimeo.com/video/ 144 yes no 2018-10-15T10:37:00+02:00 no https://vueschool.io/lessons/what-are-stubs 2026-03-25 monthly 0.8 What are stubs? Video Lesson In this lesson, we're learning what stubs are when it comes to JavaScript testing. https://player.vimeo.com/video/ 188 yes no 2018-10-15T11:06:00+02:00 no https://vueschool.io/lessons/why-is-testing-important 2026-03-25 monthly 0.8 Why is testing important? Video Lesson Testing your software is important, and in this lesson, we will tell you why. https://player.vimeo.com/video/ 200 yes no 2018-10-15T11:22:00+02:00 no https://vueschool.io/courses/dynamic-forms-vuejs 2026-05-12 monthly 0.8 https://vueschool.io/lessons/the-dynamic-form 2026-05-25 monthly 0.8 The Badass Dynamic Form Video Lesson This course is all about dynamic forms and in this lesson, we'll go through what we will build. https://player.vimeo.com/video/ 100 yes no 2018-09-15T18:48:00+02:00 no https://vueschool.io/lessons/communication-between-forms 2026-05-25 monthly 0.8 Communication Between Forms Video Lesson In this lesson, we'll walk through the boilerplate that we have prepared for you and work on the communication between the steps and the mother form, using events. https://player.vimeo.com/video/ 511 yes no 2018-09-15T19:07:00+02:00 no https://vueschool.io/lessons/disable-the-navigation-until-the-step-is-valid 2026-05-25 monthly 0.8 Disable the Navigation until the Step is Valid Video Lesson In this lesson, we'll learn how to prevent the user from continuing to the next step while the current step is invalid. https://player.vimeo.com/video/ 124 yes no 2018-09-15T19:30:00+02:00 yes https://vueschool.io/lessons/pass-mamas-form-data-to-the-steps 2026-05-25 monthly 0.8 Pass Mamas Data to the Steps Video Lesson When we're creating dynamic forms, the steps sometimes need data from previous steps to do their job. In this lesson, we'll learn how to pass down the mama form's data to the step. https://player.vimeo.com/video/ 224 yes no 2018-09-15T19:34:00+02:00 yes https://vueschool.io/lessons/dynamic-components 2026-05-25 monthly 0.8 Dynamic Components Video Lesson In this lesson, we'll learn how to use [dynamic components](https://vuejs.org/v2/guide/components.html#Dynamic-Components) instead of rendering each step component individually. https://player.vimeo.com/video/ 165 yes no 2018-09-15T19:40:00+02:00 yes https://vueschool.io/lessons/preserve-component-state-vuejs 2026-05-25 monthly 0.8 Preserve Component State Video Lesson In this lesson, we're taking a look at a powerful Vue.js feature - the [keep-alive component](https://vuejs.org/v2/guide/components-dynamic-async.html#keep-alive-with-Dynamic-Components) - that all... https://player.vimeo.com/video/ 241 yes no 2018-09-15T19:46:00+02:00 yes https://vueschool.io/lessons/control-child-component-through-refs 2026-05-25 monthly 0.8 Control Child Component Through refs Video Lesson In this lesson, we'll learn how to control a component through the powerful [ref feature](https://vuejs.org/v2/api/#ref) of Vue.js. https://player.vimeo.com/video/ 341 yes no 2018-09-15T19:56:00+02:00 no https://vueschool.io/lessons/submit-the-mama-form 2026-05-25 monthly 0.8 Submit the Mama Form Video Lesson In this lesson, we'll work on how to handle the main form submission, when we have all the data we need. https://player.vimeo.com/video/ 151 yes no 2018-09-15T20:03:00+02:00 yes https://vueschool.io/lessons/asynchronous-form-state-vuejs 2026-05-25 monthly 0.8 Add Asynchronous State Video Lesson It is common courtesy to show a loading indicator while our forms (or code) executes asynchronous operations. In this lesson, we'll add an asynchronous state and a indicator to our form. https://player.vimeo.com/video/ 81 yes no 2018-09-15T20:11:00+02:00 yes https://vueschool.io/lessons/asynchronous-form-operations-vuejs 2026-05-25 monthly 0.8 Asynchronous Operations Inside Steps Video Lesson It's time to take our form wizard to the next level and integrate support for asynchronous operations inside the steps. In this lesson, we'll implement the feature that allows a user to login if th... https://player.vimeo.com/video/ 432 yes no 2018-09-15T20:13:00+02:00 yes https://vueschool.io/lessons/vuejs-watchers-and-keep-alive-activated-hook 2026-05-25 monthly 0.8 Vue.js Watchers and the Activated Hook Video Lesson In this lesson, we'll bring your attention to one situation that we're facing since we're preserving the component state with the keep-alive component. We're presenting two solutions to the same pr... https://player.vimeo.com/video/ 162 yes no 2018-09-15T20:26:00+02:00 yes https://vueschool.io/lessons/loading-indicator-while-the-step-performs-async-operations 2026-05-25 monthly 0.8 Loading Indicator while the Step Performs Async Operations Video Lesson In this lesson, we'll notify the mama form when a step is running asynchronous operations so we can display the loading indicator for the user. https://player.vimeo.com/video/ 146 yes no 2018-09-15T20:33:00+02:00 yes https://vueschool.io/lessons/component-communication-with-promises-instead-of-events 2026-05-25 monthly 0.8 Component Communication with Promises Instead of Events Video Lesson Our Dynamic Form is complete at this point. The steps communicate with the mama form through events, and the steps even support asynchronous operations. https://player.vimeo.com/video/ 853 yes no 2018-09-15T20:34:00+02:00 yes https://vueschool.io/courses/vuejs-form-validation 2026-05-12 monthly 0.8 https://vueschool.io/lessons/vuejs-form-validation-diy 2026-05-25 monthly 0.8 Do It Yourself Form Validation Video Lesson Form validation is important for most applications, and while some forms can be validated through simple techniques it often comes as an expense to the user experience. https://player.vimeo.com/video/ 385 yes no 2018-08-21T11:29:00+02:00 no https://vueschool.io/lessons/vuejs-form-validation-with-vuelidate 2026-05-25 monthly 0.8 Form Validation with Vuelidate Video Lesson In this lesson, we'll get started with [Vuelidate](https://vuelidate.netlify.com/) and take a look at how we can validate our forms with Vuelidates validators. https://player.vimeo.com/video/ 309 yes no 2018-08-21T11:54:00+02:00 no https://vueschool.io/lessons/display-detailed-errors-when-validating-a-form 2026-05-25 monthly 0.8 Display Detailed Errors when Validating a Form Video Lesson To improve the user experience of a form, we should display detailed errors about why it is invalid. https://player.vimeo.com/video/ 139 yes no 2018-08-21T12:11:00+02:00 yes https://vueschool.io/lessons/display-error-messages-after-user-input 2026-05-25 monthly 0.8 Display Error Messages After User Input Video Lesson It's not particularly sexy to display the input errors of a form by default. It's common to await the validation and hold back the form errors to after a user has interacted with the input field. https://player.vimeo.com/video/ 201 yes no 2018-08-21T12:25:00+02:00 yes https://vueschool.io/lessons/dynamic-classes-based-on-validation-status 2026-05-25 monthly 0.8 Dynamic Classes Based on Validation Status Video Lesson Sometimes it's handy or desired to change the style of an input field if it is valid or invalid. In this lesson, we're talking a look at how we can utilize dynamic class bindings from Vue.js with V... https://player.vimeo.com/video/ 70 yes no 2018-08-21T12:40:00+02:00 yes https://vueschool.io/lessons/display-form-errors-on-submit 2026-05-25 monthly 0.8 Display Form Errors on Submit Video Lesson It is not always preferred to disable the submit button when a form is invalid. In the current state, our form does not display any information about why the form is invalid unless you interact wit... https://player.vimeo.com/video/ 81 yes no 2018-08-21T12:56:00+02:00 yes https://vueschool.io/lessons/display-errors-after-input-is-complete 2026-05-25 monthly 0.8 Display Errors After Input is Complete Video Lesson Sometimes it is better to display the input errors after the input is complete rather than in the middle of the typing. In this lesson, we'll show you how to validate your input fields by using the... https://player.vimeo.com/video/ 121 yes no 2018-08-21T13:02:00+02:00 yes https://vueschool.io/lessons/a-validators-responsibility 2026-05-25 monthly 0.8 A Validators Responsibility Video Lesson When we're using Vuelidate to validate our forms, it is important to understand that the validators have a single responsibility. In this lesson, we're showing you a few examples of what to be awar... https://player.vimeo.com/video/ 59 yes no 2018-08-21T13:30:00+02:00 yes https://vueschool.io/lessons/form-validation-helpers 2026-05-25 monthly 0.8 Form Validation Helpers Video Lesson In this lesson, we're going to create form validation helpers, to both shorten the templates and also speed up development. https://player.vimeo.com/video/ 162 yes no 2018-08-21T13:38:00+02:00 yes https://vueschool.io/lessons/custom-vuelidate-rules 2026-05-25 monthly 0.8 Custom Vuelidate Rules Video Lesson Even though Vuelidate provides a variety of validation rules, you might find yourself in need of custom validation rules. In this lesson, we're learning how to create them. https://player.vimeo.com/video/ 188 yes no 2018-08-21T13:47:00+02:00 yes https://vueschool.io/lessons/conditional-validation-vuejs 2026-05-25 monthly 0.8 Conditional Validation Video Lesson In this lesson, we'll learn how to apply a validation rule only if a condition is met. https://player.vimeo.com/video/ 71 yes no 2018-09-15T18:28:00+02:00 yes https://vueschool.io/lessons/asynchronous-form-validation-vuejs 2026-05-25 monthly 0.8 Asynchronous Validation Video Lesson In this lesson, we'll learn how to create custom asynchronous vuelidate validators. Asynchronous validators are necessary when you need to check your database or an API to know if the input is vali... https://player.vimeo.com/video/ 277 yes no 2018-09-15T18:33:00+02:00 yes https://vueschool.io/courses/vuejs-fundamentals 2026-05-12 monthly 0.8 https://vueschool.io/lessons/getting-started-with-vuejs 2026-05-08 monthly 0.8 Getting Started With Vue.js Video Lesson In the very first lesson of our Vue.js Fundamentals course, besides of learning how to easily add Vue.js from a [CDN](https://unpkg.com/vue@2) to our site we're going to take a look at Vue.js enjoy... https://player.vimeo.com/video/ 232 yes no 2018-06-21T14:33:00+02:00 no https://vueschool.io/lessons/vuejs-template-syntax-and-expressions 2026-05-08 monthly 0.8 Vue.js Template Syntax And Expressions Video Lesson In the previous lesson, we briefly touched upon the templating syntax where we bind Vue data to the DOM. https://player.vimeo.com/video/ 146 yes no 2018-06-21T14:36:00+02:00 no https://vueschool.io/lessons/vuejs-loops 2026-05-08 monthly 0.8 List Rendering Video Lesson In almost all applications there is a need to loop or filter through a list of items and render them on the site. In this lesson, we're taking a closer look at Vue's `v-for` directive, which lets u... https://player.vimeo.com/video/ 466 yes no 2018-06-21T14:48:00+02:00 no https://vueschool.io/lessons/vuejs-user-inputs-vue-devtools 2026-05-08 monthly 0.8 User Inputs & Vue Devtools Video Lesson We will continue to learn about the reactivity system in this lesson. You'll learn how to handle user inputs with the `v-model` directive, and we will also introduce the Vue Devtools. The Vue Devto... https://player.vimeo.com/video/ 667 yes no 2018-06-21T14:56:00+02:00 no https://vueschool.io/lessons/vuejs-user-events 2026-05-08 monthly 0.8 User Events Video Lesson In this lesson, we'll learn how to respond to user events with Vue's `v-on` directive. https://player.vimeo.com/video/ 340 yes no 2018-06-21T15:01:00+02:00 no https://vueschool.io/lessons/vue-methods 2026-05-08 monthly 0.8 Vue Methods Video Lesson It is handy to be able to run JavaScript expressions directly in the template or a directive sometimes - but not always. https://player.vimeo.com/video/ 318 yes no 2018-06-21T15:08:00+02:00 no https://vueschool.io/lessons/vuejs-conditionals 2026-05-08 monthly 0.8 Conditional Rendering Video Lesson Conditional rendering is essential on any dynamic website. Vue.js offers two ways to conditionally render elements on our page and in this lesson we're learning how the `v-if` and `v-else` directiv... https://player.vimeo.com/video/ 253 yes no 2018-06-21T15:12:00+02:00 no https://vueschool.io/lessons/vuejs-attribute-bindings 2026-05-08 monthly 0.8 Attribute Bindings Video Lesson We do know how to render data in the DOM, and now it's time to take a closer look at how we can bind HTML attributes to our Vue data. https://player.vimeo.com/video/ 175 yes no 2018-06-21T15:26:00+02:00 no https://vueschool.io/lessons/vuejs-dynamic-classes 2026-05-08 monthly 0.8 Dynamic Classes Video Lesson A common need and use case for [attribute bindings](https://vueschool.io/lessons/vuejs-attribute-bindings) is to manipulate the look of elements through CSS classes or style attributes. To make thi... https://player.vimeo.com/video/ 472 yes no 2018-06-21T15:30:00+02:00 no https://vueschool.io/lessons/vuejs-computed-properties 2026-05-08 monthly 0.8 Computed Properties Video Lesson Computed properties are another powerful feature from Vue that allows us to transform or perform calculations on our data and then easily reuse the result as an up-to-date variable in our template.... https://player.vimeo.com/video/ 270 yes no 2018-06-21T18:49:00+02:00 no https://vueschool.io/courses/vuejs-firebase-authentication 2026-05-12 monthly 0.8 https://vueschool.io/lessons/introduction-to-firebase-authentication 2026-05-27 monthly 0.8 Introduction to Firebase Authentication Video Lesson In this lesson, we're giving you a quick introduction to what Firebase Authentication is, why it's so powerful and why we want to use Firebase Authentication in our JavaScript and Vue.js applications. https://player.vimeo.com/video/ 95 yes no 2018-05-11T15:36:00+02:00 no https://vueschool.io/lessons/sign-up-in-or-out-with-firebase-authentication 2026-05-27 monthly 0.8 Sign up, in, or out with Firebase Authentication Video Lesson In this lesson, we're implementing Firebase Authentication in our application. We'll learn how to register new users with Firebase's email and password provider. We're also learning how to create a... https://player.vimeo.com/video/ 468 yes no 2018-05-11T15:41:00+02:00 no https://vueschool.io/lessons/firebase-authentication-error-handling 2026-05-27 monthly 0.8 Firebase Authentication Error Handling Video Lesson In this lesson, we're learning how to catch Firebase auth errors when they occur. https://player.vimeo.com/video/ 197 yes no 2018-05-11T16:02:00+02:00 yes https://vueschool.io/lessons/firebase-authentication-via-third-party-providers 2026-05-28 monthly 0.8 Firebase Authentication via Third-Party Providers Video Lesson In this lesson, we'll learn how easy it is to implement third-party authentication providers (like Google, Github, Facebook etc.) with Firebase Authentication. https://player.vimeo.com/video/ 217 yes no 2018-05-11T16:19:00+02:00 yes https://vueschool.io/lessons/update-a-firebase-authentication-users-profile 2026-05-28 monthly 0.8 Update Firebase Authentication User Profile Video Lesson In this lesson, we're learning how to update a Firebase Authentication user's profile (display name and avatar). https://player.vimeo.com/video/ 179 yes no 2018-05-11T16:28:00+02:00 yes https://vueschool.io/lessons/update-a-firebase-users-email-and-password 2026-05-28 monthly 0.8 Update Firebase Authentication User Email and Password Video Lesson Updating a Firebase Authentication User's email and password requires a different approach than [updating the display name and avatar](https://vueschool.io/lessons/update-a-firebase-authentication-... https://player.vimeo.com/video/ 208 yes no 2018-05-11T16:32:00+02:00 yes https://vueschool.io/lessons/link-multiple-firebase-authentication-providers-to-one-user-account 2026-05-28 monthly 0.8 Link Multiple Firebase Authentication Providers to One User Account Video Lesson In this lesson, we learn how to link multiple third-party providers to one user account. https://player.vimeo.com/video/ 319 yes no 2018-05-11T16:44:00+02:00 yes https://vueschool.io/lessons/additional-user-data-and-firebase-authentication 2026-05-28 monthly 0.8 Additional User Data and Firebase Authentication Video Lesson Firebase Authentication is only an authentication system. This means that you cannot add extra properties to the Firebase user, directly. In this lesson, we're explaining the situation as well as h... https://player.vimeo.com/video/ 259 yes no 2018-05-11T16:54:00+02:00 yes https://vueschool.io/courses/vuejs-firebase-realtime-database 2026-05-12 monthly 0.8 https://vueschool.io/lessons/what-is-firebase-and-why-is-it-so-great 2026-05-28 monthly 0.8 What is Firebase and Why is it so Great? Video Lesson Firebase is a platform with different services, that helps us develop applications quicker. Firebase is developed with mobile development in mind, but it's absolutely not limited to mobile apps. https://player.vimeo.com/video/ 126 yes no 2018-03-27T11:33:00+02:00 no https://vueschool.io/lessons/meet-firebase-realtime-database 2026-05-28 monthly 0.8 Meet Firebase Realtime Database Video Lesson In this lesson, we'll create our first realtime database in Firebase, and prepare the necessary data structure for our realtime chatroom. https://player.vimeo.com/video/ 186 yes no 2018-03-27T11:35:00+02:00 no https://vueschool.io/lessons/read-data-from-firebase-with-vuejs 2026-05-28 monthly 0.8 Read Data from Firebase with Vue.js Video Lesson In this lesson, we'll learn how to connect our Vue.js app to the Firebase realtime database to read data. We will also address the fact that the realtime database from Firebase is event-driven, and... https://player.vimeo.com/video/ 400 yes no 2018-03-27T11:36:00+02:00 yes https://vueschool.io/lessons/write-data-to-firebase-with-vuejs 2026-05-28 monthly 0.8 Write Data to Firebase with Vue.js Video Lesson Now that we know how to fetch data from Firebase realtime database with vue, it's time to persist new messages in the database. https://player.vimeo.com/video/ 337 yes no 2018-03-27T11:36:00+02:00 yes https://vueschool.io/lessons/delete-data-from-firebase-with-vuejs 2026-05-28 monthly 0.8 Delete Data from Firebase with Vue.js Video Lesson Next up, we're going to learn how to delete data from the Firebase realtime database in our vue app and set up event listeners so the deleted message will disappear from all users in realtime. https://player.vimeo.com/video/ 242 yes no 2018-03-27T11:37:00+02:00 yes https://vueschool.io/lessons/update-data-from-firebase-with-vuejs 2026-05-28 monthly 0.8 Update Data from Firebase with Vue.js Video Lesson The final lesson in this chapter is about how to update data in the Firebase realtime database. Remember that our database is basically a JSON object, so we can locate and update any property we wa... https://player.vimeo.com/video/ 83 yes no 2018-03-27T11:38:00+02:00 yes https://vueschool.io/lessons/update-multiple-references-at-once 2026-05-28 monthly 0.8 Update Multiple References at Once Video Lesson In the previous lesson we learned how to update individual data, but many times, it's necessary to do multiple changes. In this lesson, we will learn that we need to consider a potential issue with... https://player.vimeo.com/video/ 83 yes no 2018-03-27T11:38:00+02:00 yes https://vueschool.io/lessons/display-notifications-when-things-happen 2026-05-28 monthly 0.8 Display Notifications when Things Happen Video Lesson This is the final lesson of our Vue.js + Firebase Realtime Database course, and in this lesson, we're going to implement notifications! We want to display a notification in realtime, to all live us... https://player.vimeo.com/video/ 216 yes no 2018-03-27T11:40:00+02:00 yes https://vueschool.io/courses/the-vuejs-2-master-class 2026-05-12 monthly 0.8 https://vueschool.io/lessons/what-do-i-need 2026-05-08 monthly 0.8 What do I need? Video Lesson In this lesson, we’ll go through the software you need to take our Vue.js Master Class. https://player.vimeo.com/video/ 104 yes no 2017-11-16T15:06:00+01:00 yes https://vueschool.io/lessons/get-started-with-the-mighty-vue-cli 2026-05-08 monthly 0.8 Get started with the mighty Vue CLI Video Lesson Vue CLI is a simple, but powerful utility tool (Command Line Interface) for scaffolding Vue.js projects with different build systems. With the Vue CLI you will have a boilerplate application ready... https://player.vimeo.com/video/ 191 yes no 2017-11-16T15:23:00+01:00 yes https://vueschool.io/lessons/scaffold-your-project-with-vue-cli 2026-05-08 monthly 0.8 Scaffold your project with Vue CLI Video Lesson In this lesson, we’ll take a look at the different options that are available when we’re about to scaffold - or create - a new Vue.js project from scratch with the Vue CLI utility tool in our t... https://player.vimeo.com/video/ 235 yes no 2017-11-16T15:27:00+01:00 yes https://vueschool.io/lessons/automatic-code-review-linting-with-eslint 2026-05-08 monthly 0.8 Automatic Code Review, Linting with ESLint Video Lesson A linter is a software that programmatically reviews your code and reports suspicious code to the author. https://player.vimeo.com/video/ 425 yes no 2017-11-16T15:32:00+01:00 yes https://vueschool.io/lessons/explore-webpack-template 2026-05-08 monthly 0.8 Explore the Webpack template Video Lesson In this lesson, we'll look through the boilerplate that Vue CLI made for us. We’ll not cover how to install Vue CLI. If that’s what you’re looking for, check out [*Get started with the mighty... https://player.vimeo.com/video/ 214 yes no 2017-11-16T15:34:00+01:00 yes https://vueschool.io/lessons/structuring-our-data 2026-05-08 monthly 0.8 Structuring our data Video Lesson You can find the data.json file on [GitHub](https://github.com/vueschool/forum-mockup/blob/master/data.json). https://player.vimeo.com/video/ 385 yes no 2017-11-16T15:49:00+01:00 yes https://vueschool.io/lessons/import-data-source-and-show-the-conversations 2026-05-08 monthly 0.8 Import data source and show the conversations Video Lesson In this lesson, we will review and import our [JSON data](https://github.com/vueschool/forum-mockup/blob/master/data.json) source to get the ball rolling. https://player.vimeo.com/video/ 237 yes no 2017-11-16T15:53:00+01:00 yes https://vueschool.io/lessons/vuejs-with-a-theme-and-scoped-css-styling 2026-05-08 monthly 0.8 Vue.js with a Theme and Scoped CSS Styling Video Lesson If you’re a bit like us and not gifted with great design skills, you’ll most likely develop your Vue.js application around a provided or bought design or theme. https://player.vimeo.com/video/ 593 yes no 2017-11-16T15:59:00+01:00 yes https://vueschool.io/lessons/introducing-the-vue-router 2026-05-08 monthly 0.8 Introducing the vue-router Video Lesson The vue-router is the official Vue.js router plugin which makes it super simple to create single page applications with Vue.js. https://player.vimeo.com/video/ 402 yes no 2017-11-16T16:03:00+01:00 yes https://vueschool.io/lessons/components-props-and-computed-properties 2026-05-08 monthly 0.8 Components, Props and Computed Properties Video Lesson It is important to organize your application well, and in this lesson, we will split the forum into smaller components and then learn how to pass a thread resource (object) to our newly created Thr... https://player.vimeo.com/video/ 691 yes no 2017-11-16T16:18:00+01:00 yes https://vueschool.io/lessons/router-link 2026-05-08 monthly 0.8 Router Links Video Lesson In this lesson, we’ll learn how our single page application can take advantage of the powerful vue-router by navigating to named routes with the router-link component. https://player.vimeo.com/video/ 152 yes no 2017-11-16T16:20:00+01:00 yes https://vueschool.io/lessons/organizing-the-components 2026-05-08 monthly 0.8 Organizing the Components Video Lesson In this lesson, we’ll organize, rename and move some of our components for the better. We’ll also take a look at absolute paths, using the @ alias, and see how we can create webpack aliases. https://player.vimeo.com/video/ 252 yes no 2017-11-16T16:22:00+01:00 yes https://vueschool.io/lessons/handeling-not-found-pages 2026-05-08 monthly 0.8 Handling not found pages Video Lesson Since we’re creating a single page application, we need to create a route for pages that are not found. In this lesson, we'll learn how to redirect an URL to a different route and how to serve al... https://player.vimeo.com/video/ 148 yes no 2017-11-16T16:23:00+01:00 yes https://vueschool.io/lessons/css-modules-with-webpack 2026-05-08 monthly 0.8 CSS Modules with Webpack Video Lesson In *Vue.js with a Theme and Scoped CSS Styling* we learned that modular, well-scoped CSS is an essential ingredient in a scalable Vue application. In this lesson, we’re going to learn how we can... https://player.vimeo.com/video/ 270 yes no 2017-11-16T16:38:00+01:00 yes https://vueschool.io/lessons/tidy-up-a-messy-component 2026-05-08 monthly 0.8 Tidy up a messy component Video Lesson We like that our code has a single responsibility so in this lesson we are going to dumb down the PageThreadShow component by extracting it into smaller components. We’ll also create a few handy... https://player.vimeo.com/video/ 355 yes no 2017-11-16T16:40:00+01:00 yes https://vueschool.io/lessons/arrow-functions 2026-05-08 monthly 0.8 Arrow Functions Video Lesson This lesson is an optional lesson for those of you who want to take a closer look at the JavaScript arrow functions that were introduced with ECMAScript 2015. We’ll be using arrow functions a lot... https://player.vimeo.com/video/ 131 yes no 2017-11-16T16:41:00+01:00 yes https://vueschool.io/lessons/let-the-discussion-begin 2026-05-08 monthly 0.8 Let the discussion begin! Video Lesson It is time to let our visitors participate in the discussion! https://player.vimeo.com/video/ 648 yes no 2017-11-16T16:43:00+01:00 yes https://vueschool.io/lessons/communicate-between-components 2026-05-08 monthly 0.8 Communicate between components Video Lesson In this lesson, we’ll dig deeper into the Vue.js event system and learn how we communicate between components with custom events. https://player.vimeo.com/video/ 363 yes no 2017-11-23T16:25:00+01:00 yes https://vueschool.io/lessons/destructuring-javascript-arrays-and-objects 2026-05-08 monthly 0.8 Destructuring JavaScript Arrays and Objects Video Lesson Here we have another optional lesson for those of you who are not familiar with the destructuring assignment that was introduced with ECMAScript 6 (ES6). https://player.vimeo.com/video/ 334 yes no 2017-11-23T16:29:00+01:00 yes https://vueschool.io/lessons/organize-threads-in-forums 2026-05-08 monthly 0.8 Organize threads in forums Video Lesson So far our forum has a decent presentation for both threads and posts, but in a real-world application, you would have groups of threads, called forums. We’re now about to implement the forum moc... https://player.vimeo.com/video/ 343 yes no 2017-12-06T20:29:00+01:00 yes https://vueschool.io/lessons/forum-components 2026-05-08 monthly 0.8 Forum Components Video Lesson If you’re binge watching you’ve probably guessed that we want to extract the forums into separate components in this lesson. Let’s get into it! https://player.vimeo.com/video/ 311 yes no 2017-12-07T14:53:00+01:00 yes https://vueschool.io/lessons/categories-collections-of-forums 2026-05-08 monthly 0.8 Categories, Collections of Forums Video Lesson In the previous lessons you probably thought that it wouldn’t be enough with just a way to group forums - and yes, you are right - we need categories as well. A category is a collection of forums... https://player.vimeo.com/video/ 448 yes no 2017-12-07T14:55:00+01:00 yes https://vueschool.io/lessons/human-friendly-dates 2026-05-08 monthly 0.8 Human Friendly Dates Video Lesson In this lesson, we’ll install a node module and learn how we can import the external JavaScript library. With the library, we’re going to create a few computed properties and filters, and take... https://player.vimeo.com/video/ 353 yes no 2017-12-10T20:30:00+01:00 yes https://vueschool.io/lessons/base-components 2026-05-08 monthly 0.8 Base Components Video Lesson When you want to use certain parts of your code in many different places, you should extract it to a component. If this component applies app-specific styling and conventions it is called a base co... https://player.vimeo.com/video/ 265 yes no 2017-12-21T21:43:00+01:00 yes https://vueschool.io/lessons/global-base-components 2026-05-08 monthly 0.8 Global Base Components Video Lesson In order for us to have access to our base components globally, we need to register it in the global scope. https://player.vimeo.com/video/ 354 yes no 2017-12-21T21:47:00+01:00 yes https://vueschool.io/lessons/migrating-to-vuex 2026-05-08 monthly 0.8 Migrating to Vuex Video Lesson Until now we’re using a global JSON object to store all our data. This is not sufficient for a real-world Vue.js application, so in this tutorial, we’re going to implement Vuex, which is the of... https://player.vimeo.com/video/ 327 yes no 2018-02-07T15:26:00+01:00 yes https://vueschool.io/lessons/creating-posts-using-vuex 2026-05-08 monthly 0.8 Creating Posts using Vuex Video Lesson In this Vue.js tutorial, we’ll refactor the addPost method so we can create forum posts with an action and mutations. https://player.vimeo.com/video/ 337 yes no 2018-02-07T15:37:00+01:00 yes https://vueschool.io/lessons/the-navbar 2026-05-08 monthly 0.8 The NavBar Video Lesson It’s time to add a NavBar to our application. It helps us navigate around and also see which user is the authenticated one. https://player.vimeo.com/video/ 159 yes no 2018-02-07T15:40:00+01:00 yes https://vueschool.io/lessons/grabbing-the-authenticated-user 2026-05-08 monthly 0.8 Grabbing the Authenticated User Video Lesson In this lesson, we’ll create the functionality for getting the authenticated user directly from the state, and display it in the NavBar. https://player.vimeo.com/video/ 134 yes no 2018-02-07T15:57:00+01:00 yes https://vueschool.io/lessons/user-profile-page 2026-05-08 monthly 0.8 User Profile Page Video Lesson In this lesson, we’ll create the profile page of a user along with the basic information. https://player.vimeo.com/video/ 324 yes no 2018-02-08T15:58:00+01:00 yes https://vueschool.io/lessons/utility-to-count-object-properties 2026-05-08 monthly 0.8 Utility to Count Object Properties Video Lesson In this vue.js tutorial, we’ll create a utility to help us count object properties. Counting object properties are something we need to do often, for instance inside many of our computed properti... https://player.vimeo.com/video/ 211 yes no 2018-02-08T15:59:00+01:00 yes https://vueschool.io/lessons/javascript-by-reference-vs-by-value 2026-05-08 monthly 0.8 JavaScript: By Reference vs By Value Video Lesson This lesson is not a Vue.js tutorial. Instead, we’ll go through an important concept in JavaScript. It is important to understand how variable types are stored and copied in JavaScript, they can... https://player.vimeo.com/video/ 202 yes no 2018-02-08T15:59:00+01:00 yes https://vueschool.io/lessons/update-a-user-profile 2026-05-08 monthly 0.8 Update a User Profile Video Lesson It’s time to implement the functionality to let the owner of a user profile, update his details. https://player.vimeo.com/video/ 403 yes no 2018-02-08T16:00:00+01:00 yes https://vueschool.io/lessons/shared-page-components 2026-05-08 monthly 0.8 Shared Page Components Video Lesson In this tutorial, we’ll take a look at how we can share page components in Vue.js, and in the end, let the user toggle between the view and edit components of his profile page. https://player.vimeo.com/video/ 180 yes no 2018-02-12T14:44:00+01:00 yes https://vueschool.io/lessons/use-authid-when-creating-posts 2026-05-08 monthly 0.8 Use authId when Creating Posts Video Lesson In this lesson, we’ll go back in our project and make a few enhancements. https://player.vimeo.com/video/ 145 yes no 2018-02-12T14:45:00+01:00 yes https://vueschool.io/lessons/create-new-threads 2026-05-08 monthly 0.8 Create New Threads Video Lesson We’ve come to a new chapter in our Master Class, and in this and the next vue.js tutorials in the course, we’ll create the logic for creating and updating threads. https://player.vimeo.com/video/ 142 yes no 2018-02-12T14:46:00+01:00 yes https://vueschool.io/lessons/actions-and-mutations 2026-05-08 monthly 0.8 Actions and Mutations Video Lesson In this Vue.js tutorial, we’ll refactor the addPost method into actions and mutations. https://player.vimeo.com/video/ 457 yes no 2018-02-12T14:48:00+01:00 yes https://vueschool.io/lessons/add-the-route 2026-05-08 monthly 0.8 Add the Route Video Lesson In this vue.js tutorial, we’ll set up the route where we can create new threads and test drive what we’ve built so far in this chapter. https://player.vimeo.com/video/ 149 yes no 2018-02-12T14:49:00+01:00 yes https://vueschool.io/lessons/redirect-on-publish 2026-05-08 monthly 0.8 Redirect on Publish Video Lesson This lesson is a short vue.js tutorial about how you can redirect the user after creating a resource, in this case, a thread, by returning a promise with the resource ID. https://player.vimeo.com/video/ 130 yes no 2018-02-12T14:49:00+01:00 yes https://vueschool.io/lessons/use-route-params 2026-05-08 monthly 0.8 Use Route Params Video Lesson It’s important that our `ThreadCreate` component is aware of the actual forum the thread should be created in. Right now, the component only knows about the location, if we use the button to crea... https://player.vimeo.com/video/ 95 yes no 2018-02-12T14:50:00+01:00 yes https://vueschool.io/lessons/thread-editor 2026-05-08 monthly 0.8 ThreadEditor Video Lesson If it’s one thing we know, it’s that humans make mistakes. In this Vue tutorial, we’ll create a ThreadEditor so our users can make changes to their thread when needed. https://player.vimeo.com/video/ 152 yes no 2018-02-12T14:52:00+01:00 yes https://vueschool.io/lessons/edit-threads 2026-05-08 monthly 0.8 Edit Threads Video Lesson Once the ThreadEditor is in place, we’ll work on the Vue code that updates the thread after the user has made their changes. https://player.vimeo.com/video/ 308 yes no 2018-02-28T14:21:00+01:00 yes https://vueschool.io/lessons/improve-the-thread-editor 2026-05-08 monthly 0.8 Improve the ThreadEditor Video Lesson In this Vue tutorial, we will improve the ThreadEditor and fix a few bugs. https://player.vimeo.com/video/ 218 yes no 2018-02-28T14:34:00+01:00 yes https://vueschool.io/lessons/editing-posts 2026-05-08 monthly 0.8 Editing Posts Video Lesson In this vue.js tutorial, we'll implement the functionality to edit existing posts. At the end of the lesson, we'll show you a sexy trick based on the returned promise from Vuex's dispatch method. https://player.vimeo.com/video/ 450 yes no 2018-03-05T12:18:00+01:00 yes https://vueschool.io/lessons/conditionally-display-multiple-elements-with-an-invisible-wrapper 2026-03-31 monthly 0.8 Conditionally display multiple elements with an invisible wrapper Video Lesson In this vue.js tutorial, we'll learn how we can conditionally show a group of elements, without having to use the v-if directive on all elements, by wrapping them in an invisible wrapper. https://player.vimeo.com/video/ 93 yes no 2018-03-05T12:25:00+01:00 yes https://vueschool.io/lessons/post-editor-buttons 2026-05-08 monthly 0.8 Post Editor Buttons Video Lesson In this lesson, we'll improve the post editor buttons based on the computed property `isUpdate`. We'll also use vue's event modifier to prevent the browser to scroll to the top when we click the ed... https://player.vimeo.com/video/ 72 yes no 2018-03-05T12:30:00+01:00 yes https://vueschool.io/lessons/vuejs-custom-prop-validation 2026-05-08 monthly 0.8 Vue.js Custom Prop Validation Video Lesson In this vue.js tutorial, we'll take a look at the custom prop validation, which is an exciting and convenient feature of Vue.js. With a custom prop validator, you can create custom logic to validat... https://player.vimeo.com/video/ 188 yes no 2018-03-05T12:33:00+01:00 no https://vueschool.io/lessons/has-the-post-been-modified 2026-05-08 monthly 0.8 Has the post been modified? Video Lesson In this lesson, we'll work on our forum logic, and show an indicator if the post has been edited after it's published. https://player.vimeo.com/video/ 192 yes no 2018-03-05T12:37:00+01:00 yes https://vueschool.io/lessons/what-is-a-higher-order-function 2026-05-08 monthly 0.8 What is a Higher Order Function? Video Lesson In this episode, we're going to take a look at a cool concept of functional programming in JavaScript - higher order functions. Higher order function is just fancy terminology for a function that e... https://player.vimeo.com/video/ 273 yes no 2018-03-15T10:03:00+01:00 no https://vueschool.io/lessons/creating-dynamic-vuex-getters-using-higher-order-functions 2026-05-08 monthly 0.8 Creating Dynamic Vuex Getters using Higher Order Functions Video Lesson In this episode, we'll use a higher order function to manipulate the behavior of an ordinary Vuex getter, so our getters accepts arguments. This is a very powerful and cool trick that also reduces... https://player.vimeo.com/video/ 317 yes no 2018-03-15T10:10:00+01:00 yes https://vueschool.io/lessons/create-vuex-mutations-with-higher-order-functions 2026-05-08 monthly 0.8 Create Vuex Mutations with Higher Order Functions Video Lesson We're big fans of higher order functions here at Vue School, and in this episode, we're going to show you how we can automatically create Vuex mutations using higher order functions. https://player.vimeo.com/video/ 296 yes no 2018-03-15T10:13:00+01:00 yes https://vueschool.io/lessons/filter-array-elements-to-count-unique-contributors 2026-05-08 monthly 0.8 Filter Array Elements to Count Unique Contributors Video Lesson In this lesson, we're going to see how we can use the array filter method to learn how many contributors we have in a thread, by only counting unique array elements. https://player.vimeo.com/video/ 290 yes no 2018-03-22T12:22:00+01:00 yes https://vueschool.io/lessons/small-improvements-before-the-firebase-chapter 2026-05-08 monthly 0.8 Small Improvements Before the Firebase Chapter Video Lesson Before we're moving to the next chapter in The Vue.js Master Class, where we will learn about and implement Firebase real-time database, we're going to make two minor improvements to our forum in t... https://player.vimeo.com/video/ 78 yes no 2018-03-22T12:36:00+01:00 yes https://vueschool.io/lessons/install-firebase-realtime-database 2026-05-08 monthly 0.8 Install Firebase Realtime Database Video Lesson In this lesson, we're installing Firebase Realtime Database, which we'll use for our back end needs in our vue.js forum. https://player.vimeo.com/video/ 168 yes no 2018-04-07T15:50:00+02:00 yes https://vueschool.io/lessons/create-the-firebase-realtime-database 2026-05-08 monthly 0.8 Set up the Firebase Realtime Database Video Lesson In this lesson, we're setting up the Firebase Realtime Database for our project and uploads the data.json so we can persist our content. https://player.vimeo.com/video/ 72 yes no 2018-04-07T16:25:00+02:00 yes https://vueschool.io/lessons/understanding-the-vuejs-lifecycle-hooks 2026-05-08 monthly 0.8 Understanding the Vue.js Lifecycle Hooks Video Lesson Each Vue instance has many lifecycle hooks that let us run code at certain stages of the lifecycle of a vue instance or vue component. In this lesson, we're taking a deeper look at the Vue.js lifec... https://player.vimeo.com/video/ 262 yes no 2018-04-07T16:38:00+02:00 no https://vueschool.io/lessons/migrate-vuex-to-firebase-realtime-database 2026-05-08 monthly 0.8 Start Migrate Vuex to use Firebase Realtime Database Video Lesson With the lifecycle hooks fresh in memory, form the previous lesson we'll start migrating our application to use the data from the Firebase Realtime Database instead of our JSON file. https://player.vimeo.com/video/ 426 yes no 2018-04-07T16:51:00+02:00 yes https://vueschool.io/lessons/fetch-data-from-firebase-with-vuex-actions 2026-05-08 monthly 0.8 Fetch Data from Firebase With Vuex Actions Video Lesson In this lesson of (The Vue.js Master Class)[https://vueschool.io/courses/the-vuejs-master-class] we'll take a look at how we can use Vuex actions to asynchronously fetch our resources from the Fire... https://player.vimeo.com/video/ 220 yes no 2018-04-08T18:37:00+02:00 yes https://vueschool.io/lessons/reusable-vuex-actions-and-mutations 2026-05-08 monthly 0.8 Reusable Vuex Actions and Mutations Video Lesson It is important to keep your code DRY, in the previous lesson we created actions to fetch threads, posts, and users but they essentially do the same. https://player.vimeo.com/video/ 231 yes no 2018-04-08T18:38:00+02:00 yes https://vueschool.io/lessons/vuex-actions-that-fetches-multiple-items-from-firebase 2026-05-08 monthly 0.8 Vuex Actions that Fetches Multiple Items from Firebase Video Lesson When we're working with a data structure that has multiple resources grouped under one, it's very handy to have a Vuex action that can fetch multiple resources with one call. https://player.vimeo.com/video/ 199 yes no 2018-04-08T18:39:00+02:00 yes https://vueschool.io/lessons/fetch-firebase-data-before-creating-component-instance 2026-05-08 monthly 0.8 Fetch Firebase Data Before Creating Component Instance Video Lesson With the tools ready to fetch single and multiple resources from Firebase, we're well equipped to work on our pages. https://player.vimeo.com/video/ 228 yes no 2018-04-08T18:40:00+02:00 yes https://vueschool.io/lessons/fetch-data-for-all-pages 2026-05-08 monthly 0.8 Fetch Data for All Pages Video Lesson In this lesson, we'll use our newly created Vuex Actions to fetch the data for the rest of our pages. https://player.vimeo.com/video/ 312 yes no 2018-04-12T09:34:00+02:00 yes https://vueschool.io/lessons/clean-up-components-by-mapping-our-vuex-actions 2026-05-08 monthly 0.8 Clean up Components by Mapping our Vuex Actions Video Lesson As a developer, we always strive to create clean, clear, and understandable code and in this lesson, we'll clean up our vue components, by [mapping the Vuex actions](https://vueschool.io/lessons/vu... https://player.vimeo.com/video/ 209 yes no 2018-04-12T09:38:00+02:00 yes https://vueschool.io/lessons/split-vuex-store-into-multiple-files 2026-05-08 monthly 0.8 Split Vuex Store into Multiple Files Video Lesson In this lesson, we'll split our Vuex store into multiple files and refactor the code to make it shorter and more organized. https://player.vimeo.com/video/ 160 yes no 2018-04-19T08:17:00+02:00 yes https://vueschool.io/lessons/fetch-data-before-creating-the-vue-instance 2026-05-08 monthly 0.8 Fetch Data Before Creating the Vue Instance Video Lesson In this lesson, we'll look at where we should run our fetch calls, to make sure we have the necessary data before the Vue Instance is created. In this case, we want to fetch the authenticated user... https://player.vimeo.com/video/ 133 yes no 2018-04-19T08:25:00+02:00 yes https://vueschool.io/lessons/store-new-posts-in-firebase-with-vuex 2026-05-08 monthly 0.8 Store New Posts in Firebase with Vuex Video Lesson In this lesson, we'll implement the necessary code in our Vuex Action to persist our new posts in the Firebase Realtime Database. https://player.vimeo.com/video/ 238 yes no 2018-04-19T08:34:00+02:00 yes https://vueschool.io/lessons/store-new-threads-in-firebase-with-vuex 2026-05-08 monthly 0.8 Store New Threads in Firebase with Vuex Video Lesson In this lesson, it's time to do the same as we did for the posts with new threads. We'll refactor our Vuex Action to persist new Threads in our Firebase Realtime Database. https://player.vimeo.com/video/ 271 yes no 2018-04-19T08:51:00+02:00 yes https://vueschool.io/lessons/counting-thread-contributors 2026-05-08 monthly 0.8 Counting Thread Contributors Video Lesson In this lesson, we're implementing one of the practical forum features: Counting a thread's contributors. https://player.vimeo.com/video/ 109 yes no 2018-04-19T09:02:00+02:00 yes https://vueschool.io/lessons/updating-posts-in-firebase-realtime-database 2026-05-08 monthly 0.8 Updating posts in Firebase Realtime Database Video Lesson In this lesson, we're migrating our Vuex action to persist post updates in the Firebase Realtime Database. https://player.vimeo.com/video/ 101 yes no 2018-04-27T12:31:00+02:00 yes https://vueschool.io/lessons/update-threads-in-firebase-realtime-database 2026-05-08 monthly 0.8 Update threads in Firebase Realtime Database Video Lesson This lesson is very similar to the previous one, where we will be migrating our Vuex action to persist thread changes in the Firebase Realtime Database. https://player.vimeo.com/video/ 112 yes no 2018-04-27T12:33:00+02:00 yes https://vueschool.io/lessons/hide-content-until-is-fully-loaded 2026-05-08 monthly 0.8 Hide Content Until Data is Fully Loaded Video Lesson When we're working with asynchronous data, the data loads in different speed and as a result appear in random order, causing the site to look weird. https://player.vimeo.com/video/ 121 yes no 2018-04-27T12:52:00+02:00 yes https://vueschool.io/lessons/share-logic-between-components-with-mixins 2026-05-08 monthly 0.8 Share Logic Between Components with Mixins Video Lesson Next up in our quest to create a better user experience when fetching async data, is to decide on an application structure that's reusable on multiple vue components and maintainable. https://player.vimeo.com/video/ 326 yes no 2018-04-27T12:53:00+02:00 yes https://vueschool.io/lessons/display-a-loading-indicator-while-components-fetch-async-data 2026-05-08 monthly 0.8 Display a Loading Indicator while Components Fetch Async Data Video Lesson In this lesson, we're looking at a very elegant solution on how we can show a loading indicator before the async data required by our page components are fully loaded in the state. https://player.vimeo.com/video/ 370 yes no 2018-04-27T12:56:00+02:00 yes https://vueschool.io/lessons/show-a-cool-loading-spinner-while-compoents-fetch-data 2026-05-08 monthly 0.8 Show a Cool Loading Spinner While Components Fetch Data Video Lesson In this lesson, we're creating a cool spinner component based on [SpinKit](http://tobiasahlin.com/spinkit/) and replacing the boring loading text we now show when fetching async data from our page... https://player.vimeo.com/video/ 82 yes no 2018-04-27T12:57:00+02:00 yes https://vueschool.io/lessons/show-a-progress-bar-while-complents-fetch-asynchronous-data 2026-05-08 monthly 0.8 Show a Progress Bar while Components Fetch Asynchronous Data Video Lesson Since we're fetching async data when loading a new component, it might be a better fit to change the loading indicator from a spinner to a progress bar. https://player.vimeo.com/video/ 155 yes no 2018-04-27T12:58:00+02:00 yes https://vueschool.io/lessons/the-firebase-tools-cli 2026-05-08 monthly 0.8 The Firebase Tools (CLI) Video Lesson It's always important to have a good workflow and taking some time to investigate new tools or flow can save you hours ahead. In this lesson, we're going to take a look at the Firebase CLI tool. https://player.vimeo.com/video/ 174 yes no 2018-05-20T20:24:00+02:00 yes https://vueschool.io/lessons/create-custom-npm-script-to-seed-database 2026-05-08 monthly 0.8 Create Custom NPM script To Seed Database Video Lesson In this lesson, we learn how to create a custom NPM script that will be used to re-seed our Firebase Realtime Database. https://player.vimeo.com/video/ 145 yes no 2018-05-20T20:34:00+02:00 yes https://vueschool.io/lessons/using-environment-variables-in-the-vuejs-webpack-template 2026-05-08 monthly 0.8 Using Environment Variables in the Vue.js Webpack Template Video Lesson In this lesson, we're setting our Firebase variables as Environment Variables, and we learn how Webpack compile them and makes them accessible in our vue applications. https://player.vimeo.com/video/ 208 yes no 2018-05-20T20:43:00+02:00 yes https://vueschool.io/lessons/using-env-file-in-the-vuejs-webpack-template 2026-05-08 monthly 0.8 Using .env file in the Vue.js Webpack Template Video Lesson You often want to keep some environment variables secret in a project. In this lesson, we learn how to use a `dotenv` file in the Vue.js Webpack template to keep them secret. https://player.vimeo.com/video/ 282 yes no 2018-05-20T20:47:00+02:00 yes https://vueschool.io/lessons/create-the-registration-form 2026-05-08 monthly 0.8 Create the Registration Form Video Lesson Yay! It's time to work on the user authentication. Before we start working with the fantastic Firebase Authentication API, we will create the page and form where our users can register themselves. https://player.vimeo.com/video/ 140 yes no 2018-06-12T20:01:00+02:00 yes https://vueschool.io/lessons/store-new-users-in-the-firebase-database 2026-05-08 monthly 0.8 Store new Users in the Database Video Lesson In this lesson, we'll create a [Vuex](https://vueschool.io/courses/vuex-for-everyone) action that will push and store the new user in our Firebase Realtime Database. https://player.vimeo.com/video/ 188 yes no 2018-06-12T20:06:00+02:00 yes https://vueschool.io/lessons/implement-firebase-authentication 2026-05-08 monthly 0.8 Implement Firebase Authentication Video Lesson It is time for another exciting part of [The Vue.js Master Class](https://vueschool.io/the-vuejs-master-class)! In this lesson, we will implement our newly created registration form with Firebase A... https://player.vimeo.com/video/ 257 yes no 2018-06-12T20:18:00+02:00 yes https://vueschool.io/lessons/sign-users-in-when-they-registers 2026-05-08 monthly 0.8 Sign Users in When they Register Video Lesson In this lesson, we'll set up a listener on `onAuthStateChanged` to automatically sign a user in when they create a new account. This design is convenient in combination with Vue's reactivity system... https://player.vimeo.com/video/ 200 yes no 2018-06-12T20:29:00+02:00 yes https://vueschool.io/lessons/sign-users-in-and-out 2026-05-08 monthly 0.8 Sign Users In and Out Video Lesson Next up in our User Authentication chapter, we will implement the sign in and out features so our registered users can log in and out when necessary. We will also swap out our mocked logged in user... https://player.vimeo.com/video/ 317 yes no 2018-06-12T20:38:00+02:00 yes https://vueschool.io/lessons/dropdown-menus-using-class-bindings 2026-05-08 monthly 0.8 Dropdown Menus using Class Bindings Video Lesson A powerful and handy feature of vue.js is the [class bindings](https://vuejs.org/v2/guide/class-and-style.html). In this lesson, we'll use class bindings to toggle the visibility of the drop-down m... https://player.vimeo.com/video/ 211 yes no 2018-06-12T20:42:00+02:00 yes https://vueschool.io/lessons/authenticate-users-via-3rd-party-providers 2026-05-08 monthly 0.8 Authenticate Users via 3rd Party Providers Video Lesson A luxury we get from using [Firebase Authentication](https://vueschool.io/courses/vuejs-firebase-authentication) is the ability to easily allow our users to authenticate through an array of popular... https://player.vimeo.com/video/ 340 yes no 2018-06-12T20:54:00+02:00 yes https://vueschool.io/lessons/in-component-navigation-guards 2026-05-08 monthly 0.8 In Component Navigation Guards Video Lesson Route protection is essential in any application that allows users to authenticate and in this lesson, we're learning how to protect Vue components with [navigation guards](https://router.vuejs.org... https://player.vimeo.com/video/ 424 yes no 2018-06-19T11:28:00+02:00 no https://vueschool.io/lessons/componentless-routes-with-navigation-guards 2026-05-08 monthly 0.8 Componentless Routes with Navigation Guards Video Lesson In-component guards are useful in certain scenarios, in this lesson we're learning how to set the guard directly in the Vue router. https://player.vimeo.com/video/ 174 yes no 2018-06-19T12:02:00+02:00 no https://vueschool.io/lessons/global-navigation-guards-and-meta-fields 2026-05-08 monthly 0.8 Global Navigation Guards and Meta Fields Video Lesson A third alternative to protecting sections of your vue.js applications is to use Global Navigation Guards with meta fields. With this method, we'd register the guards in the Vue routers beforeEach... https://player.vimeo.com/video/ 298 yes no 2018-06-27T12:16:00+02:00 no https://vueschool.io/lessons/firebase-authentication-vue-router-middleware-navigation-guards 2026-05-08 monthly 0.8 Firebase Authentication and Navigation Guards Video Lesson It is time to make sure that our vue router middleware checks if the user is authenticated. We use Firebase Authentication and have to be careful that we handle the event observer the right way. In... https://player.vimeo.com/video/ 343 yes no 2018-07-02T12:38:00+02:00 yes https://vueschool.io/lessons/vue-router-protecting-pages-from-authenticated-users 2026-05-08 monthly 0.8 Protecting Pages from Authenticated Users Video Lesson In this lesson, we will create another navigation guard in our middleware to be able to protect routes from authenticated users. Certain pages should only be visible to authenticated users, while o... https://player.vimeo.com/video/ 137 yes no 2018-07-02T12:46:00+02:00 yes https://vueschool.io/lessons/vue-router-redirect-users-after-logging-in-to-the-page-they-tried-to-visit 2026-05-08 monthly 0.8 Redirect Users After Logging In to the Page they Tried to Visit Video Lesson Don't you hate it when you're required to navigate back to a page after they required you to log in? Many developers do not take the user experience into account when they create their authenticati... https://player.vimeo.com/video/ 168 yes no 2018-07-02T13:17:00+02:00 yes https://vueschool.io/lessons/only-allow-authenticated-users-to-create-and-edit-posts 2026-05-08 monthly 0.8 Only Allow Authenticated Users to Create and Edit Posts Video Lesson In this lesson, we're going to hide the `PostEditor` from guests and replace it with a message that tells the user to either sign in or register a new account to participate in the discussions. https://player.vimeo.com/video/ 90 yes no 2018-07-02T13:20:00+02:00 yes https://vueschool.io/lessons/profile-page-of-authenticated-user 2026-05-08 monthly 0.8 Profile Page of Authenticated User Video Lesson In this lesson, we're going to clean up the debug-heading we created a few lessons ago in the profile page. We're also going to fetch the actual posts created by the user. https://player.vimeo.com/video/ 137 yes no 2018-07-02T13:25:00+02:00 yes https://vueschool.io/lessons/force-vue-router-to-destroy-component-to-trigger-lifecycel-hooks 2026-05-08 monthly 0.8 Force Vue Router to Destroy Component to Trigger Lifecycle Hooks Video Lesson In this lesson, we're learning how to force the vue router to destroy the component when we're navigating to another route that are using the same "PageComponent". This is important when you're rel... https://player.vimeo.com/video/ 314 yes no 2018-07-18T14:49:00+02:00 yes https://vueschool.io/lessons/split-a-large-vuex-store-into-namespaced-modules 2026-05-08 monthly 0.8 Split a Large Vuex Store Into Namespaced Modules Video Lesson When a Vuex store become large, it gets cumbersome to maintain. In this vue.js lesson, we'll modularize our vuex store for a more maintainable application. https://player.vimeo.com/video/ 804 yes no 2018-07-20T14:17:00+02:00 yes https://vueschool.io/lessons/split-a-large-vuex-store-into-namespaced-modules-part-2 2026-05-08 monthly 0.8 Split a Large Vuex Store Into Namespaced Modules Part 2 Video Lesson In this lesson, we continue to split our large Vuex Store into namespaced modules. https://player.vimeo.com/video/ 497 yes no 2018-07-20T14:19:00+02:00 yes https://vueschool.io/lessons/install-vuelidate-and-validate-the-registration-form 2026-05-08 monthly 0.8 Install Vuelidate and Validate the Registration Form Video Lesson This lesson and chapter requires that you already know how form validation with Vuelidate works. We recommend that you watch our [Form Validation](https://vueschool.io/courses/vuejs-form-validation... https://player.vimeo.com/video/ 258 yes no 2018-09-27T15:01:00+02:00 yes https://vueschool.io/lessons/validate-unique-fields-asynchronously-with-firebase 2026-05-08 monthly 0.8 Validate Unique Fields Asynchronously with Firebase Video Lesson In this lesson, we're learning how to validate unique fields asynchronously with Firebase. This is exactly what we need to do when we're making sure that a username is available before a user creat... https://player.vimeo.com/video/ 228 yes no 2018-09-27T15:06:00+02:00 yes https://vueschool.io/lessons/validate-that-an-input-is-an-image-url-that-exists 2026-05-08 monthly 0.8 Validate that an Input is An Image URL that Exists Video Lesson The avatar field in our user registration form is optional, but if it's provided, it should definitely be an existing URL and be an image. In this lesson, we're learning how to validate the URL aga... https://player.vimeo.com/video/ 165 yes no 2018-09-27T15:22:00+02:00 yes https://vueschool.io/lessons/extract-custom-vuelidate-validators-to-a-utility 2026-05-08 monthly 0.8 Extract Custom Vuelidate Validators to a Utility Video Lesson In this lesson, we're learning how we can extract custom Vuelidate Validators to utility functions. This allows us to reuse the same validation logic in other forms where needed. https://player.vimeo.com/video/ 112 yes no 2018-09-27T15:31:00+02:00 yes https://vueschool.io/lessons/homework-validate-all-forms 2026-05-08 monthly 0.8 Homework: Validate All Forms Video Lesson It's time to put what you've learned about [Form Validation](https://vueschool.io/courses/vuejs-form-validation) into practice by doing some homework. https://player.vimeo.com/video/ 62 yes no 2018-09-27T15:35:00+02:00 yes https://vueschool.io/lessons/close-dropdown-on-click-outside 2026-05-08 monthly 0.8 Close Dropdown on Click Outside Video Lesson In this lesson, we're implementing the `v-click-outside` directive that we made in the [Custome Vue.js Directives](https://vueschool.io/courses/custom-vuejs-directives) course. We import the direct... https://player.vimeo.com/video/ 87 yes no 2018-10-23T13:07:00+02:00 yes https://vueschool.io/lessons/mobile-navbar 2026-05-08 monthly 0.8 Mobile Navbar Video Lesson In this lesson, we're setting the viewport, so our design becomes responsive. Then we make sure that our navbar works on mobile devices. https://player.vimeo.com/video/ 133 yes no 2018-10-23T13:11:00+02:00 yes https://vueschool.io/lessons/close-mobile-navbar-on-scroll 2026-05-08 monthly 0.8 Close Mobile Navbar on Scroll Video Lesson In this lesson, we're creating a custom vue.js directive that will be triggered when a user scrolls on our forum. It is specially developed to close the navbar on mobile devices. https://player.vimeo.com/video/ 131 yes no 2018-10-23T13:16:00+02:00 yes https://vueschool.io/courses/vuex-for-everyone 2026-05-12 monthly 0.8 https://vueschool.io/lessons/meet-vuex 2026-03-07 monthly 0.8 Meet Vuex Video Lesson Vuex is a state management library for Vue applications. In this lesson, we'll go through an imaginary app and look at two different ways to handle the application data. By the end of this introduc... https://player.vimeo.com/video/ 166 yes no 2018-01-19T11:35:00+01:00 no https://vueschool.io/lessons/create-a-new-project-with-vue-cli 2026-03-07 monthly 0.8 Create a new project with vue-cli Video Lesson Before we start our quest to learn Vuex, we’ll need a fresh Vue project. In this lesson, we’ll set up a new Vue.js project using the vue-cli. https://player.vimeo.com/video/ 225 yes no 2018-01-19T12:04:00+01:00 no https://vueschool.io/lessons/install-and-use-vuex 2026-03-07 monthly 0.8 Install and use Vuex Video Lesson In this Vuex lesson, we’ll learn how to install and use Vuex in any application. https://player.vimeo.com/video/ 117 yes no 2018-01-19T12:14:00+01:00 no https://vueschool.io/lessons/vuex-mutations 2026-03-07 monthly 0.8 Vuex Mutations Video Lesson Mutations are a responsible for single state changes. We’ll show you how and create the mutation needed to set the products in our store, and we’ll stress the importance of understanding the tr... https://player.vimeo.com/video/ 202 yes no 2018-01-19T12:27:00+01:00 no https://vueschool.io/lessons/vuex-getters 2026-03-07 monthly 0.8 Vuex Getters Video Lesson Think of the Vuex getters as computed properties - perfect when we need to filter or calculate something at runtime. https://player.vimeo.com/video/ 117 yes no 2018-01-19T12:34:00+01:00 no https://vueschool.io/lessons/vuex-actions 2026-03-07 monthly 0.8 Vuex Actions Video Lesson In this lesson, we’ll dive into what Vuex actions are, and how and where to define in our application. https://player.vimeo.com/video/ 265 yes no 2018-01-19T12:42:00+01:00 no https://vueschool.io/lessons/store-access-from-all-components 2026-03-20 monthly 0.8 Store Access from all Components Video Lesson In this lesson, we’ll learn how we can easily access the Vuex store from all child components. https://player.vimeo.com/video/ 53 yes no 2018-01-19T12:54:00+01:00 no https://vueschool.io/lessons/add-products-to-the-cart 2026-03-07 monthly 0.8 Add products to the cart Video Lesson We’ve gained a theoretical overview of Vuex so far in this course, and in this tutorial, it’s time to implement what we’ve learned. https://player.vimeo.com/video/ 308 yes no 2018-01-19T19:20:00+01:00 no https://vueschool.io/lessons/cart-items-and-total 2026-03-20 monthly 0.8 Cart items and total Video Lesson When you’re developing, it’s very handy to [test drive the application with the Vue devtools](https://vueschool.io/lessons/vuex-mutation-history-and-vue-devtools), but it’s not enough for the... https://player.vimeo.com/video/ 272 yes no 2018-01-19T19:21:00+01:00 no https://vueschool.io/lessons/checkout 2026-03-07 monthly 0.8 Checkout Video Lesson In this lesson of the Vuex course, it’s time to let the users check out after they’ve added some sweet stuff to their shopping cart. https://player.vimeo.com/video/ 229 yes no 2018-01-19T19:22:00+01:00 no https://vueschool.io/lessons/vuex-mutation-history-and-vue-devtools 2026-03-20 monthly 0.8 Vuex Mutation History and Vue Devtools Video Lesson In this tutorial, we’ll show you how you can test drive your shopping cart functionality with the Vue Devtools. https://player.vimeo.com/video/ 166 yes no 2018-01-25T07:55:00+01:00 no https://vueschool.io/lessons/dynamic-vuex-getters 2026-03-07 monthly 0.8 https://i.vimeocdn.com/video/680530032-1a5020ecfd205c4cf052a508d82fc2251e6fd2042264f748ff155bbb1d04d5df-d_1280x720?&r=pad&region=us Dynamic Vuex Getters Video Lesson In this Vue.js tutorial, we’ll look into how we can use higher order functions to create dynamic getters in Vuex. Dynamic getters allow us to pass arguments to a getter. This is particularly usef... https://player.vimeo.com/video/253600325 151 yes no 2018-01-25T08:40:00+01:00 no https://vueschool.io/lessons/vuex-mapping-state-mutations-getters-and-actions 2026-03-20 monthly 0.8 Vuex Map Helpers Video Lesson In this vue.js tutorial, we’ll show you how the Vuex map helpers work and how they can be beneficial by making your code less verbose. We’ll cover Vuex mapState, mapGetters, mapActions and mapM... https://player.vimeo.com/video/ 484 yes no 2018-01-25T08:42:00+01:00 no https://vueschool.io/lessons/vuex-modules 2026-03-07 monthly 0.8 Vuex Modules Video Lesson When splitting the store into multiple files isn’t enough, you can extract the store into multiple Vuex modules. https://player.vimeo.com/video/ 443 yes no 2018-01-25T08:43:00+01:00 no https://vueschool.io/lessons/module-namespaces 2026-03-20 monthly 0.8 Namespaced Vuex Modules Video Lesson In the previous Vuex tutorial, we learned that by default, getters, actions, and mutations inside modules are registered under the global namespace, which allows multiple modules to react to the sa... https://player.vimeo.com/video/ 387 yes no 2018-01-25T08:44:00+01:00 no https://vueschool.io/lessons/split-vuex-store-in-multiple-files 2026-03-20 monthly 0.8 Split Vuex Store in Multiple Files Video Lesson The Vuex store can quickly become big and bloated in a large application. In this vue.js tutorial, we’ll show you how you can split your Vuex store into multiple files. https://player.vimeo.com/video/ 71 yes no 2018-01-31T15:20:00+01:00 no