https://vueschool.io/lessons/why-choose-vitest-the-tools-it-offers-and-the-ones-it-complements 2026-08-26T11:34:00.000Z https://vueschool.io/storage/972Cg5zGUZqobOswqKFBGrwcWD3r4DT6ZHzVPgb3.webp Why Choose Vitest, The Tools it Offers, and the Ones It Complements Vitest is the prescribed test runner for Vite and Vite is the prescribed build tool for Vue, so the choice is a no-brainer. In this lesson, we’ll explore all the reasons behind the choice of Vitest as the Vue testing default. Vitest shares your Vite config, transformers, and plugins (no parallel toolchain). It’s benefits go beyond a simple setup story boasting a wealth of features including: - **unit tests -** for testing small units of code (function, classes, etc) - browser-mode component tests - for true to life component specs - visual regression tests - to ensure pixel perfect output - REST API checks with fetch - for backend tests that resemble the syntax of a unit test - higher-confidence integration/E2E - when paired with Playwright for testing across the seams - and TypeScript type assertions - for the strictest of TS reliability You’ll also see coverage reporting and the many ways to run tests: CLI watch mode, agents, CI, browser GUI, and IDE extensions By the end of the lesson, you’ll know the toolkit before we dive into the strategy. **Links** - [Vue.js - Testing](https://vuejs.org/guide/scaling-up/testing.html) - [Vitest - Features](https://vitest.dev/guide/features) - [Vitest - Config](https://vitest.dev/config) - [Vitest - Component Testing](https://vitest.dev/guide/browser/component-testing.html) - [Vitest - Browser Mode](https://vitest.dev/guide/browser/) - [Vitest - Visual Regression Testing](https://vitest.dev/guide/browser/visual-regression-testing) - [Vitest - Type Testing](https://vitest.dev/guide/testing-types) https://play.gumlet.io/embed/6a8ec3eb0784f723ea18e1fd 434 2026-08-26T11:34:00.000Z yes no https://vueschool.io/lessons/the-importance-of-testing-in-the-age-of-ai 2026-08-26T11:34:00.000Z https://vueschool.io/storage/Jx5J9nKKRik4GYAz966T2xeuL6ebqxzP0ozumbNS.webp The Importance of Testing in the Age of AI Automated tests have always been important: - preventing regressions - forcing edge cases into the open - and buying confidence to change code later In this lesson, you’ll see why that still holds for the Vue and Vite ecosystems (ecosystem CI, real regression fixes in Vue core), and why AI coding agents raise the stakes. Agents write better code when they have a pass/fail feedback loop, and failing tests catch their mistakes before you become the verification bottleneck. Learn how Anthropic, OpenAI, and Cursor frame tests as the harness that keeps agents productive — so you ship faster with less manual review. ## Resources - [Vite Ecosystem CI](https://github.com/vitejs/vite-ecosystem-ci) - [Vue Ecosystem CI](https://github.com/vuejs/ecosystem-ci) - [Nuxt Ecosystem CI](https://github.com/nuxt/ecosystem-ci) - [Vue core - Teleport regression (#14701)](https://github.com/vuejs/core/issues/14701) - [Claude Code Best Practices - Give Claude a way to verify its work](https://code.claude.com/docs/en/best-practices#give-claude-a-way-to-verify-its-work) - [OpenAI - Run long horizon tasks with Codex](https://developers.openai.com/blog/run-long-horizon-tasks-with-codex) - [Cursor Learn - Test-driven development with agents](https://cursor.com/learn/creating-features#test-driven-development-with-agents) https://play.gumlet.io/embed/6a8ec3eb0784f723ea18e1fe 316 2026-08-26T11:34:00.000Z yes no https://vueschool.io/lessons/intro-to-vitest-for-vue-developers-testing-in-the-age-of-ai 2026-08-26T11:33:00.000Z https://vueschool.io/storage/gxcc1ZJoxqGNev7qQk6aDNK3EJHkNgK7dSPx208U.webp Intro to Vitest for Vue Developers: Testing in the Age of AI Hello, and welcome to the course! In this introductory lesson we map out what you’ll learn throughout the rest of the lessons: - automated tests as an essential AI feedback loop - why Vitest fits Vite-based Vue apps - which kinds of tests belong where - and how clear architecture with distinct seams and contracts so full-stack Vue apps easier to test Preview what the course will cover in depth (practical Vue and Nitro testing examples, testing auth-walled pages, component tests, etc ) and what it deliberately skips (setup, Vitest internals, and exhaustive syntax tours) so you can focus on the lasting skill: knowing where to cut and which tests are most appropriate where. **Links** - [Vitest - Getting Started](https://vitest.dev/guide/) - [Vue.js - Testing](https://vuejs.org/guide/scaling-up/testing) - ["The Testing Trophy and Testing Classifications" - Kent C. Dodds](https://kentcdodds.com/blog/the-testing-trophy-and-testing-classifications) - ["Legacy Seam" - Martin Fowler](https://martinfowler.com/bliki/LegacySeam.html) https://play.gumlet.io/embed/6a8ec3eb0784f723ea18e1fc 247 2026-08-26T11:33:00.000Z yes no https://vueschool.io/lessons/rolling-back-failed-optimistic-updates-in-pinia-colada 2026-02-24T08:14:00.000Z https://vueschool.io/storage/L2lSls6pwi7cEO4Of1IUZwDac2ShdnAnFzELmm1h.png Rolling Back Failed Optimistic Updates in Pinia Colada 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 leave the user staring at a lie. Roll back the state, surface the error, and let them try again. In this lesson, we’ll teach you how to do exactly that in Pinia Colada. **Links** - [Pinia Colada Docs > Rollback Optimistic Updates](https://pinia-colada.esm.dev/guide/query-invalidation.html#Optimistic-Updates) https://play.gumlet.io/embed/699d58b426981d8913bdd6e1 188 2026-02-24T08:14:00.000Z yes no https://vueschool.io/lessons/how-to-follow-along-in-this-course 2026-02-10T07:25:00.000Z https://vueschool.io/storage/kn90aYxf0nooy5wHMHdgnqSuuPljbRscelXcpLMA.png How to Follow Along in this Course In this lesson, learn how to follow along in the course codebase to learn new concepts lesson by lesson. Each lesson has it’s own dedicated page. All you need to do is open the corresponding page depending on the lesson you’re watching! While the codebase is built with Nuxt, it’s not mandatory to know or even like Nuxt to follow along with the course. All Pinia Colada concepts work exactly the same in a vanilla Vue.js project! **Links** - [? Clone the course repo to follow along](https://github.com/vueschool/Pinia-Colada-Scalable-Data-Handling-in-Vue) https://play.gumlet.io/embed/698ae653873071aec5d91558 187 2026-02-10T07:25:00.000Z yes no https://vueschool.io/lessons/intro-to-pinia-colada 2026-02-10T07:21:00.000Z https://vueschool.io/storage/Yu5w5zRRaEX7COBotiPjMcuQYRxMg3oQpcajCJDb.png Intro to Pinia Colada 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. **Links** - [Pinia Colada](https://pinia-colada.esm.dev/) - [Pinia Colada Github](https://github.com/posva/pinia-colada) https://play.gumlet.io/embed/698ae653aec3d4e420d1dd73 198 2026-02-10T07:21:00.000Z yes no https://vueschool.io/lessons/display-a-custom-ui-component-for-results-of-a-tool-call 2026-01-20T08:38:00.000Z https://vueschool.io/storage/kWALqSbkFLLSUEKIGO5tYNECm44mYIIv0VIAXB9I.png Display a Custom UI Component for Results of a Tool Call In this lesson, learn how the Nuxt UI Chat template uses the AI SDK to to power a generative weather app card. **Links** - [AI SDK - Generative User Interfaces](https://ai-sdk.dev/docs/ai-sdk-ui/generative-user-interfaces) https://play.gumlet.io/embed/696f4845bcef432370c92217 325 2026-01-20T08:38:00.000Z yes no https://vueschool.io/lessons/getting-usage-data-with-the-ai-sdk 2025-12-23T11:00:00.000Z https://vueschool.io/storage/IdPsAG4tABSt6SdSkHdT4OBTqFfxFTXEFR2cahLd.png Getting Usage Data with the AI SDK 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 normal output!). All of this feedback is, of course, normalized across all providers. **Links** - [AI SDK Docs - generateText Returns](https://v6.ai-sdk.dev/docs/reference/ai-sdk-core/generate-text#returns) https://play.gumlet.io/embed/694a7c487d16fe920f146658 112 2025-12-23T11:00:00.000Z yes no https://vueschool.io/lessons/giving-llms-eyes-to-see-your-images 2025-12-23T11:00:00.000Z https://vueschool.io/storage/gDR8Oaj7R7Ed3XRUasd22FSIilsmAZpMR7f4v9AG.png Giving LLMs Eyes to See Your Images 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 extracting text from images, to auto tagging images, NSFW detection, and more! **Links** - [AI SDK Docs - Image Parts](https://v6.ai-sdk.dev/docs/foundations/prompts#image-parts) https://play.gumlet.io/embed/694a7be8ce9fe9c0ba7b012b 213 2025-12-23T11:00:00.000Z yes no https://vueschool.io/lessons/text-vs-system-vs-message-prompts 2025-12-23T11:00:00.000Z https://vueschool.io/storage/IcxD9TPHVHGO9fTfmvoun6ZVQm9wIyIuB9z3oz5b.png Text vs System vs Message Prompts In this lesson, learn the difference between: 1. text prompts 2. system prompts 3. and message prompts Text prompts are great for one off generation needs while system prompts are meant as weightier, more important rules to constrain the LLM output and steer it despite what a user prompt might instruct. Message prompts are great for use with chat interfaces. They pass multiple messages within a conversation so that the LLM can respond naturally in the context of the whole conversation. **Links** - [AI SDK Docs - Prompts](https://v6.ai-sdk.dev/docs/foundations/prompts) https://play.gumlet.io/embed/694a7b351224275c4c313249 330 2025-12-23T11:00:00.000Z yes no https://vueschool.io/lessons/generate-text-with-the-ai-sdk 2025-12-16T06:51:00.000Z https://vueschool.io/storage/7GGMzE2REboe9IwINcf33030RNmYq1gPRuhfX8Ez.png Generate Text with the AI SDK In this lesson, learn how to generate text with the AI SDK and Google Gemini flash 2.5. **Links** - [AI SDK Doc - generateText](https://v6.ai-sdk.dev/docs/reference/ai-sdk-core/generate-text) https://play.gumlet.io/embed/694103dd9c03c66ee7bf99dc 133 2025-12-16T06:51:00.000Z yes no https://vueschool.io/lessons/install-the-ai-sdk-and-select-a-provider 2025-12-16T06:48:00.000Z https://vueschool.io/storage/KYYVOwXRpnMTK2kWAc8eFJODEBi0lCSRpQ6cStyo.png Install the AI SDK and Select a Provider 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. Feel free to choose another provider if you wish. **Links** - [AI SDK Providers](https://v6.ai-sdk.dev/providers/ai-sdk-providers) - [Google AI Studio API Keys](https://aistudio.google.com/app/api-keys) - [Gemini Pricing](https://ai.google.dev/gemini-api/docs/pricing) https://play.gumlet.io/embed/694103ddad648471cb20ee97 220 2025-12-16T06:48:00.000Z yes no https://vueschool.io/lessons/bootstrap-new-node-project-for-typescript 2025-12-16T06:43:00.000Z https://vueschool.io/storage/y1rH55EwvFl2NcVwtH6qXNqKdfJySzaXftNLmroY.png Bootstrap New Node Project for TypeScript 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/AI-Interfaces-with-Vue-Nuxt-and-the-AI-SDK/archive/refs/heads/boilerplate.zip) Do note the `tsx` script that’s been added in `package.json` for running typescript files with a `.env` file loaded. ```tsx // tsconfig.json { "compilerOptions": { "noEmit": true, "target": "esnext", "module": "nodenext", "rewriteRelativeImportExtensions": true, "erasableSyntaxOnly": true, "verbatimModuleSyntax": true }, "include": ["**/*.ts"], "exclude": ["node_modules"] } ``` **Links** - [Node.js Docs - Full TypeScript Support](https://nodejs.org/api/typescript.html#full-typescript-support) - [Node Version Manager (nvm)](https://github.com/nvm-sh/nvm) - [Node.js v20.6.0: Introducing Built-in .env File Support](https://medium.com/netanelbasal/node-js-v20-6-0-introducing-built-in-env-file-support-fb1b1de4f1fa) - [Download Boilerplate Code](https://github.com/vueschool/AI-Interfaces-with-Vue-Nuxt-and-the-AI-SDK/archive/refs/heads/boilerplate.zip) https://play.gumlet.io/embed/694103dd9c03c66ee7bf99df 356 2025-12-16T06:43:00.000Z yes no https://vueschool.io/lessons/what-is-the-ai-sdk 2025-12-16T06:43:00.000Z https://vueschool.io/storage/FcE7KmrDmviQg88NslOKF5qSH4L0tlJzdVjrvixe.png What is the AI SDK? 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: 1. Unified API Provider 2. Generative UI 3. Framework Agnostic 4. Streaming Responses Get a clear roadmap of what you’ll learn throughout the course. We’ll cover everything from model setup and streaming structured data to tool calling, agents, MCP integration, and advanced frontend patterns with `useChat`, persisted sessions, generated UI, and AI-powered autocomplete. This video sets the stage for building real, production-ready AI features with the AI SDK + Vue + Nuxt. **Links** - [AI SDK version 6](https://v6.ai-sdk.dev/) https://play.gumlet.io/embed/694103dd616d7c8c6a6c5df3 374 2025-12-16T06:43:00.000Z yes no https://vueschool.io/lessons/nuxt-ui-charts 2025-12-09T08:39:00.000Z https://vueschool.io/storage/yEAtr2RhZfaKFFAOgg3ACJpupdZWddbsA1FIRyct.png Nuxt UI Charts 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! **Links** - [Nuxt Charts](https://nuxtcharts.com/) (use promo code `VUESCHOOL` for 20% of the premium offering) https://play.gumlet.io/embed/6937d9cbcf9ba947e6b093ac 277 2025-12-09T08:39:00.000Z yes no https://vueschool.io/lessons/semantic-colors-as-props-and-adding-custom-semantic-colors 2025-10-15T13:02:00.000Z https://video.gumlet.io/68ef47d385d14eb3e33191da/68ef47fa23b33f9d633ae4c9/thumbnail-1-0.png?v=1761237867473 Semantic Colors as Props and Adding Custom Semantic Colors 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 the color prop, many components default to using certain semantic colors under the hood for a great first look even without further configuration. Also learn how to add your own custom semantic colors in `app.config.ts` and `nuxt.config.ts` for type-safe customizations. **Links** - [Nuxt UI Docs - Extend Colors](https://ui.nuxt.com/docs/getting-started/theme/design-system#extend-colors) - [Nuxt UI Docs - Button Color Prop](https://ui.nuxt.com/docs/components/button#color) https://play.gumlet.io/embed/68ef47fa23b33f9d633ae4c9 154 2025-10-15T13:02:00.000Z yes no https://vueschool.io/lessons/the-nuxt-design-system 2025-10-15T13:00:00.000Z https://video.gumlet.io/68ef47d385d14eb3e33191da/68ef47fa23b33f9d633ae4c4/thumbnail-1-0.png?v=1760540313436 The Nuxt Design System 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 colors in `main.css.` Also learn how to map tailwind colors to Nuxt UI’s **semantic color system** in `app.config.ts`, so that components look great and fit your needs. Also learn to customize breakpoints and fonts. **Links** - [Nuxt UI Design System](https://ui.nuxt.com/docs/getting-started/theme/design-system) https://play.gumlet.io/embed/68ef47fa23b33f9d633ae4c4 457 2025-10-15T13:00:00.000Z yes no https://vueschool.io/lessons/boot-up-a-nuxt-ui-project-from-a-template-and-editor-setup 2025-10-15T12:58:00.000Z https://video.gumlet.io/68ef47d385d14eb3e33191da/68ef47fa16308ddf052f6465/thumbnail-1-0.png?v=1760540161054 Boot Up a Nuxt UI Project from a Template and Editor Setup 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://code.visualstudio.com/)) to work best with Nuxt UI. Make sure you have the following extensions installed for the best experience! - [TailwindCSS Intellisense](https://open-vsx.org/extension/bradlc/vscode-tailwindcss) - [ESLint](https://open-vsx.org/extension/dbaeumer/vscode-eslint) - [Iconify Intellisense](https://open-vsx.org/extension/antfu/iconify) - [Vue Official (not mentioned in video)](https://open-vsx.org/extension/Vue/volar) **LInks** - [Nuxt UI Templates](https://ui.nuxt.com/templates) - [Recommend VS Code Settings for Tailwind to Work](https://ui.nuxt.com/docs/getting-started/installation/nuxt#import-tailwind-css-and-nuxt-ui-in-your-css) - Nuxt UI Dashboard Template - [Github](https://github.com/nuxt-ui-templates/dashboard) | [Preview](https://dashboard-template.nuxt.dev/) - [Ni - package manager shortcuts](https://github.com/antfu-collective/ni) https://play.gumlet.io/embed/68ef47fa16308ddf052f6465 592 2025-10-15T12:58:00.000Z yes no https://vueschool.io/lessons/what-is-nuxt-ui 2025-10-15T12:54:00.000Z https://video.gumlet.io/68ef47d385d14eb3e33191da/68ef47fa23b33f9d633ae4c7/thumbnail-1-0.png?v=1760539883910 What is Nuxt UI? [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](https://vueschool.io/courses/tailwind-css-fundamentals) so it pairs perfectly with everyone’s favorite utility classes. **Links** - [Nuxt UI](https://ui.nuxt.com/) - [Nuxt Labs](https://github.com/nuxtlabs) - [Tailwind CSS](https://tailwindcss.com/) - [Tailwind CSS Course](https://vueschool.io/courses/tailwind-css-fundamentals) https://play.gumlet.io/embed/68ef47fa23b33f9d633ae4c7 279 2025-10-15T12:54:00.000Z yes no https://vueschool.io/lessons/add-mailcatcher-devtools-to-the-email-layer 2025-10-07T06:38:00.000Z https://video.gumlet.io/68b7f540373a93b510570e3b/68e4cb47b0bb97fd980f611a/thumbnail-1-0.png?v=1759826210138 Add Mailcatcher Devtools to the Email Layer 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 can speak with the main app. The trickiest part is hosting the page for the iframe on it’s own server. After that you can speak to the main app via REST API or Remote Procedure Call (RPC). Links Nuxt Devtools Author Guide https://play.gumlet.io/embed/68e4cb47b0bb97fd980f611a 513 2025-10-07T06:38:00.000Z yes no https://vueschool.io/lessons/configuring-nuxt-layers 2025-09-09T07:06:00.000Z https://video.gumlet.io/68b7f540373a93b510570e3b/68bfe9e2cfdbcd132cf63378/thumbnail-1-0.png?v=1757408917530 Configuring Nuxt Layers Just like modules, it’s useful to expose configuration options for layers. Such layer options can be defined via 2 primary methods: via app.config for public options and runtime config for private options Links Nuxt Docs - App Config Nuxt Docs - Runtime Config https://play.gumlet.io/embed/68bfe9e2cfdbcd132cf63378 241 2025-09-09T07:06:00.000Z yes no https://vueschool.io/lessons/imports-in-nuxt-layers 2025-09-03T06:52:00.000Z https://video.gumlet.io/68b7f540373a93b510570e3b/68b7f5586a218061ab4499ae/thumbnail-1-0.png?v=1756889363554 Imports in Nuxt Layers 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 layers so that it works everywhere. The Nuxt layer import alias `#layers/[layer-name]` was introduced in Nuxt v3.16.0 and makes importing layer JS/TS modules intuitive and type-safe in both the layer source code and the consuming app. **Links** - [Nuxt Docs - Named Layer Aliases](https://nuxt.com/docs/4.x/guide/going-further/layers#named-layer-aliases) - [Nuxt Docs - Relative Paths and Aliases](https://nuxt.com/docs/4.x/guide/going-further/layers#relative-paths-and-aliases) https://play.gumlet.io/embed/68b7f5586a218061ab4499ae 253 2025-09-03T06:52:00.000Z yes no https://vueschool.io/lessons/bootstrapping-a-new-nuxt-layer 2025-09-03T06:48:00.000Z https://video.gumlet.io/68b7f540373a93b510570e3b/68b7f5586a218061ab4499b0/thumbnail-1-0.png?v=1756889176977 Bootstrapping a New Nuxt Layer 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. ```tsx npm create nuxt -- --template layer nuxt-layer ``` **Links** - [Nuxt Docs - Authoring Layers](https://nuxt.com/docs/4.x/guide/going-further/layers) https://play.gumlet.io/embed/68b7f5586a218061ab4499b0 347 2025-09-03T06:48:00.000Z yes no https://vueschool.io/lessons/introduction-to-nuxt-layers 2025-09-03T06:45:00.000Z https://video.gumlet.io/68b7f540373a93b510570e3b/68b7f5586a218061ab4499a4/thumbnail-1-0.png?v=1756888967541 Introduction to Nuxt Layers 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 use cases and strategies. **Links** - [Nuxt Docs - Layers](https://nuxt.com/docs/4.x/getting-started/layers) https://play.gumlet.io/embed/68b7f5586a218061ab4499a4 174 2025-09-03T06:45:00.000Z yes no https://vueschool.io/lessons/sidebars-in-shadcn-vue-continued 2025-08-19T06:59:00.000Z https://video.gumlet.io/69bfd24c4fe0bcfaae52c4f4/69c281e29ae74a34288fe773/thumbnail-1-0.png?v=1774356575365 Sidebars in ShadCN Vue (continued) 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 other custom content. Add sidebar groups to better organize controls and display then as collapsable or static items. Add action buttons to groups, menu items, and more! Add submenu’s to menus and render them always or as a collapsable control. **Links** - [Shadcn Vue - Sidebar](https://www.shadcn-vue.com/docs/components/sidebar.html) https://play.gumlet.io/embed/69c281e29ae74a34288fe773 411 2025-08-19T06:59:00.000Z yes no https://vueschool.io/lessons/course-conclusion-10 2025-08-26T06:34:00.000Z https://video.gumlet.io/69bfd24c4fe0bcfaae52c4f4/69c2891a9ae74a342890a3a8/thumbnail-1-0.png?v=1774357530370 Course Conclusion 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. **Links** - [**Vue School on X/Twitter**](https://x.com/VueSchool_io) - [**Vue School on LinkedIn**](https://www.linkedin.com/company/vueschool/mycompany/) - [**Vue School on Facebook**](https://www.facebook.com/vueschool/) - [**Vue School on BlueSky**](https://bsky.app/profile/vueschool.io) - [**team@vueschool.io**](mailto:team@vueschool.io) https://play.gumlet.io/embed/69c2891a9ae74a342890a3a8 91 2025-08-26T06:34:00.000Z yes no https://vueschool.io/lessons/dark-mode-with-shadcn-vue 2025-08-26T06:31:00.000Z https://video.gumlet.io/69bfd24c4fe0bcfaae52c4f4/69c2891a9ae74a342890a37c/thumbnail-1-0.png?v=1774358350779 Dark mode with ShadCN Vue In this lesson, learn how to combine VueUse with Shadcn to support a dark mode toggle and even full fledged custom theme selection. - [VueUse - useColorMode](https://vueuse.org/core/useColorMode/) https://play.gumlet.io/embed/69c2891a9ae74a342890a37c 308 2025-08-26T06:31:00.000Z yes no https://vueschool.io/lessons/theming-with-shadcn-vue 2025-08-26T06:25:00.000Z https://video.gumlet.io/69bfd24c4fe0bcfaae52c4f4/69c2887f9ae74a342890940f/thumbnail-1-0.png?v=1774357473472 Theming with ShadCN Vue 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 `text-warning-foreground`. **Links** - [Shadcn Vue Theming](https://www.shadcn-vue.com/docs/theming.html) https://play.gumlet.io/embed/69c2887f9ae74a342890940f 384 2025-08-26T06:25:00.000Z yes no https://vueschool.io/lessons/data-tables-and-sonner-in-shadcn-vue 2025-08-26T06:22:00.000Z https://video.gumlet.io/69bfd24c4fe0bcfaae52c4f4/69c281e2531f7f7b6ce44711/thumbnail-1-0.png?v=1774365751372 Data Tables and Sonner in ShadCN Vue 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 after a timeout, show messages with a status like info, success, warn, or error, provide the user action buttons to act on the message in some way. You can also customize the appearance of sonner toasts to display in different locations, based on your preference and customize keyboard shortcuts for interacting with the toasts. **Links** - [Data Table Lesson from Master Class](https://vueschool.io/lessons/create-a-data-table-for-the-projects-page) - [Shadcn Docs - Sonner](https://www.shadcn-vue.com/docs/components/sonner) - [Shadcn Docs - Data Table](https://www.shadcn-vue.com/docs/components/data-table) https://play.gumlet.io/embed/69c281e2531f7f7b6ce44711 605 2025-08-26T06:22:00.000Z yes no https://vueschool.io/lessons/sidebars-in-shadcn-vue 2025-08-19T06:54:00.000Z https://video.gumlet.io/69bfd24c4fe0bcfaae52c4f4/69c281e2531f7f7b6ce446fb/thumbnail-1-0.png?v=1774365463387 Sidebars in ShadCN Vue 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: - Responsive design - Keyboard shortcuts for open/close - Persisted open/close state - Multiple props and related components to customize it’s appearance and function **Links** - [Shadcn Vue - Sidebar](https://www.shadcn-vue.com/docs/components/sidebar.html) https://play.gumlet.io/embed/69c281e2531f7f7b6ce446fb 702 2025-08-19T06:54:00.000Z yes no https://vueschool.io/lessons/use-ai-to-create-a-user-settings-form 2025-08-19T06:51:00.000Z https://video.gumlet.io/69bfd24c4fe0bcfaae52c4f4/69c281e2531f7f7b6ce446f9/thumbnail-1-0.png?v=1774356066114 Use AI to Create a User Settings Form 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 validation that meets the form creation patterns of our project. ? Interested in getting the most out of AI in your development workflows? [Checkout aidd.io](https://aidd.io/). **Links** - [Cursor](https://www.cursor.com/) - [Github Copilot](https://github.com/features/copilot) https://play.gumlet.io/embed/69c281e2531f7f7b6ce446f9 255 2025-08-19T06:51:00.000Z yes no https://vueschool.io/lessons/forms-and-form-validation-with-shadcn-vue 2025-08-19T06:47:00.000Z https://video.gumlet.io/69bfd24c4fe0bcfaae52c4f4/69c281e24f62335fd44828f0/thumbnail-1-0.png?v=1774363677946 Forms and Form Validation with ShadCN Vue 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 feedback is taken care of by the Shadcn Vue components. **Links** - [Shadcn Docs - Form](https://www.shadcn-vue.com/docs/components/form.html) - [VeeValidate](https://vee-validate.logaretm.com/v4/) - [Zod](https://zod.dev/) https://play.gumlet.io/embed/69c281e24f62335fd44828f0 546 2025-08-19T06:47:00.000Z yes no https://vueschool.io/lessons/dialogs-and-alerts-with-shadcn-vue 2025-08-12T06:37:00.000Z https://video.gumlet.io/69bfd24c4fe0bcfaae52c4f4/69c281e29ae74a34288fe76b/thumbnail-1-0.png?v=1774357507509 Dialogs and Alerts with ShadCN Vue 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. Links Shadcn Alert Shadcn AlertDialog Shadcn Dialog MDN Docs - Alert Role MDN Docs - AlertDialog Role MDN Docs - Dialog Role https://play.gumlet.io/embed/69c281e29ae74a34288fe76b 628 2025-08-12T06:37:00.000Z yes no https://vueschool.io/lessons/auto-formatting-shadcn-components 2025-08-12T06:34:00.000Z https://video.gumlet.io/69bfd24c4fe0bcfaae52c4f4/69c281e24f62335fd44828d6/thumbnail-1-0.png?v=1774355196901 Auto Formatting ShadCN Components 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 requirements. Links Prettier ESlint Formatting https://play.gumlet.io/embed/69c281e24f62335fd44828d6 67 2025-08-12T06:34:00.000Z yes no https://vueschool.io/lessons/shadcn-vue-blocks-for-fast-uis 2025-08-12T06:32:00.000Z https://video.gumlet.io/69bfd24c4fe0bcfaae52c4f4/69c281e2531f7f7b6ce446ef/thumbnail-1-0.png?v=1774355480150 ShadCN Vue Blocks for Fast UIs 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 pages or dashboard layouts. Links Shadcn Vue - Blocks https://play.gumlet.io/embed/69c281e2531f7f7b6ce446ef 211 2025-08-12T06:32:00.000Z yes no https://vueschool.io/lessons/buttons-variants-and-the-as-child-prop-with-shadcn-vue 2025-08-05T06:58:00.000Z https://video.gumlet.io/69bfd24c4fe0bcfaae52c4f4/69c281e29ae74a34288fe75d/thumbnail-1-0.png?v=1774355384666 Buttons, Variants, and the as-child Prop with ShadCN Vue 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-type components also accept an as-child prop so you can render your own element while keeping all behavior, accessibility, and style of the original component. Links Shadcn Vue Docs - Button https://play.gumlet.io/embed/69c281e29ae74a34288fe75d 211 2025-08-05T06:58:00.000Z yes no https://vueschool.io/lessons/install-shadcn-vue 2025-08-05T06:55:00.000Z https://video.gumlet.io/69bfd24c4fe0bcfaae52c4f4/69c281e2531f7f7b6ce446ed/thumbnail-1-0.png?v=1774355742686 Install ShadCN Vue 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 the page. npx shadcn-vue@latest add button Links Shadcn Vue + Vite Installation Guide https://play.gumlet.io/embed/69c281e2531f7f7b6ce446ed 363 2025-08-05T06:55:00.000Z yes no https://vueschool.io/lessons/what-is-shadcn-vue 2025-08-05T06:53:00.000Z https://video.gumlet.io/69bfd24c4fe0bcfaae52c4f4/69c281e29ae74a34288fe770/thumbnail-1-0.png?v=1774356965080 What is ShadCN Vue? 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 component into your project repo. This gives you a functional and beautiful starting point to use as-is or to customize based on your needs. ShadCN Vue includes many useful components like buttons, cards, data tables, accordions, and more. All components are 100% compatible with Tailwind CSS. Links Shadcn Vue Reka-UI https://play.gumlet.io/embed/69c281e29ae74a34288fe770 252 2025-08-05T06:53:00.000Z yes no https://vueschool.io/lessons/setup-page-with-nuxt-ui-to-login-with-github 2025-06-10T06:31:00.000Z https://video.gumlet.io/69bfd38a913220ae3bb526aa/69c290189ae74a3428917344/thumbnail-1-0.png?v=1774359276331 Setup Page with Nuxt UI to Login with GitHub 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://play.gumlet.io/embed/69c290189ae74a3428917344 191 2025-06-10T06:31:00.000Z yes no https://vueschool.io/lessons/course-conclusion-9 2025-06-03T05:55:00.000Z https://video.gumlet.io/69bfd8b84fe0bcfaae534dab/69c29f609ae74a3428932c28/thumbnail-1-0.png?v=1774362868903 Course Conclusion 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 you have any questions, comments, or anything else you’d like to reach out to Vue School about, we’d love to hear from you! Links CKEditor CKEditor Demos CKEditor Docs https://play.gumlet.io/embed/69c29f609ae74a3428932c28 153 2025-06-03T05:55:00.000Z yes no https://vueschool.io/lessons/ckeditor-mentions 2025-06-03T05:53:00.000Z https://video.gumlet.io/69bfd8b84fe0bcfaae534dab/69c29f609ae74a3428932c2a/thumbnail-1-0.png?v=1774363035368 CKEditor Mentions 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 document. You can also customize the marker to something like a # to support features like tags. Mentions in CKEditor are fully customizable with features like getting mention dropdown options with an async function, providing a custom render function, limiting dropdown options, and more. Links CKEditor Mentions https://play.gumlet.io/embed/69c29f609ae74a3428932c2a 345 2025-06-03T05:53:00.000Z yes no https://vueschool.io/lessons/permanently-store-documents-on-your-server 2025-06-03T05:49:00.000Z https://video.gumlet.io/69bfd8b84fe0bcfaae534dab/69c29f609ae74a3428932c34/thumbnail-1-0.png?v=1774363344954 Permanently Store Documents on Your Server 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 the last person leaves the session and only exists to support collaboration. It’s not meant to be permanent storage. In this lesson, learn how to use the document id and the autosave plugin to permanently persist data to your own servers and retrieve the data from your servers to populate the content on page load. Links CKEditor Saving Collaboration Data CKEditor Autosave Plugin https://play.gumlet.io/embed/69c29f609ae74a3428932c34 495 2025-06-03T05:49:00.000Z yes no https://vueschool.io/lessons/customize-user-permissions-per-document 2025-06-03T05:47:00.000Z https://video.gumlet.io/69bfd8b84fe0bcfaae534dab/69c29f60531f7f7b6ce78c11/thumbnail-1-0.png?v=1774362793756 Customize User Permissions Per Document 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 permissions to different users for different docs. Links CKEditor Collaboration Config https://play.gumlet.io/embed/69c29f60531f7f7b6ce78c11 238 2025-06-03T05:47:00.000Z yes no https://vueschool.io/lessons/ckeditor-real-time-collaboration-and-customizing-users 2025-06-03T05:45:00.000Z https://video.gumlet.io/69bfd8b84fe0bcfaae534dab/69c29f609ae74a3428932c31/thumbnail-1-0.png?v=1774363438044 CKEditor Real Time Collaboration and Customizing Users 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, CKEditor is a fully production ready solution that requires we setup secure JSON web tokens on the server side. Because of this, in a Nuxt project we can use a Nitro powered API endpoint. If you aren’t using Nuxt, you can use any server side technology of your choice, as long as you’re returning a valid token. Links CKEditor JWT Token Endpoint Documentation CKEditor Collaboration Roles and Permissions JSON Web Token Implementation Guide Nuxt.js API Endpoints Documentation https://play.gumlet.io/embed/69c29f609ae74a3428932c31 536 2025-06-03T05:45:00.000Z yes no https://vueschool.io/lessons/tweaking-ckeditor-styles-to-be-fully-responsive 2025-06-03T05:40:00.000Z https://video.gumlet.io/69bfd8b84fe0bcfaae534dab/69c29f609ae74a3428932c2d/thumbnail-1-0.png?v=1774362750156 Tweaking CKEditor Styles to Be Fully Responsive 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. <!--app.vue--> <Editor style="max-width: 100%" /> <!--Editor.vue--> <script setup> function onReady(editor) { //... const annotationsUIs = editor.plugins.get( 'AnnotationsUIs' ); function refreshDisplayMode() { if ( window.innerWidth < 1115) { annotationsUIs.switchTo( 'inline' ); } else { annotationsUIs.switchTo( 'wideSidebar' ); } } editor.ui.view.listenTo( window, 'resize', refreshDisplayMode ); refreshDisplayMode(); } </script> <style scoped> @media (max-width: 1115px) { :deep(.editor-container__sidebar) { min-width: 0px; width: 0px; visibility: hidden; } :deep(.ck-editor__editable) { min-width: 0 !important; } } </style> Links Git Commit for Annotations Sidebar Fix https://play.gumlet.io/embed/69c29f609ae74a3428932c2d 171 2025-06-03T05:40:00.000Z yes no https://vueschool.io/lessons/ckeditor-formatting-features-walkthrough 2025-06-03T05:38:00.000Z https://video.gumlet.io/69bfd8b84fe0bcfaae534dab/69c29f609ae74a3428932c2f/thumbnail-1-0.png?v=1774362872365 CKEditor Formatting Features Walkthrough 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 and more: Text size, color, font, and background color Paragraphs and headings Unordered and Ordered Lists Text justification/alignment Tables Standards- compliant keyboard shortcuts A convenient bubble menu Notion-style slash commands for mouse free content creation Best of all, all of these option are configurable for your use case and if you want to remove any of them you can do so at anytime! https://play.gumlet.io/embed/69c29f609ae74a3428932c2f 126 2025-06-03T05:38:00.000Z yes no https://vueschool.io/lessons/get-started-with-ckeditor-in-no-time-with-the-builder 2025-06-03T05:35:00.000Z https://video.gumlet.io/69bfd8b84fe0bcfaae534dab/69c29f60531f7f7b6ce78c13/thumbnail-1-0.png?v=1774363328286 Get Started with CKEditor in No Time with the Builder In this hands-on tutorial, learn how to rapidly deploy a professional document editor in your Vue.js application using CKEditor's powerful builder. The builder let’s user choose from some common preset use-cases so we can get started quickly. Then it gives you complete control to pick and choose exactly what features you want to install and how you want toolbars to behave. The full process takes only a few minutes and by the end of it, you can copy a few code snippets into a new or existing project. https://play.gumlet.io/embed/69c29f60531f7f7b6ce78c13 517 2025-06-03T05:35:00.000Z yes no https://vueschool.io/lessons/intro-to-ckeditor 2025-06-03T05:31:00.000Z https://video.gumlet.io/69bfd8b84fe0bcfaae534dab/69c29f604f62335fd44b6c82/thumbnail-1-0.png?v=1774362760499 Intro to CKEditor 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 worldwide. In this first lesson, get a quick look of what this powerful document editor has to offer. There are lots of features baked right in that rival document editing giants like Google Docs including: Rich text formatting Real-time collaboration Comments and annotations Revision history and change tracking Document persistence and Image and file uploads Best of all you can use CK Editor within the front-end framework of your choice (Vue, React, Angular, or Vanilla JS)! Links CKEditor CKEditor Official Documentation https://play.gumlet.io/embed/69c29f604f62335fd44b6c82 146 2025-06-03T05:31:00.000Z yes no https://vueschool.io/lessons/social-logins-in-a-nuxt-app-github 2025-04-30T05:00:00.000Z https://video.gumlet.io/69bfd38a913220ae3bb526aa/69c29018531f7f7b6ce5d2c5/thumbnail-1-0.png?v=1774359471654 Social Logins in a Nuxt App (GitHub) 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. Links GitHub Docs - Creating an OAuth App https://play.gumlet.io/embed/69c29018531f7f7b6ce5d2c5 471 2025-04-30T05:00:00.000Z yes no https://vueschool.io/lessons/why-authentication-matters-in-nuxt 2025-04-30T05:00:00.000Z https://video.gumlet.io/69bfd38a913220ae3bb526aa/69c290184f62335fd449b60f/thumbnail-1-0.png?v=1774359409369 Why Authentication Matters in Nuxt 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 perfect place to start! Other solutions are available but Nuxt auth utils is the simplest and most flexible production ready solution with support for: Hybrid Rendering 15+ OAuth Providers Username/Password Login (via hashing utils) a Vue composable Server utils and more! Links Nuxt Auth Utils Nuxt Supabase Module Sidebase Auth Nuxt Module Better Auth https://play.gumlet.io/embed/69c290184f62335fd449b60f 171 2025-04-30T05:00:00.000Z yes no https://vueschool.io/lessons/overview-of-tailwind-css-version-4-changes 2025-03-18T12:57:00.000Z https://video.gumlet.io/696915b5a829585863dcb384/696918d6a829585863dd0552/thumbnail-1-0.png?v=1768496154000 Overview of Tailwind CSS Version 4 Changes 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 utils, css theme variables, expanded gradient APIs, a not variant, and more! Links Tailwind CSS Blog - V4 Announcement https://play.gumlet.io/embed/696918d6a829585863dd0552 415 2025-03-18T12:57:00.000Z yes no https://vueschool.io/lessons/configuring-tailwindcss-version-4 2025-03-17T12:45:00.000Z https://video.gumlet.io/696915b5a829585863dcb384/69691879a829585863dcfb84/thumbnail-1-0.png?v=1768496245319 Configuring TailwindCSS Version 4 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. You can override existing theme variables or extend the theme with variables of your own. These are more than just css custom properties (though they're available that way too!) because they generate different utility classes like bg-primary and text-primary. Links Tailwind Docs - CSS Theme Variables Tailwind Repo - Default Theme https://play.gumlet.io/embed/69691879a829585863dcfb84 354 2025-03-17T12:45:00.000Z yes no https://vueschool.io/lessons/store-selected-files-in-a-vue-js-variable-ref 2025-04-08T05:00:00.000Z https://video.gumlet.io/69bfd2744fe0bcfaae52c854/69c2ce034f62335fd4503316/thumbnail-1-0.png?v=1774374811183 Store Selected Files in a Vue.js Variable Ref 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://play.gumlet.io/embed/69c2ce034f62335fd4503316 180 2025-04-08T05:00:00.000Z yes no https://vueschool.io/lessons/capture-files-in-vue-js-with-input-fields 2025-04-08T05:00:00.000Z https://video.gumlet.io/69bfd2744fe0bcfaae52c854/69c2ce034f62335fd4503312/thumbnail-1-0.png?v=1774374855436 Capture Files in Vue.js With Input Fields 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 by the user. Each file exists as a special File object in a FileList. The multiple attribute allows selection of more than one file to add to the FileList. To get the most control over the style of the input, it’s best to hide the actual input and style a related label. Links MDN Docs - FileList MDN Docs - File https://play.gumlet.io/embed/69c2ce034f62335fd4503312 289 2025-04-08T05:00:00.000Z yes no https://vueschool.io/lessons/file-upload-components-in-ui-libraries 2025-04-01T05:00:00.000Z https://video.gumlet.io/69bfd2744fe0bcfaae52c854/69c2ce03531f7f7b6cec57d2/thumbnail-1-0.png?v=1774375123009 File Upload Components in UI Libraries 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 component and then send the files to your backend. If you have such a UI library at your disposable feel free to grab and go but if you’d like more info on how such file upload components work then stay tuned! Links ShadCN Vue Prime Vue Nuxt UI Vuetify Quasar Element Plus Flowbite Vue 3 https://play.gumlet.io/embed/69c2ce03531f7f7b6cec57d2 147 2025-04-01T05:00:00.000Z yes no https://vueschool.io/lessons/introduction-to-file-uploads-in-vue-js 2025-04-01T05:00:00.000Z https://video.gumlet.io/69bfd2744fe0bcfaae52c854/69c2ce03531f7f7b6cec57d8/thumbnail-1-0.png?v=1774375305572 Introduction to File Uploads in Vue.js 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 functionality, multiple file selection, instant previews, and robust error handling using the Vue 3 Composition API and TypeScript. In this lesson, we’ll introduce you to the component we’ll build and get you started with the boilerplate code for the project. Stay tuned for plenty of action packed lessons to come where we cover essential concepts including FormData handling, the File API, drag-and-drop events, and sending files to RESTful API endpoints. Links Course Boilerplate Code TODO: add link to Nuxt file uploads article once published https://play.gumlet.io/embed/69c2ce03531f7f7b6cec57d8 289 2025-04-01T05:00:00.000Z yes no https://vueschool.io/lessons/tailwind-version-4-container-queries 2025-03-10T14:59:00.000Z https://video.gumlet.io/696915b5a829585863dcb384/6969185fa829585863dcf8ca/thumbnail-1-0.png?v=1768495886693 Tailwind Version 4 Container Queries 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 Tailwind CSS container queries in a Vue project, all that's required is to designate an element as a container with @container and then use your project breakpoint variants with a @ prefix on child elements. That's it! Now you have an element that's responsive based on the size of it's ancestor container. Links Tailwind CSS Docs - Container Queries https://play.gumlet.io/embed/6969185fa829585863dcf8ca 207 2025-03-10T14:59:00.000Z yes no https://vueschool.io/lessons/install-tailwind-version-4-with-vue-and-nuxt 2025-03-10T14:28:00.000Z https://video.gumlet.io/696915b5a829585863dcb384/696917aba829585863dce4da/thumbnail-1-0.png?v=1768496720236 Install Tailwind Version-4 with Vue and Nuxt In this lesson, learn how to install Tailwind CSS version 4 (the latest and greatest! ?) with Vue.js and Nuxt. Links: Install for Vue (as Vite Plugin) Install For Nuxt (as Vite Plugin) https://play.gumlet.io/embed/696917aba829585863dce4da 121 2025-03-10T14:28:00.000Z yes no https://vueschool.io/lessons/onerrorcaptured-with-slots 2025-03-11T07:00:00.000Z https://video.gumlet.io/698b69c7aec3d4e420e70329/698b6afc873071aec5ee640d/thumbnail-1-0.png?v=1770744885921 onErrorCaptured with Slots In this lesson, learn about how onErrorCaptured also works to catch errors thrown within a component’s default slot (or any other slot). https://play.gumlet.io/embed/698b6afc873071aec5ee640d 127 2025-03-11T07:00:00.000Z yes no https://vueschool.io/lessons/what-can-onerrorcaptured-catch 2025-03-11T07:00:00.000Z https://video.gumlet.io/698b69c7aec3d4e420e70329/698b6afcfc23d3d76fccd997/thumbnail-1-0.png?v=1770747180228 What Can onErrorCaptured Catch? 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 captured. The result? onErrorCaptured can catch errors thrown synchronously and asynchronously from script setup, from event handlers, Vue lifecycle hooks like mounted, and more. Links Stackblitz Playground Example Vue.js Docs - Error Reference https://play.gumlet.io/embed/698b6afcfc23d3d76fccd997 286 2025-03-11T07:00:00.000Z yes no https://vueschool.io/lessons/catching-errors-at-the-vue-component-level 2025-03-11T07:00:00.000Z https://video.gumlet.io/698b69c7aec3d4e420e70329/698b6afcaec3d4e420e72f8f/thumbnail-1-0.png?v=1770745245531 Catching Errors at the Vue Component Level 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 storing the thrown error into some local state to display the error message to the page from within the component. Links Vue.js Docs - onErrorCaptured https://play.gumlet.io/embed/698b6afcaec3d4e420e72f8f 307 2025-03-11T07:00:00.000Z yes no https://vueschool.io/lessons/intro-to-error-handling-in-vue 2025-03-11T07:00:00.000Z https://video.gumlet.io/698b69c7aec3d4e420e70329/698b6afc873071aec5ee6408/thumbnail-1-0.png?v=1770747318887 Intro to Error Handling in Vue 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 Vue.js composable, and even at the app level. Learn how to display error messages inline on the page or in a dedicated floating alerts area (typically in the bottom right hand corner of the page). Finally, get a firm grasp on Vue specific tools available for handling errors like the onErrorCaptured lifecycle hook and app.config.errorHandler. Links JavaScript Error Handling (Recommended to Watch Before This Course) https://play.gumlet.io/embed/698b6afc873071aec5ee6408 302 2025-03-11T07:00:00.000Z yes no https://vueschool.io/lessons/dealing-with-javascript-fetch-errors 2025-03-04T07:00:00.000Z https://video.gumlet.io/696fb50a10171a0e16a762bb/696fb6066f4a3a8ce1245714/thumbnail-1-0.png?v=1770654528345 Dealing with JavaScript Fetch Errors 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 200 range, you’ll need to check the response.ok property and throw your own errors. Links MDN - Using the Fetch API https://play.gumlet.io/embed/696fb6066f4a3a8ce1245714 552 2025-03-04T07:00:00.000Z yes no https://vueschool.io/lessons/javascript-custom-error-classes-when-why-how 2025-02-25T07:00:00.000Z https://video.gumlet.io/696fb50a10171a0e16a762bb/696fb605bcef432370d92ecb/thumbnail-1-0.png?v=1768929411827 JavaScript Custom Error Classes: When, Why, How? In this lesson, learn how to create a custom JavaScript error type. It’s as simple as extending the base Error type like this: class PaymentError extends Error{ constructor(code, message){ super(message); this.name = "PaymentError" } } These custom error classes can then extended with more app specific functionality like introducing app specific error codes and related user friendly error messages. These custom error classes can also be detected with the instanceof keyword to handle different error types in different ways in catch blocks. https://play.gumlet.io/embed/696fb605bcef432370d92ecb 565 2025-02-25T07:00:00.000Z yes no https://vueschool.io/lessons/types-of-built-in-javascript-errors 2025-02-25T07:00:00.000Z https://video.gumlet.io/696fb50a10171a0e16a762bb/696fb6056f4a3a8ce12456f9/thumbnail-1-0.png?v=1768929558457 Types of Built-in JavaScript Errors 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 exists outside of the current scope. RangeErrors occur when a number is outside a valid range depending on the context. TypeErrors occur when a variable or parameter is not of a valid type (number, string, etc). SyntaxErrors occur typically because of typos in your code that result in invalid JS syntax. Links MDN - Error Types https://play.gumlet.io/embed/696fb6056f4a3a8ce12456f9 416 2025-02-25T07:00:00.000Z yes no https://vueschool.io/lessons/javascript-exceptions-errors-and-try-catch 2025-02-25T07:00:00.000Z https://video.gumlet.io/696fb50a10171a0e16a762bb/696fb6056f4a3a8ce12456fb/thumbnail-1-0.png?v=1770654275931 JavaScript Exceptions, Errors, and Try Catch 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 like: a stacktrace to help you find what caused the error, and an error message with more information. By default, thrown errors stop script execution dead in it’s tracks but try/catch blocks allow to “catch” thrown errors and handle them more gracefully. Links MDN - Error MDN - Try Catch https://play.gumlet.io/embed/696fb6056f4a3a8ce12456fb 213 2025-02-25T07:00:00.000Z yes no https://vueschool.io/lessons/intro-to-javascript-error-handling 2025-02-25T07:00:00.000Z https://video.gumlet.io/696fb50a10171a0e16a762bb/696fb605bcef432370d92ec9/thumbnail-1-0.png?v=1770654195137 Intro to JavaScript Error Handling 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: why error handling is important what we’ll cover during the course how to get setup to follow along Links VSCode Boilerplate Code https://play.gumlet.io/embed/696fb605bcef432370d92ec9 219 2025-02-25T07:00:00.000Z yes no https://vueschool.io/lessons/course-conclusion-8 2024-12-17T07:00:00.000Z https://video.gumlet.io/699f1869c051a86ff59c4c94/699f1974c051a86ff59c6f3a/thumbnail-1-0.png?v=1772037680558 Course Conclusion Thanks for watching! And good luck scraping the web ? Links Bright Data Web Data Master Class Bright Data Docs Vue School on X/Twitter Vue School on LinkedIn Vue School on Facebook Vue School on Bluesky team@vueschool.io https://play.gumlet.io/embed/699f1974c051a86ff59c6f3a 102 2024-12-17T07:00:00.000Z yes no https://vueschool.io/lessons/common-questions-and-answers-about-web-scraping 2024-12-17T07:00:00.000Z https://video.gumlet.io/699f1869c051a86ff59c4c94/699f1974c051a86ff59c6f33/thumbnail-1-0.png?v=1772037552638 Common Questions and Answers About Web Scraping In this lesson, we answer some common questions asked about web scraping including: How to scrape dynamic JavaScript content How to manage rate limits when scraping How to scrape data loaded by infinite scrolling How to scrape large datasets https://play.gumlet.io/embed/699f1974c051a86ff59c6f33 299 2024-12-17T07:00:00.000Z yes no https://vueschool.io/lessons/bright-data-web-scraper-api 2024-12-17T07:00:00.000Z https://video.gumlet.io/699f1869c051a86ff59c4c94/699f1974f8c697838354efdc/thumbnail-1-0.png?v=1772036897303 Bright Data Web Scraper API In this lesson, learn about Bright Data’s Web Scraper API. It’s a collection of API endpoints with data pre-scraped, managed, cleaned, and regularly updated from popular websites. We can use the Web Scraper API to get data from Amazon just like we did with the homemade scraper but with less time and effort. https://play.gumlet.io/embed/699f1974f8c697838354efdc 452 2024-12-17T07:00:00.000Z yes no https://vueschool.io/lessons/ai-and-web-scraping 2024-12-17T07:00:00.000Z https://video.gumlet.io/699f1869c051a86ff59c4c94/699f1974ba6c1c14db16be1a/thumbnail-1-0.png?v=1772035385479 AI and Web Scraping In this lesson, see an example of using claude.ai to help write a scraper with Playwright. https://play.gumlet.io/embed/699f1974ba6c1c14db16be1a 175 2024-12-17T07:00:00.000Z yes no https://vueschool.io/lessons/storing-and-managing-scraped-data 2024-12-17T07:00:00.000Z https://video.gumlet.io/699f1869c051a86ff59c4c94/699f1974ba6c1c14db16be1c/thumbnail-1-0.png?v=1772035129117 Storing and Managing Scraped Data 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. Links MongoDB Firebase Postgres Supabase Turso PlanetScale https://play.gumlet.io/embed/699f1974ba6c1c14db16be1c 359 2024-12-17T07:00:00.000Z yes no https://vueschool.io/lessons/how-to-scrape-paginated-data 2024-12-17T07:00:00.000Z https://video.gumlet.io/699f1869c051a86ff59c4c94/699f1974f8c697838354efd9/thumbnail-1-0.png?v=1772035950289 How to Scrape Paginated Data 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 results of one page, click a next page button, await the results of the next page, and rinse and repeat until all the results are scraped. https://play.gumlet.io/embed/699f1974f8c697838354efd9 494 2024-12-17T07:00:00.000Z yes no https://vueschool.io/lessons/efficient-data-extraction-techniques 2024-12-17T07:00:00.000Z https://video.gumlet.io/699f1869c051a86ff59c4c94/699f1974f8c697838354efd0/thumbnail-1-0.png?v=1772035366878 Efficient Data Extraction Techniques 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, writing less brittle query selectors, and extracting your scraper logic into functions for better reuse and legibility. https://play.gumlet.io/embed/699f1974f8c697838354efd0 276 2024-12-17T07:00:00.000Z yes no https://vueschool.io/lessons/navigating-a-site-and-scraping-data-with-playwright 2024-12-17T07:00:00.000Z https://video.gumlet.io/699f1869c051a86ff59c4c94/699f1973c051a86ff59c6f07/thumbnail-1-0.png?v=1772036554101 Navigating a Site and Scraping Data with Playwright 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. Links Playwright Docs - fill Playwright Docs - click https://play.gumlet.io/embed/699f1973c051a86ff59c6f07 419 2024-12-17T07:00:00.000Z yes no https://vueschool.io/lessons/write-your-web-scraper-locally-with-playwright 2024-12-17T07:00:00.000Z https://video.gumlet.io/699f1869c051a86ff59c4c94/699f1973f8c697838354efb5/thumbnail-1-0.png?v=1772034958629 Write Your Web Scraper Locally with Playwright In this video, learn how to use Playwright and Bright Data to scrape amazon.com and take a screenshot of the homepage. Getting started with a local scraper is easy to do since Bright Data provides copy/paste boilerplate code. Links Playwright npm-init https://play.gumlet.io/embed/699f1973f8c697838354efb5 325 2024-12-17T07:00:00.000Z yes no https://vueschool.io/lessons/getting-started-with-bright-data-for-web-scraping 2024-12-17T07:00:00.000Z https://video.gumlet.io/699f1869c051a86ff59c4c94/699f1973f8c697838354efb3/thumbnail-1-0.png?v=1772036120785 Getting Started with Bright Data for Web Scraping In this lesson, we create a Bright Data account and go through their hello world scraping example that extracts real hotel data from booking.com. In the process, we see the Scraping Browser in action and how to use puppeteer to navigate the site and target the data we’d like to scrape. Links Bright Data Booking.com Puppeteer https://play.gumlet.io/embed/699f1973f8c697838354efb3 627 2024-12-17T07:00:00.000Z yes no https://vueschool.io/lessons/intro-to-web-scraping 2024-12-17T07:00:00.000Z https://video.gumlet.io/699f1869c051a86ff59c4c94/699f1973c051a86ff59c6f05/thumbnail-1-0.png?v=1772034775538 Intro to Web Scraping 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 and with Bright Data. In this lesson, we introduce you the what web scraping is, some common use cases for it, and talk about some of the common challenges you’ll encounter. Throughout the rest of the course we will equip you to overcome those challenges so that you can effectively scrape the data you need from any corner of the web. Links Bright Data What is Web Scraping? https://play.gumlet.io/embed/699f1973c051a86ff59c6f05 166 2024-12-17T07:00:00.000Z yes no https://vueschool.io/lessons/measuring-performance-with-the-vue-devtools 2025-02-11T07:00:00.000Z https://video.gumlet.io/6960c208525cbb3556237c3f/6960c628525cbb355623f063/thumbnail-1-0.png?v=1767950924239 Measuring Performance with the Vue Devtools 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 between routes with the routes timeline. Links Vue Devtools https://play.gumlet.io/embed/6960c628525cbb355623f063 218 2025-02-11T07:00:00.000Z yes no https://vueschool.io/lessons/how-to-use-page-speed-insights-to-measure-vue-app-performance 2025-02-11T07:00:00.000Z https://video.gumlet.io/6960c208525cbb3556237c3f/6960c627195f98d9e15fce38/thumbnail-1-0.png?v=1767951167513 How to Use Page Speed Insights to Measure Vue App Performance 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 metrics for real users. Links Chrome Lighthouse Docs Page Speed Insights UnLighthouse https://play.gumlet.io/embed/6960c627195f98d9e15fce38 372 2025-02-11T07:00:00.000Z yes no https://vueschool.io/lessons/debouncing-and-throttling-techniques-for-vue-js 2025-02-04T07:00:00.000Z https://video.gumlet.io/6960c208525cbb3556237c3f/6960c576525cbb355623dab1/thumbnail-1-0.png?v=1767950898559 Debouncing and Throttling Techniques for Vue.js In this lesson, learn the difference between debouncing and throttling. Also look at a practical example where using the watchDebounced or the refDebounced functions from VueUse can be useful to make a search input snappy yet performant. Links Regular Events vs Debounce Vs Throttle Demo https://play.gumlet.io/embed/6960c576525cbb355623dab1 432 2025-02-04T07:00:00.000Z yes no https://vueschool.io/lessons/how-the-right-architecture-for-your-use-case-impacts-performance 2025-01-07T07:00:00.000Z https://video.gumlet.io/6960c208525cbb3556237c3f/6960c2a5195f98d9e15f6841/thumbnail-1-0.png?v=1767949624547 How the Right Architecture For Your Use Case Impacts Performance 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-Side Rendering (SSR), helping you make informed decisions that impact performance. Vanilla Vue is great for SPA’s. Nuxt and Astro are great for SSG. But why limit yourself to any one approach when you go do all 3 in a single app with Nuxt? Links Hyrid Rendering (Route Rules) Video Nuxt Docs - Hybrid Rendering Nuxt Rendering Modes and Hybrid Rendering Vue SSR Guide Content Sites with Astro and Vue.js (Complete Astro Course) Astro Docs https://play.gumlet.io/embed/6960c2a5195f98d9e15f6841 588 2025-01-07T07:00:00.000Z yes no https://vueschool.io/lessons/how-to-prefetch-lazily-loaded-vue-components 2024-12-23T07:00:00.000Z https://video.gumlet.io/6960c208525cbb3556237c3f/6960c2a6ac93fe08565ddd56/thumbnail-1-0.png?v=1767950484706 How to Prefetch Lazily Loaded Vue Components In this lesson, learn advanced performance optimization techniques to enhance user experience by implementing smart component prefetching. Discover how to leverage event-driven preloading, including mouseover detection, to anticipate user interactions and load component chunks before they're needed. This tutorial covers Vue lazy loading of page components and other components as well as Nuxt route prefetching. You'll learn how to reduce perceived loading times and optimize bundle loading. Perfect for Vue developers looking to build lightning-fast, production-ready applications with optimized client-side performance. Links Vue.js Docs - Async Components Nuxt Docs - NuxtLink Props console time Nuxt preloadComponents Nuxt Global Components Nuxt Navigation (Preload of Pages) https://play.gumlet.io/embed/6960c2a6ac93fe08565ddd56 628 2024-12-23T07:00:00.000Z yes no https://vueschool.io/lessons/how-code-splitting-makes-vue-apps-faster 2024-12-23T07:00:00.000Z https://video.gumlet.io/6960c208525cbb3556237c3f/6960c2a6ac93fe08565ddd58/thumbnail-1-0.png?v=1767950481247 How Code Splitting Makes Vue Apps Faster 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 lazy loading. It is a simple yet extremely effective way of boosting performance in a Vue or Nuxt application. Code splitting at the page level is a no-brainer and can be done easily with Vue router in a Vanilla Vue.js project. Routes are automatically code split in a Nuxt app. Code splitting components is an approach to further break up code within a single page. Dynamically loading a code split component only when it’s shown (such as for a modal overlay component) saves precious milliseconds on initial page load since the code isn’t needed immediately needed. Code splitting components in Vue can be done with defineAsyncComponent and in Nuxt with the Lazy component prefix. Links Vue.js Docs - Async Comonents Nuxt Docs - Components - Dynamic Import Lazy Load Components in Vue with defineAsyncComponent The Lazy component prefix and when to use it - Nuxt Performance in Depth https://play.gumlet.io/embed/6960c2a6ac93fe08565ddd58 486 2024-12-23T07:00:00.000Z yes no https://vueschool.io/lessons/tree-shaking-for-performant-vue-apps 2024-12-23T07:00:00.000Z https://video.gumlet.io/6960c208525cbb3556237c3f/6960c2a5525cbb35562389fc/thumbnail-1-0.png?v=1767949796176 Tree Shaking for Performant Vue Apps 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-shakeable APIs. Links Lodash Lodash-es Nuxt Lodash Module VueUse Vue.js Docs - Bundle Size and Tree-shaking Bundlejs.com https://play.gumlet.io/embed/6960c2a5525cbb35562389fc 509 2024-12-23T07:00:00.000Z yes no https://vueschool.io/lessons/introduction-to-web-performance 2024-12-23T07:00:00.000Z https://video.gumlet.io/6960c208525cbb3556237c3f/6960c2a5195f98d9e15f6844/thumbnail-1-0.png?v=1767949471822 Introduction to Web Performance 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 some key concepts you'll master throughout the course. Get ready for a deep dive into all things performance-related in Vue.js! Links 13 Website Page Load Time Statistics (2024 Data) https://play.gumlet.io/embed/6960c2a5195f98d9e15f6844 271 2024-12-23T07:00:00.000Z yes no https://vueschool.io/lessons/course-conclusion-6 2024-12-24T07:00:00.000Z https://video.gumlet.io/699f2a0dc051a86ff59ec989/699f2bf8f8c6978383578884/thumbnail-1-0.png?v=1772126051771 Course Conclusion 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. Pattern Review Throughout this course, we've explored several fundamental patterns that form the backbone of well-structured Vue applications: Branching Component Pattern: We learned how extracting conditional logic into separate components can dramatically improve readability and maintainability. Slots and Template Props: You now understand how to create flexible, reusable components that can adapt to different contexts while maintaining a clean interface. List with ListItem Pattern: We covered how to organize list-based components for better separation of concerns and reusability. Smart vs Dumb Components: You learned the power of separating your components by responsibility, making them easier to test and maintain. Form Component Pattern: We explored how to handle forms more elegantly using v-model at the form level. Advanced Patterns: We rounded things out with a look at some more sophisticated patterns like recursive components, lazy loading, and provide/inject. Real-World Application These patterns aren't just theoretical concepts - they're practical solutions to real problems you'll encounter in your Vue projects. By applying them thoughtfully, you can: Write components that are easier to understand and maintain Create more predictable codebases that your team can navigate confidently Build applications that can scale without becoming unwieldy Save time by avoiding common pitfalls and anti-patterns Going Further If you're interested in diving deeper into component design, I highly recommend checking out Michael Thiessen's Clean Component toolkit. It builds on many of the patterns we've covered here and introduces additional advanced concepts. I’ve left a link to it in the description below. Remember, the patterns we've covered are guidelines rather than strict rules. As you gain experience, you'll develop an intuition for wh https://play.gumlet.io/embed/699f2bf8f8c6978383578884 180 2024-12-24T07:00:00.000Z yes no https://vueschool.io/lessons/form-component-pattern 2024-12-17T07:00:00.000Z https://video.gumlet.io/699f2a0dc051a86ff59ec989/699f2bf8ba6c1c14db195efd/thumbnail-1-0.png?v=1772040003625 Form Component Pattern 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 advantage of native HTML input validation and keeps data within the component local until it’s committed with the submit button. Links Vue Docs - Watchers Vue Docs - defineModel https://play.gumlet.io/embed/699f2bf8ba6c1c14db195efd 621 2024-12-17T07:00:00.000Z yes no https://vueschool.io/lessons/branching-component-pattern 2024-12-10T07:00:00.000Z https://video.gumlet.io/699f2a0dc051a86ff59ec989/699f2bf8ba6c1c14db195eff/thumbnail-1-0.png?v=1772039705311 Branching Component Pattern 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 simple prompt to break down one component into more than 1. Links The Extract Conditional Pattern in Vue - Michael Thiessen https://play.gumlet.io/embed/699f2bf8ba6c1c14db195eff 288 2024-12-10T07:00:00.000Z yes no https://vueschool.io/lessons/introduction-to-vue-component-design 2024-12-10T07:00:00.000Z https://video.gumlet.io/699f2a0dc051a86ff59ec989/699f2bf8c051a86ff59f0fb9/thumbnail-1-0.png?v=1772125596591 Introduction to Vue Component Design In this course, we’ll dive into 5+ component patterns to help take your Vue applications to the next level including: The Branching Component Pattern The Slots and Template Props Pattern The List with ListItem Pattern The Smart Vs Dumb Component Pattern and the Form Component Pattern Patterns are useful for maintaining a scalable codebase and learning from the collective wisdom of the Vue community. Links Nuxt Course Repo https://play.gumlet.io/embed/699f2bf8c051a86ff59f0fb9 285 2024-12-10T07:00:00.000Z yes no https://vueschool.io/lessons/bonus-lesson-github-copilot-for-vue-developers 2024-12-04T12:16:00.000Z https://video.gumlet.io/6967a988b25141dfa4d05172/69ab7bd106a15537d0556bf9/thumbnail-1-0.png?v=1772847463837 Bonus Lesson! Github Copilot for Vue Developers In this lesson, we experiment with Github Copilot to see how useful it can be with Vue apps. NOTE: Github Copilot is a PAID VS Code extension. Links Github Copilot https://play.gumlet.io/embed/69ab7bd106a15537d0556bf9 701 2024-12-04T12:16:00.000Z yes no https://vueschool.io/lessons/generating-basic-data 2024-12-03T06:26:00.000Z https://video.gumlet.io/699499b74f875354df27d5da/69949a2672fd6b061941498c/thumbnail-1-0.png?v=1771347100066 Generating Basic Data 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 prices. You'll learn how to utilize Faker.js to create dynamic test data, replacing those hardcoded values with rich, diverse, and more representative fake values that make your tests more resilient. Links Faker.js documentation Github Repo Github Repo at tag for episode 2 Git Diff for this lesson https://play.gumlet.io/embed/69949a2672fd6b061941498c 516 2024-12-03T06:26:00.000Z yes no https://vueschool.io/lessons/discovering-fakerjs 2024-12-03T06:23:00.000Z https://video.gumlet.io/699499b74f875354df27d5da/69949a2669352d156687bebf/thumbnail-1-0.png?v=1771348467882 Discovering FakerJS 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 for real-world complexities you might not anticipate, like names with special characters (e.g., O'Connor) or locale-specific details such as regional address formats. We'll highlight practical use cases—such as testing, database seeding, and data obfuscation—and finish with a quick installation walkthrough to get you started with Faker.js. Links Faker.js documentation Github Repo Github Repo at tag for episode 1 Git Diff for this lesson https://play.gumlet.io/embed/69949a2669352d156687bebf 330 2024-12-03T06:23:00.000Z yes no https://vueschool.io/lessons/what-s-landing-after-nuxt-4-major-delayed-hydration 2024-11-19T06:44:00.000Z https://video.gumlet.io/6978ea9d11ec7dfcb9778543/6978eb292b8b17fbb73d274c/thumbnail-1-0.png?v=1769701890677 What’s Landing After Nuxt 4 Major - Delayed Hydration 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 the browser is idle, on custom user events, and more! Links Github PR - feat:delayed hydration https://play.gumlet.io/embed/6978eb292b8b17fbb73d274c 153 2024-11-19T06:44:00.000Z yes no https://vueschool.io/lessons/overview-of-other-breaking-changes-in-nuxt-4 2024-11-19T06:39:00.000Z https://video.gumlet.io/6978ea9d11ec7dfcb9778543/6978eb292b8b17fbb73d274e/thumbnail-1-0.png?v=1769701654467 Overview of Other Breaking Changes in Nuxt 4 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.NUXT object, Directory index scanning, and Deduplication of Route Metadata. Links Nuxt Upgrade Guide - Removal of Experimental Features Nuxt Upgrade Guide - Removal of window.NUXT object Nuxt Upgrade Guide - Directory index scanning NUXT Upgrade Guide - Deduplication of Route Metadata https://play.gumlet.io/embed/6978eb292b8b17fbb73d274e 197 2024-11-19T06:39:00.000Z yes no https://vueschool.io/lessons/nuxt-4-directory-structure-the-most-significant-change 2024-11-19T06:33:00.000Z https://video.gumlet.io/6978ea9d11ec7dfcb9778543/6978eb2911ec7dfcb97796a9/thumbnail-1-0.png?v=1769701067020 Nuxt 4 Directory Structure - The Most Significant Change 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 app environment vs code that runs in the server environment. This is good for performance when booting up the dev server and is good for TypeSafety in your IDE. Links Nuxt Upgrade Guide > New Directory Structure https://play.gumlet.io/embed/6978eb2911ec7dfcb97796a9 157 2024-11-19T06:33:00.000Z yes no https://vueschool.io/lessons/intro-to-nuxt-4 2024-11-19T06:30:00.000Z https://video.gumlet.io/6978ea9d11ec7dfcb9778543/6978eb29c2fb61ce1930a2ce/thumbnail-1-0.png?v=1769700934903 Intro to Nuxt 4 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. Links Nuxt Upgrade Guide Dejavue Podcast - The Road to Nuxt 4 Nuxt Version 4 Branch on Github https://play.gumlet.io/embed/6978eb29c2fb61ce1930a2ce 138 2024-11-19T06:30:00.000Z yes no https://vueschool.io/lessons/implement-stale-while-revalidate-with-pinia-and-usememoize 2024-10-29T06:36:00.000Z https://video.gumlet.io/68b5da39373a93b510356a10/68b5f5ce6a218061ab24c4f9/thumbnail-1-0.png?v=1757341217024 Implement Stale While Revalidate with Pinia and useMemoize 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 way, users get fast, cached data on return visits, and if anything changes, the cache clears to ensure they see the latest updates Links Web Dot Dev - Keeping things fresh with stale-while-revalidate https://play.gumlet.io/embed/68b5f5ce6a218061ab24c4f9 367 2024-10-29T06:36:00.000Z yes no https://vueschool.io/lessons/a-brief-overview-of-other-nuxt-usefetch-configuration-options 2024-11-05T06:58:00.000Z https://video.gumlet.io/697106bc10171a0e16cbc498/697109ce10171a0e16cc1f46/thumbnail-1-0.png?v=1769016235452 A Brief Overview of Other Nuxt useFetch Configuration Options In this lesson, we quickly go over the rest of the useFetch options available that we have not covered in the course so far. server:false - makes the request ONLY on the client side (even on page load) immediate: false - keeps useFetch from immediately making the request, meaning you’ll have to call execute yourself default - sets the default value of the data for when the actual response data isn’t available dedupe - allows you to configure how to handle overlapping or duplicated requests All of these options are available for useFetch and useAsyncData. useFetch has a few more that are essentially passed on to the underlying $fetch function (like method, baseURL, and headers. Links Nuxt Docs - useFetch https://play.gumlet.io/embed/697109ce10171a0e16cc1f46 422 2024-11-05T06:58:00.000Z yes no https://vueschool.io/lessons/how-to-minimize-the-payload-size-with-nuxt-usefetch 2024-11-05T06:55:00.000Z https://video.gumlet.io/697106bc10171a0e16cbc498/697108f410171a0e16cc042a/thumbnail-1-0.png?v=1769016170767 How to Minimize the Payload Size with Nuxt useFetch In this lesson, learn how to use pick and transform to make your payloads as small as possible with Nuxt’s useFetch composable. Links Nuxt Docs - Minimize Payload Size https://play.gumlet.io/embed/697108f410171a0e16cc042a 356 2024-11-05T06:55:00.000Z yes no https://vueschool.io/lessons/how-to-cache-data-with-the-key-option-for-useasyncdata-and-usefetch 2024-11-05T06:48:00.000Z https://video.gumlet.io/697106bc10171a0e16cbc498/697108f410171a0e16cc0430/thumbnail-1-0.png?v=1769016100837 How to Cache Data with the Key Option for useAsyncData and useFetch 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 while fresh data is being fetched. Links Nuxt Docs - useAsyncData params Nuxt Docs - useFetch params Nuxt Docs - Data Fetching - Caching and Refetching https://play.gumlet.io/embed/697108f410171a0e16cc0430 419 2024-11-05T06:48:00.000Z yes no https://vueschool.io/lessons/making-parallel-requests-in-nuxt 2024-10-29T07:00:00.000Z https://video.gumlet.io/697106bc10171a0e16cbc498/697108f4bcef432370fdb9c6/thumbnail-1-0.png?v=1769015924715 Making Parallel Requests in Nuxt 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://play.gumlet.io/embed/697108f4bcef432370fdb9c6 282 2024-10-29T07:00:00.000Z yes no https://vueschool.io/lessons/error-handling-with-usefetch 2024-10-29T06:56:00.000Z https://video.gumlet.io/697106bc10171a0e16cbc498/697108f46f4a3a8ce14914e1/thumbnail-1-0.png?v=1769016014845 Error Handling with useFetch 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 even after initial page load, as requests can be sent again at various times throughout the life of the page. Links Nuxt Docs - Error Handling https://play.gumlet.io/embed/697108f46f4a3a8ce14914e1 352 2024-10-29T06:56:00.000Z yes no https://vueschool.io/lessons/to-await-or-not-await-usefetch-blocking-vs-non-blocking 2024-10-22T10:46:00.000Z https://video.gumlet.io/697106bc10171a0e16cbc498/697108f46f4a3a8ce14914df/thumbnail-1-0.png?v=1770912942220 To Await or Not Await useFetch (Blocking vs Non-Blocking) 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 navigation unless you explicitly provide the lazy option or use the lazy version of the composable. If you omit the await you’ll be non-blocking navigation without the lazy option. Links Nuxt Docs - Lazy Data Fetching Nuxt Docs - useLazyAsyncData Nuxt Docs - useLazyFetch Daniel Roe Await Tweet https://play.gumlet.io/embed/697108f46f4a3a8ce14914df 326 2024-10-22T10:46:00.000Z yes no https://vueschool.io/lessons/usefetch-vs-useasyncdata-vs-fetch 2024-10-22T10:43:00.000Z https://video.gumlet.io/697106bc10171a0e16cbc498/697108f410171a0e16cc03f9/thumbnail-1-0.png?v=1769016123844 useFetch vs useAsyncData vs $fetch 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 data to display on page load. useAsyncData and useFetch de-duplicate requests by forwarding the data fetched on the server to the client so that the client doesn’t have to make the request again. Finally, useAsyncData is great for working with 3rd party JavaScript clients or SDKs. Links Supabase JS Client Google Firebase Github Octokit JS Client useAsyncData vs useFetch YouTube Video https://play.gumlet.io/embed/697108f410171a0e16cc03f9 625 2024-10-22T10:43:00.000Z yes no https://vueschool.io/lessons/intro-to-data-fetching-in-nuxt 2024-10-22T10:42:00.000Z https://video.gumlet.io/697106bc10171a0e16cbc498/697108f4bcef432370fdb9c3/thumbnail-1-0.png?v=1770912786021 Intro to Data Fetching in Nuxt Hello! ? Welcome to the course! In this video, we intro what data fetching is and why it’s important for modern web applications. We also get a glimpse at the tool Nuxt provides us with to do data fetch: useAsyncData , useFetch and $fetch. We close by putting useFetch into action to fetch some data from a Pokemon API. Links Nuxt Docs - Data Fetching https://play.gumlet.io/embed/697108f4bcef432370fdb9c3 290 2024-10-22T10:42:00.000Z yes no https://vueschool.io/lessons/typescript-mapping-and-generics 2024-10-15T05:35:00.000Z https://video.gumlet.io/68b5da39373a93b510356a10/68b5f529373a93b5103703ce/thumbnail-1-0.png?v=1757340732032 TypeScript Mapping and Generics 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 of a form like LoginForm, maintaining type safety and ensuring accurate error handling for real-time validation across different forms. Links TypeScript - Mapped Types TypeScript - Keyof Type Operator TypeScript - Generics https://play.gumlet.io/embed/68b5f529373a93b5103703ce 332 2024-10-15T05:35:00.000Z yes no https://vueschool.io/lessons/conclusion-3 2025-02-18T07:00:00.000Z https://video.gumlet.io/69bfd223913220ae3bb509b5/69c2df609ae74a342899a601/thumbnail-1-0.png?v=1774379261739 Conclusion 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 with the links below so you don’t miss any awesome updates or useful news. Links TinyMCE's YouTube channel The TinyMCE blog TinyMCE X/Twitter https://play.gumlet.io/embed/69c2df609ae74a342899a601 114 2025-02-18T07:00:00.000Z yes no https://vueschool.io/lessons/pro-tinymce-features-perfectly-fit-for-a-cms 2025-02-18T07:00:00.000Z https://video.gumlet.io/69bfd223913220ae3bb509b5/69c2de364f62335fd451cc7b/thumbnail-1-0.png?v=1774379691338 Pro TinyMCE Features Perfectly Fit for a CMS In this lesson, learn to support collaborative content creation with TinyMCE's powerful commenting system and accessibility checker. Learn to implement user-specific commenting, manage comment permissions, and ensure content accessibility through automated checking - transforming your CMS into a fully collaborative platform that delivers accessible content to all users. Links TinyMCE Docs - Comments Plugin TinyMCE Docs - Configuring the Comments Plugin in Embedded Mode TinyMCE Docs - Accessibility Checker Plugin https://play.gumlet.io/embed/69c2de364f62335fd451cc7b 518 2025-02-18T07:00:00.000Z yes no https://vueschool.io/lessons/enable-advanced-code-editing-with-tinymce 2025-02-18T07:00:00.000Z https://video.gumlet.io/69bfd223913220ae3bb509b5/69c2de36531f7f7b6cedf356/thumbnail-1-0.png?v=1774378959271 Enable Advanced Code Editing with TinyMCE In this lesson, enhance your TinyMCE powered CMS with advanced code editing capabilities using the powerful advcode plugin. Learn to implement syntax highlighting, inline code editing, and professional HTML manipulation tools to give content creators precise control over their page structure while maintaining a seamless editing experience. Links TinyMCE Docs - Enhanced Code Editor Plugin https://play.gumlet.io/embed/69c2de36531f7f7b6cedf356 136 2025-02-18T07:00:00.000Z yes no https://vueschool.io/lessons/prevent-loosing-unsaved-changes-with-the-autosave-plugin 2025-02-18T07:00:00.000Z https://video.gumlet.io/69bfd223913220ae3bb509b5/69c2ddc89ae74a3428997ed3/thumbnail-1-0.png?v=1774378983141 Prevent Loosing Unsaved Changes with the AutoSave Plugin In this lesson, learn how to protect content creators from data loss with TinyMCE's powerful autosave plugin. Learn to implement automatic content backup, configure localStorage persistence, and enable draft restoration features to ensure a seamless and secure content editing experience in your CMS implementation. Links TinyMCE Docs - Autosave Plugin TinyMCE Docs - Save Plugin https://play.gumlet.io/embed/69c2ddc89ae74a3428997ed3 235 2025-02-18T07:00:00.000Z yes no https://vueschool.io/lessons/create-in-page-anchors-with-tinymce 2025-02-18T07:00:00.000Z https://video.gumlet.io/69bfd223913220ae3bb509b5/69c2d947531f7f7b6ced700e/thumbnail-1-0.png?v=1774378699382 Create In-Page Anchors with TinyMCE In this lesson, master in-page navigation with TinyMCE's anchor plugin to create user-friendly, shareable content sections. Learn how to implement anchor links for seamless page navigation, enhance content accessibility, and improve user experience by enabling direct links to specific content sections within your web pages. Links TinyMCE Docs - Anchor Plugin https://play.gumlet.io/embed/69c2d947531f7f7b6ced700e 115 2025-02-18T07:00:00.000Z yes no https://vueschool.io/lessons/create-custom-style-formats-to-support-buttons-headings-and-more 2025-02-11T07:00:00.000Z https://video.gumlet.io/69bfd223913220ae3bb509b5/69c2d9474f62335fd4514905/thumbnail-1-0.png?v=1774378898798 Create Custom Style Formats to Support Buttons, Headings, And More 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, create custom formats like buttons and headings, and implement a user-friendly formatting system that maintains design consistency while empowering content editors. Links TinyMCE Docs - Changing user formatting controls https://play.gumlet.io/embed/69c2d9474f62335fd4514905 306 2025-02-11T07:00:00.000Z yes no https://vueschool.io/lessons/pro-tinymce-features-perfectly-fit-for-a-crm 2025-02-11T07:00:00.000Z https://video.gumlet.io/69bfd223913220ae3bb509b5/69c2d9474f62335fd4514901/thumbnail-1-0.png?v=1774378505164 Pro TinyMCE Features Perfectly Fit for a CRM 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. Links TinyMCE Docs - AI Assistant Plugin TinyMCE AI Assistant AI Proxy Server Reference Guide TinyMCE Docs - Import From Word Plugin https://play.gumlet.io/embed/69c2d9474f62335fd4514901 236 2025-02-11T07:00:00.000Z yes no https://vueschool.io/lessons/enhance-the-crm-challenge 2025-02-11T07:00:00.000Z https://video.gumlet.io/69bfd223913220ae3bb509b5/69c2d9474f62335fd4514903/thumbnail-1-0.png?v=1774378539095 Enhance the CRM Challenge In this lesson, challenge yourself to practice adding merge tag and link list functionality to the TinyMCE powered CRM messenger. Links TinyMCE Docs - Merge Tags Plugin TinyMCE Docs - Link Lists https://play.gumlet.io/embed/69c2d9474f62335fd4514903 81 2025-02-11T07:00:00.000Z yes no https://vueschool.io/lessons/auto-resize-the-tinymce-editor-height-based-on-content 2025-02-11T07:00:00.000Z https://video.gumlet.io/69bfd223913220ae3bb509b5/69c2d947531f7f7b6ced6ff3/thumbnail-1-0.png?v=1774377813632 Auto Resize the TinyMCE Editor Height Based on Content 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. Links TinyMCE Docs - Autoresize plugin https://play.gumlet.io/embed/69c2d947531f7f7b6ced6ff3 124 2025-02-11T07:00:00.000Z yes no https://vueschool.io/lessons/format-the-tinymce-editor-toolbars 2025-02-04T07:00:00.000Z https://video.gumlet.io/69bfd223913220ae3bb509b5/69c2d9474f62335fd45148e7/thumbnail-1-0.png?v=1774378186417 Format the TinyMCE Editor Toolbars In this lesson, learn how to customize the TinyMCE editor’s appearance by hiding and positioning the various editor menus and bars. Links TinyMCE Docs - Configuration Options TinyMCE Docs - Create a Custom Icon Pack TinyMCE Docs - Alternate Skins and Icons https://play.gumlet.io/embed/69c2d9474f62335fd45148e7 289 2025-02-04T07:00:00.000Z yes no https://vueschool.io/lessons/pro-tinymce-features-perfectly-fit-for-email 2025-02-04T07:00:00.000Z https://video.gumlet.io/69bfd223913220ae3bb509b5/69c2d9479ae74a3428990559/thumbnail-1-0.png?v=1774378546146 Pro TinyMCE Features Perfectly Fit for Email Master email template styling with TinyMCE's inline CSS plugin. In this lesson, learn how to transform clean, editable templates into email-client-friendly HTML with automatically inlined CSS. Learn to implement the plugin, retrieve inlined content, and manage both editable and send-ready versions of your email templates for optimal workflow and compatibility all within the context of your Vue.js app! Links TinyMCE Inline CSS Plugin https://play.gumlet.io/embed/69c2d9479ae74a3428990559 346 2025-02-04T07:00:00.000Z yes no https://vueschool.io/lessons/add-common-links-with-link-lists 2025-02-04T07:00:00.000Z https://video.gumlet.io/69bfd223913220ae3bb509b5/69c2d9479ae74a3428990569/thumbnail-1-0.png?v=1774378376336 Add Common Links with Link Lists 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! Links TinyMCE Links Plugin https://play.gumlet.io/embed/69c2d9479ae74a3428990569 79 2025-02-04T07:00:00.000Z yes no https://vueschool.io/lessons/placeholders-in-tinymce-via-merge-tags 2025-02-04T07:00:00.000Z https://video.gumlet.io/69bfd223913220ae3bb509b5/69c2d947531f7f7b6ced6ff0/thumbnail-1-0.png?v=1774377908228 Placeholders in TinyMCE via Merge Tags 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 merge tags, and integrating them seamlessly into your email content for enhanced user engagement and conversion rates. With the power of Vue.js and TinyMCE you can add this industry-standard feature in seconds. Links TinyMCE Merge Tags Plugin https://play.gumlet.io/embed/69c2d947531f7f7b6ced6ff0 189 2025-02-04T07:00:00.000Z yes no https://vueschool.io/lessons/setting-up-tinymce-for-email-editing-with-multi-root-editing 2025-01-28T07:00:00.000Z https://video.gumlet.io/69bfd223913220ae3bb509b5/69c2d9479ae74a3428990557/thumbnail-1-0.png?v=1774378527266 Setting Up TinyMCE for Email Editing with Multi-Root Editing 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 content management, and optimizing the editor for newsletter creation. You'll discover how to load HTML email templates, apply custom styles, and configure TinyMCE options for an enhanced user experience. Perfect for developers looking to build robust email editing tools in their Vue applications. Links Boilerplate Code (note all boilerplate code is in this branch called “boilerplate” from the course repo) https://play.gumlet.io/embed/69c2d9479ae74a3428990557 434 2025-01-28T07:00:00.000Z yes no https://vueschool.io/lessons/customize-the-editor 2025-01-28T07:00:00.000Z https://video.gumlet.io/69bfd223913220ae3bb509b5/69c2dfd69ae74a342899b303/thumbnail-1-0.png?v=1774379724453 Customize the Editor In this lesson, let’s examine a couple basic customization options for configuring TinyMCE via plugins and the toolbar. Links Plugins For TinyMCE Toolbar Buttons https://play.gumlet.io/embed/69c2dfd69ae74a342899b303 358 2025-01-28T07:00:00.000Z yes no https://vueschool.io/lessons/install-tinymce-with-vue 2025-01-28T07:00:00.000Z https://video.gumlet.io/69bfd223913220ae3bb509b5/69c2dfd64f62335fd451f786/thumbnail-1-0.png?v=1774379486758 Install TinyMCE with Vue 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 editor. It even works with v-model just like you’d expect. npm install "@tinymce/tinymce-vue" Links Register for a FREE TinyMCE Account Getting Started Guide - Vue https://play.gumlet.io/embed/69c2dfd64f62335fd451f786 301 2025-01-28T07:00:00.000Z yes no https://vueschool.io/lessons/introduction-to-tinymce 2025-01-28T07:00:00.000Z https://video.gumlet.io/69bfd223913220ae3bb509b5/69c2d9474f62335fd45148ea/thumbnail-1-0.png?v=1774378136834 Introduction to TinyMCE 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 content editing experiences in a variety of application types. TinyMCE can be used to implement anything from the rich text comments on your blog to enterprise-level systems like email editors, learning management systems (LMS), customer relationship management (CRM) Systems, content management systems (CMS), and more! Best of all it’s easy to setup and just as easy to customize to the needs of your use case. Links TinyMCE Website https://play.gumlet.io/embed/69c2d9474f62335fd45148ea 175 2025-01-28T07:00:00.000Z yes no https://vueschool.io/lessons/tailwind-css 2024-09-03T11:57:00.000Z https://video.gumlet.io/69725ff6deef8702a8ccfe1c/69726bb8deef8702a8ce5f6c/thumbnail-1-0.png?v=1769107735967 Tailwind CSS 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! Links Tailwind Docs - Install Tailwind CSS with Vite https://play.gumlet.io/embed/69726bb8deef8702a8ce5f6c 231 2024-09-03T11:57:00.000Z yes no https://vueschool.io/lessons/use-vue-js-suspense-component-to-handle-async-dependencies 2024-08-06T05:48:00.000Z https://video.gumlet.io/68b5da39373a93b510356a10/68b5ecba6a218061ab243cbb/thumbnail-1-0.png?v=1757083849332 Use Vue.js Suspense Component to Handle Async Dependencies 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, ensuring our components render smoothly once all data is resolved. Along the way, we'll also use the defineComponent helper function to demonstrate how Suspense works. Links Vue.js Docs - defineComponent Function Vue.js Docs - Suspense https://play.gumlet.io/embed/68b5ecba6a218061ab243cbb 384 2024-08-06T05:48:00.000Z yes no https://vueschool.io/lessons/qlist 2024-08-20T06:56:00.000Z https://video.gumlet.io/69725ff6deef8702a8ccfe1c/69726aa0deef8702a8ce3e4e/thumbnail-1-0.png?v=1769107474528 QList 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, QItemSection and QItemLabel to help us better organize and display our list. We’ll also touch on some other components like QAvatar, QChip and QIcon! Links Quasar Docs - List and List Items Quasar Docs - QChip Vue Router Docs - Exact Active Links https://play.gumlet.io/embed/69726aa0deef8702a8ce3e4e 833 2024-08-20T06:56:00.000Z yes no https://vueschool.io/lessons/icons 2024-08-20T06:50:00.000Z https://video.gumlet.io/69725ff6deef8702a8ccfe1c/697269b57489edf93490cb4e/thumbnail-1-0.png?v=1769106919538 Icons 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’ll show you a tool from the Quasar core team, that makes it easy to search through Quasar’s icon libraries. Links Quasar Docs - Icons Icon Explorer https://play.gumlet.io/embed/697269b57489edf93490cb4e 701 2024-08-20T06:50:00.000Z yes no https://vueschool.io/lessons/qbtn 2024-08-06T08:04:00.000Z https://video.gumlet.io/69725ff6deef8702a8ccfe1c/6972682c7489edf934909d97/thumbnail-1-0.png?v=1769106374827 QBtn 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 looking badge to our button! Links Quasar Docs - Color Palette https://play.gumlet.io/embed/6972682c7489edf934909d97 287 2024-08-06T08:04:00.000Z yes no https://vueschool.io/lessons/setting-up-your-editor 2024-08-06T08:02:00.000Z https://video.gumlet.io/69725ff6deef8702a8ccfe1c/6972682cfa888578c94efac3/thumbnail-1-0.png?v=1769106004280 Setting up Your Editor 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 ? Links Official ESLint plugin for Vue.js - Available rules https://play.gumlet.io/embed/6972682cfa888578c94efac3 470 2024-08-06T08:02:00.000Z yes no https://vueschool.io/lessons/setup-using-quasar-s-vite-cli 2024-08-06T08:01:00.000Z https://video.gumlet.io/69725ff6deef8702a8ccfe1c/6972682c7489edf934909da1/thumbnail-1-0.png?v=1769106213800 Setup Using Quasar's Vite Cli 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. Links Quasar Docs - Quick Start https://play.gumlet.io/embed/6972682c7489edf934909da1 499 2024-08-06T08:01:00.000Z yes no https://vueschool.io/lessons/a-taste-of-what-s-to-come 2024-08-06T07:57:00.000Z https://video.gumlet.io/69725ff6deef8702a8ccfe1c/6972682cfa888578c94efaea/thumbnail-1-0.png?v=1769106984219 A Taste of What’s to Come… 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. You don’t need to follow a long for this first video… it's designed to give you a quick taste, show you what Quasar is all about, and get your excited before we dive in and start writing code! Links Quasar Docs Quasar Docs - Components Chrome - Inspect Devices https://play.gumlet.io/embed/6972682cfa888578c94efaea 561 2024-08-06T07:57:00.000Z yes no https://vueschool.io/lessons/build-a-vue-js-data-table-component-with-shadcn-and-tanstack 2024-07-23T06:33:00.000Z https://video.gumlet.io/68b5da39373a93b510356a10/68b5eafb6a218061ab241f6a/thumbnail-1-0.png?v=1757083308699 Build a Vue.js Data Table Component with Shadcn and TanStack 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 render data with features like sorting and pagination. This approach ensures a powerful and customizable data table for your Vue.js projects. Links TanStack Table - Vue Shadcn-vue Table Dhadcn-vue Data Table https://play.gumlet.io/embed/68b5eafb6a218061ab241f6a 384 2024-07-23T06:33:00.000Z yes no https://vueschool.io/lessons/real-time-data-with-laravel-reverb-and-vue-js-conclusion 2024-06-25T05:00:00.000Z https://video.gumlet.io/6995f1abccf4da31c0bc6c35/6995f22cccf4da31c0bc8139/thumbnail-1-0.png?v=1771436179613 Conclusion 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. Links Laravel Docs - Reverb Laravel Docs - Broadcasting Vue School on Twitter Vue School on LinkedIn Email us at team@vueschool.io https://play.gumlet.io/embed/6995f22cccf4da31c0bc8139 78 2024-06-25T05:00:00.000Z yes no https://vueschool.io/lessons/sending-private-scoped-real-time-data-with-reverb 2024-06-25T05:00:00.000Z https://video.gumlet.io/6995f1abccf4da31c0bc6c35/6995f22cccf4da31c0bc8143/thumbnail-1-0.png?v=1771435025461 Sending Private Scoped Real Time Data with Reverb In this lesson, learn how to scope down subscriptions even further by limiting a channel to only a single user. Link Laravel Docs - Authorizing Channels https://play.gumlet.io/embed/6995f22cccf4da31c0bc8143 234 2024-06-25T05:00:00.000Z yes no https://vueschool.io/lessons/sending-private-real-time-data-with-reverb 2024-06-25T05:00:00.000Z https://video.gumlet.io/6995f1abccf4da31c0bc6c35/6995f22cccf4da31c0bc8140/thumbnail-1-0.png?v=1771436037345 Sending Private Real Time Data with Reverb 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. Links Laravel Docs - Authorizing Channels Laravel Docs - Listening for Events https://play.gumlet.io/embed/6995f22cccf4da31c0bc8140 292 2024-06-25T05:00:00.000Z yes no https://vueschool.io/lessons/send-messages-in-real-time-with-vue 2024-06-25T05:00:00.000Z https://video.gumlet.io/6995f1abccf4da31c0bc6c35/6995f22c3151985919a6030f/thumbnail-1-0.png?v=1771435336357 Send Messages in Real Time With Vue 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. Quickly bootstrap a simple real time chat app in under 15 minutes with Laravel Reverb and Vue.js. https://play.gumlet.io/embed/6995f22c3151985919a6030f 853 2024-06-25T05:00:00.000Z yes no https://vueschool.io/lessons/listening-to-laravel-reverb-events-in-vue 2024-06-18T05:00:00.000Z https://video.gumlet.io/6995f1abccf4da31c0bc6c35/6995f22cccf4da31c0bc813e/thumbnail-1-0.png?v=1771435907070 Listening to Laravel Reverb Events in Vue In this lesson, learn how to react to real time events from Laravel Reverb in the context of a Vue.js component. Links Inertia Laravel Docs - Routing Laravel Echo https://play.gumlet.io/embed/6995f22cccf4da31c0bc813e 246 2024-06-18T05:00:00.000Z yes no https://vueschool.io/lessons/the-laravel-queue-and-reverb 2024-06-18T05:00:00.000Z https://video.gumlet.io/6995f1abccf4da31c0bc6c35/6995f22c1dddd5270dca66cc/thumbnail-1-0.png?v=1771435001349 The Laravel Queue and Reverb 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 synchronously, you should implement ShouldBroadcastNow instead or if you just want to run synchronously on local and keep in the queue on production, you can change the QUEUE_CONNECTION in your .env file to sync. Links Laravel Queues Laravel Broadcasting https://play.gumlet.io/embed/6995f22c1dddd5270dca66cc 201 2024-06-18T05:00:00.000Z yes no https://vueschool.io/lessons/your-first-event-how-every-real-time-message-starts 2024-06-18T05:00:00.000Z https://video.gumlet.io/6995f1abccf4da31c0bc6c35/6995f22b3151985919a6030b/thumbnail-1-0.png?v=1771435797560 Your First Event (How Every Real-Time Message Starts) 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 running for the app to work including the app server, the reverb server, and the front-end JavaScript dev server. Links Laravel Events Laravel Reverb - Start the Server https://play.gumlet.io/embed/6995f22b3151985919a6030b 331 2024-06-18T05:00:00.000Z yes no https://vueschool.io/lessons/bootstrap-a-laravel-application-and-install-reverb 2024-06-18T05:00:00.000Z https://video.gumlet.io/6995f1abccf4da31c0bc6c35/6995f22b1dddd5270dca66ca/thumbnail-1-0.png?v=1771434921339 Bootstrap a Laravel Application and Install Reverb 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. # create a new laravel project laravel new laravel-reverb-course # install laravel reverb cd laravel-reverb-course php artisan install:broadcasting Links Laravel Docs - Creating a New Laravel Project https://play.gumlet.io/embed/6995f22b1dddd5270dca66ca 358 2024-06-18T05:00:00.000Z yes no https://vueschool.io/lessons/what-is-laravel-reverb 2024-06-18T05:00:00.000Z https://video.gumlet.io/6995f1abccf4da31c0bc6c35/6995f22b3151985919a602f5/thumbnail-1-0.png?v=1771435619992 What is Laravel Reverb? 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. Links Laravel Reverb Laravel https://play.gumlet.io/embed/6995f22b3151985919a602f5 95 2024-06-18T05:00:00.000Z yes no https://vueschool.io/lessons/git-basics-for-every-developer 2024-05-28T09:46:00.000Z https://video.gumlet.io/68b5da39373a93b510356a10/68b5e2b7373a93b51035e5bf/thumbnail-1-0.png?v=1756913887890 Git Basics for Every Developer This lesson provides a crash course on Git, a fundamental version control system for developers, and Github, the home for your Git repositories. This lesson equips you with basic Git commands frequently used by developers. Think of it as a cheat sheet, and we will build on it throughout the course. Here’s all commands mentioned in the video: Checking Git Installation: git --version - This command verifies if Git is already installed on your system and displays the version. Git User Setup: git config --global user.name "John Doe" - Sets your Git username for global use. git config --global user.email "john@test.com" - Sets your Git email address for global use. Initializing a Git Repository: git init -b main (in your project's root directory) - Initializes a new Git repository in your project directory and creates a new "main" branch. Adding and Committing Changes: git add . - Adds all modified files in your project to the staging area. git commit -m "init" - Creates a commit with a descriptive message ("init" in this example). Connecting to a Remote Repository: git remote add origin <URL> (replace <URL> with the repo’s SSH URL) - Adds the remote GitHub repository as "origin" for future operations. git push -u origin main - Pushes the initial commit ("init") to the remote "main" branch on GitHub. Subsequent Updates: After making changes to your local repository, use these commands to keep your remote repository updated: git add -A - Adds all modified files to the staging area. git commit -m "message" - Creates a commit with a descriptive message. git push origin main - Pushes your local commits to the remote "main" branch on GitHub. Generating SSH Key: ls -al ~/.ssh - Checks if you have an existing SSH key on your machine. ssh-keygen -t ed25519 -C "youremail@example.com" - Generates an SSH key for secure communication with GitHub. pbcopy < filename (replace "filename" with your key' https://play.gumlet.io/embed/68b5e2b7373a93b51035e5bf 431 2024-05-28T09:46:00.000Z yes no https://vueschool.io/lessons/learning-environment-intro 2024-05-28T09:46:00.000Z https://video.gumlet.io/68b5da39373a93b510356a10/68b5e2b76a218061ab239c13/thumbnail-1-0.png?v=1756913232925 Learning Environment Intro This video will guide you through the features available in the Vue.js 3 Masterclass learning environment. https://play.gumlet.io/embed/68b5e2b76a218061ab239c13 195 2024-05-28T09:46:00.000Z yes no https://vueschool.io/lessons/introduction-and-project-over-vue 2024-05-28T09:46:00.000Z https://video.gumlet.io/68b5da39373a93b510356a10/68b5e2b7b21dc579f87e172c/thumbnail-1-0.png?v=1757345145986 Introduction and Project Over-Vue 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: Building a Production-Ready App: We'll be using the latest Vue.js 3 features, including Script Setup with Composition API and TypeScript, to create a modern and efficient application. Focus on Practical Skills: Each lesson is designed to be clear, concise, and packed with practical knowledge you can use in your own projects. Rich Feature Set: The product management app we'll build will be loaded with features for both developers and users, including CRUD operations, authentication, forms, real-time data, and more. Whether you're a beginner or an experienced Vue developer, this course will help you solidify your understanding and gain valuable hands-on experience. Ready to dive in? Let's get started! Links: Vue.js 3 - Official Docs VueSchool Lesson - Script Setup VueSchool Blog - Composition API Vue.js 3 - TypeScript with Composition API Automated Routing in Vue.js 3 Vue DevTools FormKit Supabase https://play.gumlet.io/embed/68b5e2b7b21dc579f87e172c 179 2024-05-28T09:46:00.000Z yes no https://vueschool.io/lessons/lazy-loading-routes-with-unplugin-vue-router 2024-05-21T05:00:00.000Z https://video.gumlet.io/69933f78717086bef840e882/6993405e717086bef8410c8b/thumbnail-1-0.png?v=1771259459631 Lazy Loading Routes with Unplugin Vue Router In this lesson, learn how unplugin-vue-router keeps your app performant by automatically lazy loading all your pages. https://play.gumlet.io/embed/6993405e717086bef8410c8b 148 2024-05-21T05:00:00.000Z yes no https://vueschool.io/lessons/catch-all-routes-with-file-based-routing 2024-05-21T05:00:00.000Z https://video.gumlet.io/69933f78717086bef840e882/69933fee717086bef840fe01/thumbnail-1-0.png?v=1771259212394 Catch all Routes with File-Based Routing 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://play.gumlet.io/embed/69933fee717086bef840fe01 108 2024-05-21T05:00:00.000Z yes no https://vueschool.io/lessons/dynamic-routes-with-file-based-routing 2024-05-21T05:00:00.000Z https://video.gumlet.io/69933f78717086bef840e882/69933fed717086bef840fdd0/thumbnail-1-0.png?v=1771258637280 Dynamic Routes with File-Based Routing 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: Optional parameters: [[id]].vue and Repeatable parameters: [id]+.vue https://play.gumlet.io/embed/69933fed717086bef840fdd0 269 2024-05-21T05:00:00.000Z yes no https://vueschool.io/lessons/file-based-routing 2024-05-14T05:00:00.000Z https://video.gumlet.io/69933f78717086bef840e882/69933fed48207737cfc653d5/thumbnail-1-0.png?v=1771258341298 File-Based Routing In this lesson, learn a little more about the basics of file-based routing. See how nested directories affect the route structure. https://play.gumlet.io/embed/69933fed48207737cfc653d5 115 2024-05-14T05:00:00.000Z yes no https://vueschool.io/lessons/how-to-install-and-setup-unplugin-vue-router 2024-05-14T05:00:00.000Z https://video.gumlet.io/69933f78717086bef840e882/69933fed48207737cfc653d7/thumbnail-1-0.png?v=1771258229355 How to Install and Setup Unplugin Vue Router 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. Links Unplugin Vue Router Docs Unplugin Vue Router Repo https://play.gumlet.io/embed/69933fed48207737cfc653d7 410 2024-05-14T05:00:00.000Z yes no https://vueschool.io/lessons/course-pre-requisites 2024-05-14T05:00:00.000Z https://video.gumlet.io/69933f78717086bef840e882/69933fed48207737cfc653cb/thumbnail-1-0.png?v=1771258049630 Course Pre-Requisites 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 Router (we kind of assume you already know the basics of routing and you just want to streamline the experience). Finally, you do NOT have to know TypeScript already to complete this course, though it might wet your appetite for this cool tech. Links Vue.js 3 Fundamentals with the Composition API Vue Component Fundamentals with the Composition API Vue Router 4 For Everyone TypeScript with Vue.js 3 TypeScript Fundamentals https://play.gumlet.io/embed/69933fed48207737cfc653cb 110 2024-05-14T05:00:00.000Z yes no https://vueschool.io/lessons/what-is-unplugin-vue-router 2024-05-14T05:00:00.000Z https://video.gumlet.io/69933f78717086bef840e882/69933fed717086bef840fdce/thumbnail-1-0.png?v=1771258115958 What is Unplugin Vue Router? In this lesson, learn what unplugin-vue-router is and what it’s good for. unplugin-vue-router is a Vite plugin that provides filed-based routing for Vue.js projects. It also comes with error detection and autocomplete powers thanks to it’s built in TypeScript support. At the time of this recording, the plugin is marked as experimental. Links Unplugin Vue Router Docs Unplugin Vue Router Repo https://play.gumlet.io/embed/69933fed717086bef840fdce 78 2024-05-14T05:00:00.000Z yes no https://vueschool.io/lessons/course-conclusion-5 2024-03-28T07:00:00.000Z https://video.gumlet.io/69bfd7904fe0bcfaae533405/69c110d324ffd038ef6ced16/thumbnail-1-0.png?v=1774260815888 Course Conclusion Thanks for watching! We’d love your feedback and welcome your questions or comments. Links Twitter LinkedIn team@vueschool.io https://play.gumlet.io/embed/69c110d324ffd038ef6ced16 44 2024-03-28T07:00:00.000Z yes no https://vueschool.io/lessons/build-an-alert-vue-component 2024-03-28T07:00:00.000Z https://video.gumlet.io/69bfd7904fe0bcfaae533405/69c110d338a6314ac39636ee/thumbnail-1-0.png?v=1774261965414 Build an Alert Vue Component This lesson is also a component exercise lesson, where we're going to use everything we've learned about Vue components so far. In this component exercise, we're going to build a fun and useful alert component. Your goal is to create a component that will be passed some content (the message) and the type of notification (info, error, success, warning). The user should also be able to close the notification and it should emit a closed event. Good luck and have fun! Links Daisy UI Alert Component https://play.gumlet.io/embed/69c110d338a6314ac39636ee 1044 2024-03-28T07:00:00.000Z yes no https://vueschool.io/lessons/build-a-github-user-profile-vue-component 2024-03-28T07:00:00.000Z https://video.gumlet.io/69bfd7904fe0bcfaae533405/69c10e4124ffd038ef6cae84/thumbnail-1-0.png?v=1774261439700 Build a GitHub User Profile Vue Component 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. The goal is to create a component that displays a person’s GitHub profile. Including the user's avatar, name, and followers. Good luck and have fun! // Github API URL https://api.github.com/users/[username] Links Tailwind Install Instructions DaisyUI Install Instructions Daisy UI Card Component https://play.gumlet.io/embed/69c10e4124ffd038ef6cae84 606 2024-03-28T07:00:00.000Z yes no https://vueschool.io/lessons/vue-component-slots 2024-03-28T07:00:00.000Z https://video.gumlet.io/69bfd7904fe0bcfaae533405/69c10e41c98b51e9c5533004/thumbnail-1-0.png?v=1774260787024 Vue Component Slots 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 scoped slots. Links Vue.js Docs - Slots https://play.gumlet.io/embed/69c10e41c98b51e9c5533004 561 2024-03-28T07:00:00.000Z yes no https://vueschool.io/lessons/vue-component-lifecycle-hooks 2024-03-28T07:00:00.000Z https://video.gumlet.io/69bfd7904fe0bcfaae533405/69c10e4124ffd038ef6cae57/thumbnail-1-0.png?v=1774260904274 Vue Component Lifecycle Hooks In this lesson, we learn what Vue component lifecycle hooks are and how we can use them. Links Vue.js Docs - LifeCycle Hooks Vue.js Docs API - Lifecycle Hooks https://play.gumlet.io/embed/69c10e4124ffd038ef6cae57 470 2024-03-28T07:00:00.000Z yes no https://vueschool.io/lessons/component-naming-best-practices-in-vue 2024-03-28T07:00:00.000Z https://video.gumlet.io/69bfd7904fe0bcfaae533405/69c10e4124ffd038ef6cae5b/thumbnail-1-0.png?v=1774260646448 Component Naming Best Practices in Vue 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 our applications will be easier to understand for other developers, just by taking a look at the component files. Links Vue.js Style Guide https://play.gumlet.io/embed/69c10e4124ffd038ef6cae5b 256 2024-03-28T07:00:00.000Z yes no https://vueschool.io/lessons/vue-component-prop-and-event-validation 2024-03-28T07:00:00.000Z https://video.gumlet.io/69bfd7904fe0bcfaae533405/69c10e41c98b51e9c5532ffc/thumbnail-1-0.png?v=1774260268029 Vue Component Prop and Event Validation 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://play.gumlet.io/embed/69c10e41c98b51e9c5532ffc 241 2024-03-28T07:00:00.000Z yes no https://vueschool.io/lessons/communication-between-vue-components-with-custom-events 2024-03-28T07:00:00.000Z https://video.gumlet.io/69bfd7904fe0bcfaae533405/69c10e4124ffd038ef6cae5e/thumbnail-1-0.png?v=1774261363697 Communication Between Vue Components with Custom Events 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. We will use a custom event to notify the PlanPicker of which plan has been selected, and make sure we have the right logic in place so the user can only select one plan at a time. https://play.gumlet.io/embed/69c10e4124ffd038ef6cae5e 758 2024-03-28T07:00:00.000Z yes no https://vueschool.io/lessons/global-vs-local-vue-components 2024-03-28T07:00:00.000Z https://video.gumlet.io/69bfd7904fe0bcfaae533405/69c10e4124ffd038ef6cae61/thumbnail-1-0.png?v=1774260604565 Global vs Local Vue Components 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 application. https://play.gumlet.io/embed/69c10e4124ffd038ef6cae61 169 2024-03-28T07:00:00.000Z yes no https://vueschool.io/lessons/nested-components-in-vue 2024-03-28T07:00:00.000Z https://video.gumlet.io/69bfd7904fe0bcfaae533405/69c10e4138a6314ac395f84b/thumbnail-1-0.png?v=1774260553547 Nested Components in Vue 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 features of our apps. In this lesson, we'll learn how we can create a PlanPicker component, to easily display all our plans wherever we want. https://play.gumlet.io/embed/69c10e4138a6314ac395f84b 193 2024-03-28T07:00:00.000Z yes no https://vueschool.io/lessons/reusable-components-with-props-2 2024-03-28T07:00:00.000Z https://video.gumlet.io/69bfd7904fe0bcfaae533405/69c10e4138a6314ac395f84d/thumbnail-1-0.png?v=1774261106368 Reusable Components with Props In this lesson, we'll see a realistic use case for reusable components and learn about Vue component props. Props are custom HTML attributes that we can register on our components, which allow us to pass data to our components. Links Starter HTML Starter CSS Vue.js Docs - Components Basics Vue.js Docs - Props https://play.gumlet.io/embed/69c10e4138a6314ac395f84d 621 2024-03-28T07:00:00.000Z yes no https://vueschool.io/lessons/intro-to-vue-3-components 2024-03-28T07:00:00.000Z https://video.gumlet.io/69bfd7904fe0bcfaae533405/69c10e41c98b51e9c5532ffa/thumbnail-1-0.png?v=1774260254335 Intro to Vue 3 Components 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. Links Vue.js 3 Fundamentals with the Composition API https://play.gumlet.io/embed/69c10e41c98b51e9c5532ffa 286 2024-03-28T07:00:00.000Z yes no https://vueschool.io/lessons/injecting-plugin-templates 2024-02-29T07:00:00.000Z https://video.gumlet.io/698a0fb9aec3d4e420ba0970/698a1299873071aec5c19eaf/thumbnail-1-0.png?v=1770657396069 Injecting Plugin Templates 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 server-side execution, and leverage Nuxt's automated plugin creation (virtual or directory-based). Master this technique and elevate your Nuxt.js skillset to build high-performance Nuxt 3 applications. Links: Nuxt - Plugin Templates Embedded Javascript Templates Virtual Filesystem Vue - Plugins Vue - Custom Directives https://play.gumlet.io/embed/698a1299873071aec5c19eaf 632 2024-02-29T07:00:00.000Z yes no https://vueschool.io/lessons/passing-and-exposing-module-options 2024-02-22T07:00:00.000Z https://video.gumlet.io/698a0fb9aec3d4e420ba0970/698a1299aec3d4e420ba6523/thumbnail-1-0.png?v=1770657379162 Passing and Exposing Module Options Empower users with customizable module options and expose those options for dynamic control during runtime. Links: Nuxt - Runtime Config Composable defu - Recursively assign default properties https://play.gumlet.io/embed/698a1299aec3d4e420ba6523 450 2024-02-22T07:00:00.000Z yes no https://vueschool.io/lessons/adding-route-rules-and-route-middlewares 2024-03-07T07:00:00.000Z https://video.gumlet.io/698a0fb9aec3d4e420ba0970/698a1486873071aec5c1dc0c/thumbnail-1-0.png?v=1770657373199 Adding Route Rules and Route Middlewares 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 Revalidate caching, custom headers and redirects. Explore seamless middleware integration with addRouteMiddleware for an enhanced user experience. Links: Nitro - Route Rules Nuxt - Route Middleware Defining Middleware - definePageMeta Stale While Revalidate Nuxt Static Site Generation https://play.gumlet.io/embed/698a1486873071aec5c1dc0c 470 2024-03-07T07:00:00.000Z yes no https://vueschool.io/lessons/extend-and-alter-nuxt-pages 2024-03-07T07:00:00.000Z https://video.gumlet.io/698a0fb9aec3d4e420ba0970/698a142baec3d4e420ba9584/thumbnail-1-0.png?v=1770657534244 Extend and Alter Nuxt Pages 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 leverage the extendPages function from @nuxt/kit, unraveling its relationship with Nuxt hooks. Get ready to deepen your understanding and enhance your Nuxt skills! Links: Nuxt Kit - extendPages Nuxt’s Github Repository Nuxt Hooks https://play.gumlet.io/embed/698a142baec3d4e420ba9584 428 2024-03-07T07:00:00.000Z yes no https://vueschool.io/lessons/expanding-nuxt-s-auto-imports 2024-03-07T07:00:00.000Z https://video.gumlet.io/698a0fb9aec3d4e420ba0970/698a142a873071aec5c1cfeb/thumbnail-1-0.png?v=1770657335519 Expanding Nuxt's Auto-Imports 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 addImportsSources to streamline your coding journey. Links: Nuxt Kit Auto-Imports Vue.js 3 APIs https://play.gumlet.io/embed/698a142a873071aec5c1cfeb 470 2024-03-07T07:00:00.000Z yes no https://vueschool.io/lessons/injecting-components-and-component-directories 2024-02-29T07:00:00.000Z https://video.gumlet.io/698a0fb9aec3d4e420ba0970/698a142afc23d3d76fa043e2/thumbnail-1-0.png?v=1770657445568 Injecting Components and Component Directories 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 directly from your modules. Simplify your development, enhance your project, and unlock the power of modularized UI. Links: Vue Components Nuxt Components Directory Nuxt Kit Components Dynamic Imports https://play.gumlet.io/embed/698a142afc23d3d76fa043e2 449 2024-02-29T07:00:00.000Z yes no https://vueschool.io/lessons/injecting-plugins 2024-02-29T07:00:00.000Z https://video.gumlet.io/698a0fb9aec3d4e420ba0970/698a1299fc23d3d76fa0131d/thumbnail-1-0.png?v=1770657393528 Injecting Plugins 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 for Intersection Observer API. We'll also uncover unique approaches to useFetch Nuxt composable, along with code optimization tricks you wouldn’t want to miss. Links: Nuxt Kit - Plugins Vue - Plugins Vue - Custom Directives Injecting Plugins Nuxt 3 Plugins Directory Nuxt Composables - useFetch Intersection Observer API Intersection Observer Entry Vue 3 Observe Visibility https://play.gumlet.io/embed/698a1299fc23d3d76fa0131d 733 2024-02-29T07:00:00.000Z yes no https://vueschool.io/lessons/resolving-paths-and-injecting-assets-to-the-app 2024-02-29T07:00:00.000Z https://video.gumlet.io/698a0fb9aec3d4e420ba0970/698a1299fc23d3d76fa01319/thumbnail-1-0.png?v=1770657161781 Resolving Paths and Injecting Assets to the App 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 app's styles, and effortlessly expose entire public asset folders to Nitro's public directory using Nuxt hooks. Links: Nuxt Kit - Resolving Nuxt Hooks Nuxt Advanced - import.meta Nitro - publicAssets Nuxt API Configuration - CSS https://play.gumlet.io/embed/698a1299fc23d3d76fa01319 386 2024-02-29T07:00:00.000Z yes no https://vueschool.io/lessons/putting-it-all-together-advanced-feature-integration-in-modules 2024-02-22T07:00:00.000Z https://video.gumlet.io/698a0fb9aec3d4e420ba0970/698a1299873071aec5c19e7c/thumbnail-1-0.png?v=1770657382412 Putting It All Together: Advanced Feature Integration in Modules 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 feature using Rollup's code splitting. We'll explore the nuances, delve into effective use of Nuxt Hooks, and discover key strategies to supercharge your application's speed and efficiency. Don't miss out on this opportunity to unlock peak performance! Links: Nuxt Hooks Nuxt API - Lifecycle Hooks Vite Key Features Rollup Configuration Options Nuxt Docs - Hooks Search node_modules Extension https://play.gumlet.io/embed/698a1299873071aec5c19e7c 891 2024-02-22T07:00:00.000Z yes no https://vueschool.io/lessons/nuxt-lifecycle-hooks 2024-02-22T07:00:00.000Z https://video.gumlet.io/698a0fb9aec3d4e420ba0970/698a1299aec3d4e420ba6525/thumbnail-1-0.png?v=1770657165427 Nuxt Lifecycle Hooks 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, empowering you to build truly customized and dynamic experiences. Links: Nuxt Hooks Nuxt API - Lifecycle Hooks https://play.gumlet.io/embed/698a1299aec3d4e420ba6525 515 2024-02-22T07:00:00.000Z yes no https://vueschool.io/lessons/extending-and-altering-nuxt-configuration-and-options 2024-02-22T07:00:00.000Z https://video.gumlet.io/698a0fb9aec3d4e420ba0970/698a1299873071aec5c19e7a/thumbnail-1-0.png?v=1770657009379 Extending and Altering Nuxt Configuration and Options 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 reduce reactivity overhead for an optimal user experience. Unleash the potential of your module and witness its impact on Nuxt performance. Let's get building! Links: Nuxt Configuration Options Vite Configuration Options Nitro Configuration Options Vue.js Reactivity Overhead Nuxt - useAsyncData https://play.gumlet.io/embed/698a1299873071aec5c19e7a 486 2024-02-22T07:00:00.000Z yes no https://vueschool.io/lessons/navigating-the-official-starter-template 2024-02-15T07:00:00.000Z https://video.gumlet.io/698a0fb9aec3d4e420ba0970/698a1299aec3d4e420ba6527/thumbnail-1-0.png?v=1770657405436 Navigating the Official Starter Template 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 guide you through effortless module creation and publishing with npm run release. You’ll also learn how to test your module locally with an external Nuxt app using npm. Links: Nuxt Modules Starter Kit Nuxt Modules Builder Modules Author Guide NPM Symlink UnJs - MkDist https://play.gumlet.io/embed/698a1299aec3d4e420ba6527 705 2024-02-15T07:00:00.000Z yes no https://vueschool.io/lessons/creating-your-first-module-from-scratch 2024-02-15T07:00:00.000Z https://video.gumlet.io/698a0fb9aec3d4e420ba0970/698a1299fc23d3d76fa0131b/thumbnail-1-0.png?v=1770657236116 Creating Your First Nuxt Module From Scratch 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. Links: Getting Starting with Nuxt Nuxt Modules Directory Module Author Guide https://play.gumlet.io/embed/698a1299fc23d3d76fa0131b 717 2024-02-15T07:00:00.000Z yes no https://vueschool.io/lessons/exploring-nuxt-modules-ecosystem-and-module-types 2024-02-15T07:00:00.000Z https://video.gumlet.io/698a0fb9aec3d4e420ba0970/698a1299873071aec5c19e80/thumbnail-1-0.png?v=1770656855008 Exploring Nuxt Modules Ecosystem and Module types Want to supercharge your Nuxt projects? This lesson unlocks the power of official, community, third-party and even private modules. Learn: All Module Types Install & integrate modules like a pro Discover hidden gems with Nuxt DevTools Links: Nuxt Modules Ecosystem Nuxt Modules Types https://play.gumlet.io/embed/698a1299873071aec5c19e80 462 2024-02-15T07:00:00.000Z yes no https://vueschool.io/lessons/what-are-nuxt-modules-and-why-use-them 2024-02-15T07:00:00.000Z https://video.gumlet.io/698a0fb9aec3d4e420ba0970/698a1299aec3d4e420ba6521/thumbnail-1-0.png?v=1770911570877 What are Nuxt Modules? And why use them? 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'll learn together about Nuxt 3 Modules. Links: Nuxt Modules Nuxt Modules Concept https://play.gumlet.io/embed/698a1299aec3d4e420ba6521 159 2024-02-15T07:00:00.000Z yes no https://vueschool.io/lessons/vuetify-directives 2023-11-16T07:00:00.000Z https://video.gumlet.io/69988d3c57a7b7f9b00e8261/69988da726981d891342abd3/thumbnail-1-0.png?v=1771607437861 Vuetify Directives In this lesson, learn about the available Vuetify directives and see the v-ripple, v-click-outside, and v-resize directives in action. Links Vuetify Docs - Click Outside Directive Vuetify Docs - Ripple Directive Vuetify Docs - Resize Directive https://play.gumlet.io/embed/69988da726981d891342abd3 403 2023-11-16T07:00:00.000Z yes no https://vueschool.io/lessons/the-data-table-component-and-vuetify-labs 2023-11-09T07:00:00.000Z https://video.gumlet.io/69988d3c57a7b7f9b00e8261/69988da626981d891342ab8a/thumbnail-1-0.png?v=1771607182863 The Data Table Component and Vuetify Labs 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, filtering, sorting, row selection, and more! Links Vuetify Docs - Data Tables https://play.gumlet.io/embed/69988da626981d891342ab8a 896 2023-11-09T07:00:00.000Z yes no https://vueschool.io/lessons/the-table-component-and-some-css-utilities 2023-11-02T07:00:00.000Z https://video.gumlet.io/69988d3c57a7b7f9b00e8261/69988da657a7b7f9b00e946a/thumbnail-1-0.png?v=1771606895989 The Table Component and Some CSS Utilities In this lesson, learn how to use the Vuetify Table component in a Vue.js admin dashboard. Links Vuetify Docs - Spacing Vuetify Docs - Tables https://play.gumlet.io/embed/69988da657a7b7f9b00e946a 470 2023-11-02T07:00:00.000Z yes no https://vueschool.io/lessons/what-is-vuetify 2023-10-26T05:00:00.000Z https://video.gumlet.io/69988d3c57a7b7f9b00e8261/69988da657a7b7f9b00e9464/thumbnail-1-0.png?v=1771606472642 What is Vuetify? Welcome to the course! ? In this lesson, get a high-level overview of what Vuetify is and what benefits it has to offer. Benefits include a wealth of accessible components, application layouts, blueprints, themes, fonts, SaaS variables, control based on display size and/or device, tree shaking, and i18n. Links Vuetify Docs https://play.gumlet.io/embed/69988da657a7b7f9b00e9464 204 2023-10-26T05:00:00.000Z yes no https://vueschool.io/lessons/what-is-astro 2023-09-28T13:00:00.000Z https://video.gumlet.io/69bfd3b64fe0bcfaae52e234/69c1bc7138a6314ac3a6b59f/thumbnail-1-0.png?v=1774305245641 What is Astro? 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 flexible 'islands architecture', Astro ensures rapid loading times while allowing seamless integration with popular frameworks like Vue for interactivity when needed. Throughout the course, we'll harness these features to craft a dynamic blog, and then statically generate and host it on Netlify. Links Astro Documentation Astro GitHub Repository Netlify Islands Architecture Explained https://play.gumlet.io/embed/69c1bc7138a6314ac3a6b59f 183 2023-09-28T13:00:00.000Z yes no https://vueschool.io/lessons/unnecessary-manual-dom-manipulation 2023-09-21T05:00:00.000Z https://video.gumlet.io/68b7006a373a93b51047a62e/68b70104373a93b51047afc5/thumbnail-1-0.png?v=1758033794357 Unnecessary Manual DOM Manipulation 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 this: Template refs. Links Vue.js Docs - Template Refs https://play.gumlet.io/embed/68b70104373a93b51047afc5 117 2023-09-21T05:00:00.000Z yes no https://vueschool.io/lessons/using-v-html-with-user-provided-data 2023-09-21T05:00:00.000Z https://video.gumlet.io/68b7006a373a93b51047a62e/68b70101373a93b51047af8c/thumbnail-1-0.png?v=1758033730060 Using v-html with User Provided Data In this lesson, learn why you should be cautious with Vue’s v-html directive in order to prevent security issues. https://play.gumlet.io/embed/68b70101373a93b51047af8c 244 2023-09-21T05:00:00.000Z yes no https://vueschool.io/lessons/calling-composables-in-the-wrong-place 2023-09-21T05:00:00.000Z https://video.gumlet.io/68b7006a373a93b51047a62e/68b700f7373a93b51047aef8/thumbnail-1-0.png?v=1758033671668 Calling Composables in the Wrong Place 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 or at the top level of other composables. Links Vue.js Docs - Composables Usage Restrictions https://play.gumlet.io/embed/68b700f7373a93b51047aef8 321 2023-09-21T05:00:00.000Z yes no https://vueschool.io/lessons/destructuring-reactive-data 2023-09-21T05:00:00.000Z https://video.gumlet.io/68b7006a373a93b51047a62e/68b700a8373a93b51047a9fa/thumbnail-1-0.png?v=1758033607225 Destructuring Reactive Data 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: Reference the reactive object directly Define a computed prop (if you’re ok with the data being read only) Use toRefs Finally, when creating your composables, definitely make sure you aren’t just returning a reactive object. Why? Because most Vue developers expect composables to be destructurable. https://play.gumlet.io/embed/68b700a8373a93b51047a9fa 342 2023-09-21T05:00:00.000Z yes no https://vueschool.io/lessons/the-nuxtimage-component 2023-08-24T05:00:00.000Z https://video.gumlet.io/68b6f5a96a218061ab345f85/68b6f702b21dc579f88ef8cb/thumbnail-1-0.png?v=1757951947708 The NuxtImage Component 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 images in your Vue.js apps! Links Nuxt Image Docs - NuxtImg Component https://play.gumlet.io/embed/68b6f702b21dc579f88ef8cb 345 2023-08-24T05:00:00.000Z yes no https://vueschool.io/lessons/intro-to-nuxt-image 2023-08-24T05:00:00.000Z https://video.gumlet.io/68b6f5a96a218061ab345f85/68b6f6f06a218061ab34770e/thumbnail-1-0.png?v=1757949535300 Intro to Nuxt Image In this bonus chapter of the course, we tack on some extra goodies all about optimizing images with the Nuxt Image component. Links Nuxt Image Module What is Image Optimization and Why Is it Important for a Website? https://play.gumlet.io/embed/68b6f6f06a218061ab34770e 235 2023-08-24T05:00:00.000Z yes no https://vueschool.io/lessons/common-vue-js-mistakes-course-conclusion 2023-08-17T05:00:00.000Z https://video.gumlet.io/68b7006a373a93b51047a62e/68b700a86a218061ab3516b6/thumbnail-1-0.png?v=1758033889654 Course Conclusion Thanks for watching! ? Please share your own experience with common mistakes you’ve made and we might just end up adding a new video. Links VueSchool on Twitter https://play.gumlet.io/embed/68b700a86a218061ab3516b6 52 2023-08-17T05:00:00.000Z yes no https://vueschool.io/lessons/not-considering-typescript 2023-08-17T05:00:00.000Z https://video.gumlet.io/68b7006a373a93b51047a62e/68b700a7373a93b51047a9d3/thumbnail-1-0.png?v=1758033555968 Not Considering TypeScript In this lesson, you get a super quick introduction about why avoiding TypeScript for your next Vue.js project might be a mistake. Links TypeScript with Vue.js 3 Course Vue Docs - Using Vue with TypeScript https://play.gumlet.io/embed/68b700a7373a93b51047a9d3 145 2023-08-17T05:00:00.000Z yes no https://vueschool.io/lessons/expecting-changes-to-non-reactive-dependencies-to-trigger-updates 2023-08-17T05:00:00.000Z https://video.gumlet.io/68b7006a373a93b51047a62e/68b700a76a218061ab35168e/thumbnail-1-0.png?v=1758033508225 Expecting Changes to Non-Reactive Dependencies to Trigger Updates 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 ? VueUse VueUse for Everyone Course https://play.gumlet.io/embed/68b700a76a218061ab35168e 305 2023-08-17T05:00:00.000Z yes no https://vueschool.io/lessons/forgetting-to-clean-up-your-manual-event-listeners 2023-08-10T05:00:00.000Z https://video.gumlet.io/68b7006a373a93b51047a62e/68b700a8373a93b51047aa04/thumbnail-1-0.png?v=1758033445545 Forgetting to Clean Up Your Manual Event Listeners 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 of elements within the current component. Why should we clean them up? Failing to do so will result in memory leaks and degrading application performance. Links Vue.js Docs - onUnmounted https://play.gumlet.io/embed/68b700a8373a93b51047aa04 506 2023-08-10T05:00:00.000Z yes no https://vueschool.io/lessons/unintentionally-mutating-props 2023-08-10T05:00:00.000Z https://video.gumlet.io/68b7006a373a93b51047a62e/68b700a7373a93b51047a9de/thumbnail-1-0.png?v=1758033387282 Unintentionally Mutating Props 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. Links Vue Docs - One Way Data Flow Visual Studio Code for Vue.js Developers Course ESLint Plugin Vue https://play.gumlet.io/embed/68b700a7373a93b51047a9de 600 2023-08-10T05:00:00.000Z yes no https://vueschool.io/lessons/replacing-reactive-state-the-wrong-way 2023-08-10T05:00:00.000Z https://video.gumlet.io/68b7006a373a93b51047a62e/68b700a76a218061ab35167f/thumbnail-1-0.png?v=1758033026081 Replacing Reactive State the Wrong Way 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 everywhere. Links Vue.js Docs - Limitations of Reactive https://play.gumlet.io/embed/68b700a76a218061ab35167f 401 2023-08-10T05:00:00.000Z yes no https://vueschool.io/lessons/watching-arrays-the-wrong-way 2023-08-10T05:00:00.000Z https://video.gumlet.io/68b7006a373a93b51047a62e/68b700a7b21dc579f88f97ca/thumbnail-1-0.png?v=1758032973126 Watching Arrays the Wrong Way In this lesson, learn why watching arrays without the deep option will cause unexpected results for your Vue.js projects. Links Vue.js Migration Guide - Watch on Arrays Vue.js Docs - Deep Watchers Tweet from Evan on Why it Changed from v2 - v3 Github issue discussing the change from v2 - v3 https://play.gumlet.io/embed/68b700a7b21dc579f88f97ca 204 2023-08-10T05:00:00.000Z yes no https://vueschool.io/lessons/prop-drilling 2023-08-03T05:00:00.000Z https://video.gumlet.io/68b7006a373a93b51047a62e/68b700a76a218061ab351681/thumbnail-1-0.png?v=1758032906525 Prop Drilling 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. Coding this way can lead to hard-to-maintain code. Learn how to avoid prop drilling with provide/inject or via a global state management solution. Links Vue.js Docs - Provide/Inject Vue School Video - Using Provide Inject with the Composition API Vue.js Docs - State Management Pinia Docs Pinia Course https://play.gumlet.io/embed/68b700a76a218061ab351681 551 2023-08-03T05:00:00.000Z yes no https://vueschool.io/lessons/omitting-the-key-directive-on-v-for 2023-08-03T05:00:00.000Z https://video.gumlet.io/68b7006a373a93b51047a62e/68b700a7b21dc579f88f97c7/thumbnail-1-0.png?v=1758032852553 Omitting the Key Directive on v-for 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 whenever elements or components within a loop contain some internal state and are re-ordered in any way. ?BTW reordering doesn’t just mean shuffling, it also includes adding or deleting any new items, that cause other elements to change position. The rule of thumb is ALWAYS provide the :key directive with your v-for's no matter what and never use the index as the key. Links Visual Studio Code for Vue.js Developers Course Tips and Gotchas For Using key with v-for in Vue.js 3 Article Stackblitz example of the issue https://play.gumlet.io/embed/68b700a7b21dc579f88f97c7 515 2023-08-03T05:00:00.000Z yes no https://vueschool.io/lessons/course-intro 2023-08-03T05:00:00.000Z https://video.gumlet.io/68b7006a373a93b51047a62e/68b700a7373a93b51047a9d6/thumbnail-1-0.png?v=1758032788866 Course Intro 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://play.gumlet.io/embed/68b700a7373a93b51047a9d6 56 2023-08-03T05:00:00.000Z yes no https://vueschool.io/lessons/your-first-vue-js-chart 2023-07-06T05:00:00.000Z https://video.gumlet.io/699c7c4571f7bf393a62ce15/699c7cbe57a7b7f9b06ed718/thumbnail-1-0.png?v=1771959614376 Your First Vue.js Chart In this lesson, get hands-on using the vue-chartjs library to create your first bar chart using local data. // movies const movies = [ "Spider-Man (2002)", "Spider-Man 2 (2004)", "Spider-Man 3 (2007)", "The Amazing Spider-Man (2012)", "The Amazing Spider-Man 2 (2014)", "Spider-Man: Homecoming (2017)", "Spider-Man: Far From Home (2019)", "Spider-Man: No Way Home (2021)", "Spider-Man: Into the Spider-Verse (2018)", "Spider-Man: Across the Spider-Verse (2023)", ] // ratings const ratings = [7.3, 7.3, 6.2, 6.9, 6.6, 7.4, 7.5, 8.0, 8.4, 8.9] Links Boilerplate https://play.gumlet.io/embed/699c7cbe57a7b7f9b06ed718 537 2023-07-06T05:00:00.000Z yes no https://vueschool.io/lessons/intro-to-charts-for-vue-js-3 2023-07-06T05:00:00.000Z https://video.gumlet.io/699c7c4571f7bf393a62ce15/699c7cbe57a7b7f9b06ed6c7/thumbnail-1-0.png?v=1771959544102 Intro to Charts for Vue.js 3 In this lesson, I introduce you to vue-chartjs for creating interactive and easy-to-maintain charts and graphs for your Vue.js applications. Some chart types supported out of the box include bar charts, line charts, doughnut charts, and more! Links vue-chartjs Chart.js https://play.gumlet.io/embed/699c7cbe57a7b7f9b06ed6c7 270 2023-07-06T05:00:00.000Z yes no https://vueschool.io/lessons/custom-vue-transition-classes-aka-tailwind-css-with-vue-transitions 2023-06-22T05:00:00.000Z https://video.gumlet.io/69c01e5f913220ae3bbb1d9e/69c2a072531f7f7b6ce7a85b/thumbnail-1-0.png?v=1774363451761 Custom Vue Transition Classes (aka Tailwind CSS with Vue Transitions) 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://play.gumlet.io/embed/69c2a072531f7f7b6ce7a85b 257 2023-06-22T05:00:00.000Z yes no https://vueschool.io/lessons/one-line-transitions-with-the-vue-autoanimate-plugin 2023-06-29T05:00:00.000Z https://video.gumlet.io/69c01e5f913220ae3bbb1d9e/69c2a0729ae74a3428934809/thumbnail-1-0.png?v=1774363551660 One Line Transitions with the Vue AutoAnimate Plugin 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 Vue.js app. Links Auto Animate https://play.gumlet.io/embed/69c2a0729ae74a3428934809 310 2023-06-29T05:00:00.000Z yes no https://vueschool.io/lessons/css-animations-animate-css-and-the-vue-transition-component 2023-06-22T05:00:00.000Z https://video.gumlet.io/69c01e5f913220ae3bbb1d9e/69c2a0724f62335fd44b890c/thumbnail-1-0.png?v=1774363827147 CSS Animations, Animate.css, and the Vue Transition Component 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 steps with different CSS properties, making for more complex animations. Finally, we don’t have to write all of these animation keyframe declarations ourselves. Reach for a library like animate.css to do a lot of the work for you! Links Vue.js Docs: CSS Animations animate.css https://play.gumlet.io/embed/69c2a0724f62335fd44b890c 411 2023-06-22T05:00:00.000Z yes no https://vueschool.io/lessons/various-ways-of-triggering-transitions 2023-06-15T05:00:00.000Z https://video.gumlet.io/69c01e5f913220ae3bbb1d9e/69c2a0ad4f62335fd44b8f12/thumbnail-1-0.png?v=1774364164389 Triggering Transitions in Vue 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://play.gumlet.io/embed/69c2a0ad4f62335fd44b8f12 354 2023-06-15T05:00:00.000Z yes no https://vueschool.io/lessons/nested-transitions-and-explicit-transition-durations 2023-06-08T05:00:00.000Z https://video.gumlet.io/69c01e5f913220ae3bbb1d9e/69c2a0b94f62335fd44b90a1/thumbnail-1-0.png?v=1774364277852 Nested Vue Transitions and Explicit Transition Durations 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. Links Nested Transitions - Vue.js Docs https://play.gumlet.io/embed/69c2a0b94f62335fd44b90a1 292 2023-06-08T05:00:00.000Z yes no https://vueschool.io/lessons/hello-native-vue-js-transitions 2023-06-08T05:00:00.000Z https://video.gumlet.io/69c01e5f913220ae3bbb1d9e/69c2a0c39ae74a3428935121/thumbnail-1-0.png?v=1774363899822 Hello Native Vue.js Transitions 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 hiding elements. Links Transition Component - Vue Docs https://play.gumlet.io/embed/69c2a0c39ae74a3428935121 172 2023-06-08T05:00:00.000Z yes no https://vueschool.io/lessons/headless-dialogs-with-useconfirmdialog 2023-05-25T11:12:00.000Z https://video.gumlet.io/6967aac66a1e75f7ab3e8214/69c1125f24ffd038ef6d18a9/thumbnail-1-0.png?v=1774261512487 Headless Dialogs with useConfirmDialog 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 already have installed. Plus, retain complete control over how things are styled. The VueUse dialog provides confirmation dialog functionality that you can hook-up to the markup and styles of your choice. In other words, it's a headless confirmation dialog and it works great! Links useConfirmDialog - Start | End | Docs https://play.gumlet.io/embed/69c1125f24ffd038ef6d18a9 341 2023-05-25T11:12:00.000Z yes no https://vueschool.io/lessons/formkit-and-zod 2023-05-18T05:00:00.000Z https://video.gumlet.io/69bfd71b913220ae3bb572b1/69c2caaf4f62335fd44fe0b0/thumbnail-1-0.png?v=1774374411234 FormKit and Zod In this bonus lesson, we take a look at the FormKit Zod plugin. Zod is a popular schema validation library, that works great with TypeScript. The plugin enables us to define all of a FormKit form’s validation rules with Zod. The major advantage of using Zod over the built-in validation rules, is the ability to define the rules in one place and then re-use them on both front and backend. Links FormKit Zod Plugin Docs Zod Documentation Code in Stackblitz - Start Code in Stackblitz - End Code in Stackblitz - Invalid Payload Demo https://play.gumlet.io/embed/69c2caaf4f62335fd44fe0b0 488 2023-05-18T05:00:00.000Z yes no https://vueschool.io/lessons/use-markdown-and-placeholders-in-training-messages 2023-04-27T05:00:00.000Z https://video.gumlet.io/69bfd77461788532c94f475e/69c10a2424ffd038ef6c4c83/thumbnail-1-0.png?v=1774260462486 Use Markdown and Placeholders in Training Messages In this lesson, we get a bit creative with training the chatbot’s response to provide a link to a Twitter URL. https://play.gumlet.io/embed/69c10a2424ffd038ef6c4c83 257 2023-04-27T05:00:00.000Z yes no https://vueschool.io/lessons/create-your-open-ai-account 2023-04-13T05:00:00.000Z https://video.gumlet.io/69bfd77461788532c94f475e/69c108b9c98b51e9c552ae10/thumbnail-1-0.png?v=1774258842306 Create Your Open AI Account In this lesson, signup for your OpenAI account and generate an API token to authenticate your API requests. Links OpenAI Signup OpenAI Overview Midjourney https://play.gumlet.io/embed/69c108b9c98b51e9c552ae10 195 2023-04-13T05:00:00.000Z yes no https://vueschool.io/lessons/intro-to-open-ai-and-gpt-3-4 2023-04-13T05:00:00.000Z https://video.gumlet.io/69bfd77461788532c94f475e/69c108b938a6314ac3957990/thumbnail-1-0.png?v=1774258924008 Intro to Open AI and GPT-3 & 4 ChatGPT has take the internet by storm! The AI that powers the popular app however, is also available via a simple REST API. In this course, we’ll supercharge our own Vue.js app with this powerful technology. Finally, just for fun, I tried using ChatGPT to write this lesson for me. I didn’t end up going with the result but I think you’ll find it’s ideas pretty impressive! Links ChatGPT Chat Completion API (GPT 3.0 Turbo) Notion AI Bing AI Product Hunt ChatGPT Generated Video Script ? https://play.gumlet.io/embed/69c108b938a6314ac3957990 317 2023-04-13T05:00:00.000Z yes no https://vueschool.io/lessons/filter-data-on-a-vue-frontend-with-laravel-query-builder-from-spatie 2023-03-23T07:00:00.000Z https://video.gumlet.io/69c1bedac98b51e9c56406ac/69c1c2ff38a6314ac3a727f6/thumbnail-1-0.png?v=1774308119362 Filter Data on a Vue Frontend with Laravel Query Builder from Spatie 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. Links Laravel Query Builder Docs: Filtering qs - a JavaScript library that can parse and stringify nested objects https://play.gumlet.io/embed/69c1c2ff38a6314ac3a727f6 576 2023-03-23T07:00:00.000Z yes no https://vueschool.io/lessons/tweak-the-axios-base-url-for-best-dev-experience 2023-02-09T14:00:00.000Z https://video.gumlet.io/69c1bedac98b51e9c56406ac/69c1bef6c98b51e9c5640889/thumbnail-1-0.png?v=1774306203824 Tweak the Axios Base URL for Best Dev Experience 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 it can be easily overridden in different environments with a .env variable and to make this project wide configuration in a predictable location. Links Nuxt Docs: Runtime Config Axios Docs: Defaults https://play.gumlet.io/embed/69c1bef6c98b51e9c5640889 305 2023-02-09T14:00:00.000Z yes no https://vueschool.io/lessons/laravel-backends-for-vue-js-frontends-course-introduction 2023-01-26T14:00:00.000Z https://video.gumlet.io/69c1bedac98b51e9c56406ac/69c1bef638a6314ac3a6dfff/thumbnail-1-0.png?v=1774307120801 Laravel Backends for Vue.js Frontends Course Introduction ? Hello, and welcome to the course! Laravel is a powerful PHP framework that can be used in several different ways: It can render pages server side with PHP You can create a “modern monolith” with Inertia and Vue (or any other front-end framework for that matter) Or you can create a REST API with Laravel that’s consumed by a completely separate front-end application (a Vue SPA in our case). We’ll be going with option 3. In the course, you’ll learn all about using Vue.js to interact with a Laravel powered REST API. Links Laravel Inertia (Cool resource but not the approach we’re taking in this course) https://play.gumlet.io/embed/69c1bef638a6314ac3a6dfff 616 2023-01-26T14:00:00.000Z yes no https://vueschool.io/lessons/course-introduction 2023-01-23T17:46:00.000Z https://video.gumlet.io/6967a438e39380f186489abe/6967e929b25141dfa4d84121/thumbnail-1-0.png?v=1768417779530 Course Introduction Hello and welcome to the course ?! Prerequisite Courses Vue.js 3 Fundamentals Vue.js 3 Component Fundamentals https://play.gumlet.io/embed/6967e929b25141dfa4d84121 84 2023-01-23T17:46:00.000Z yes no https://vueschool.io/lessons/add-remove-columns 2023-01-19T14:00:00.000Z https://video.gumlet.io/69c02c734fe0bcfaae59f04d/69c030a6913220ae3bbc96ac/thumbnail-1-0.png?v=1774209257197 Edit, Add, and Remove Columns 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://play.gumlet.io/embed/69c030a6913220ae3bbc96ac 658 2023-01-19T14:00:00.000Z yes no https://vueschool.io/lessons/alt-drag-to-clone-tasks 2023-01-12T14:00:00.000Z https://video.gumlet.io/69c02c734fe0bcfaae59f04d/69c030a661788532c956674f/thumbnail-1-0.png?v=1774203811923 Alt Drag to Clone Tasks 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 with the useKeyModifiers composable from VueUse. Links VueUse Docs: useKeyModifier https://play.gumlet.io/embed/69c030a661788532c956674f 262 2023-01-12T14:00:00.000Z yes no https://vueschool.io/lessons/sort-the-columns-with-vue-draggable 2023-01-05T14:00:00.000Z https://video.gumlet.io/69c02c734fe0bcfaae59f04d/69c030a661788532c956674b/thumbnail-1-0.png?v=1774203758479 Sort the Columns with Vue Draggable 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 elements for each of the items in the array. Whenever the elements are dragged on the page, the array order updates accordingly. Links Vue Draggable https://play.gumlet.io/embed/69c030a661788532c956674b 361 2023-01-05T14:00:00.000Z yes no https://vueschool.io/lessons/create-a-task-component-and-style-it-with-tailwind-css 2023-01-05T14:00:00.000Z https://video.gumlet.io/69c02c734fe0bcfaae59f04d/69c030a64fe0bcfaae5a4ce2/thumbnail-1-0.png?v=1774206995561 Create a Task Component and Style it with Tailwind CSS 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. We also add a couple other UI elements including the button for adding new tasks and the page heading. https://play.gumlet.io/embed/69c030a64fe0bcfaae5a4ce2 501 2023-01-05T14:00:00.000Z yes no https://vueschool.io/lessons/bootstrap-the-project-trello-board 2022-12-29T14:00:00.000Z https://video.gumlet.io/69c02c734fe0bcfaae59f04d/69c02cb5913220ae3bbc3eee/thumbnail-1-0.png?v=1774203362112 Bootstrap the Project 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. Nuxt also provides SSR for Vue components but we won’t need that for this course. You can turn off server side rendering with the following setting. // nuxt.config.ts export default defineNuxtConfig({ ssr: false, // ⬅️ }); Links Vue Draggable Github Repo Vue Draggable Demo nanoid Nuxt Tailwind Module Nuxt VueUse Module Nuxt Docs: nuxt.config.ts https://play.gumlet.io/embed/69c02cb5913220ae3bbc3eee 303 2022-12-29T14:00:00.000Z yes no https://vueschool.io/lessons/what-we-are-building-trello-board 2022-12-29T14:00:00.000Z https://video.gumlet.io/69c02c734fe0bcfaae59f04d/69c02cb54fe0bcfaae59f5cb/thumbnail-1-0.png?v=1774202807190 What We Are Building Hello and welcome to the course! ? In this course, we’re going to build a Trello-style task board. This will give you the opportunity to: develop a drag-and-drop interface with Vue.js style an application with Tailwind CSS enhance an application with VueUse and build a simple yet robust real-world interface Links Trello Vue Draggable Github Repo Vue Draggable Demo Sortable JS VueUse Tailwind CSS https://play.gumlet.io/embed/69c02cb54fe0bcfaae59f5cb 200 2022-12-29T14:00:00.000Z yes no https://vueschool.io/lessons/robust-vue-js-forms-with-formkit-course-conclusion 2022-12-08T14:00:00.000Z https://video.gumlet.io/69bfd71b913220ae3bb572b1/69c2cca69ae74a342897cdda/thumbnail-1-0.png?v=1774374527270 Course Conclusion 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! Links FormKit Docs FormKit Docs: Community FormKit Docs: Playground FormKit Docs: Export and restructure inputs Vue School on Twitter https://play.gumlet.io/embed/69c2cca69ae74a342897cdda 244 2022-12-08T14:00:00.000Z yes no https://vueschool.io/lessons/create-a-tailwind-css-theme-for-formkit 2022-12-08T14:00:00.000Z https://video.gumlet.io/69bfd71b913220ae3bb572b1/69c2caaf4f62335fd44fe0b4/thumbnail-1-0.png?v=1774374464150 Create a Tailwind CSS Theme for FormKit 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. Links FormKit Docs: Create A Tailwind CSS Theme FormKit Docs: Styling https://play.gumlet.io/embed/69c2caaf4f62335fd44fe0b4 735 2022-12-08T14:00:00.000Z yes no https://vueschool.io/lessons/level-up-with-pro-inputs 2022-12-08T14:00:00.000Z https://video.gumlet.io/69bfd71b913220ae3bb572b1/69c2cca69ae74a342897cdcb/thumbnail-1-0.png?v=1774374970690 Level Up with Pro Inputs 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 free and open source and the pro offering helps keep it that way. Links FormKit Pro FormKit Docs: Repeater https://play.gumlet.io/embed/69c2cca69ae74a342897cdcb 720 2022-12-08T14:00:00.000Z yes no https://vueschool.io/lessons/create-a-custom-formkit-input 2022-12-08T14:00:00.000Z https://video.gumlet.io/69bfd71b913220ae3bb572b1/69c2cc334f62335fd4500625/thumbnail-1-0.png?v=1774374905009 Create a Custom FormKit Input In this lesson, we wrap the popular vue-multiselect component to make it compatible with FormKit. Links vue-multiselect FormKit Docs: Custom Inputs https://play.gumlet.io/embed/69c2cc334f62335fd4500625 542 2022-12-08T14:00:00.000Z yes no https://vueschool.io/lessons/how-to-validate-a-form-input 2022-11-24T14:00:00.000Z https://video.gumlet.io/69bfd71b913220ae3bb572b1/69c2caaf4f62335fd44fe0b2/thumbnail-1-0.png?v=1774374515364 How to Validate a Form Input 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 confirm_. Validation messages also show in a timely manner and directly under the input they describe. Furthermore, they disappear immediately after a user provides a valid value. Links FormKit Docs: Validation FormKit Docs: Available Rules https://play.gumlet.io/embed/69c2caaf4f62335fd44fe0b2 505 2022-11-24T14:00:00.000Z yes no https://vueschool.io/lessons/customize-the-form-with-props 2022-11-24T14:00:00.000Z https://video.gumlet.io/69bfd71b913220ae3bb572b1/69c2caaf531f7f7b6cec048f/thumbnail-1-0.png?v=1774374091678 Customize the Form with Props In this lesson, we’ll customize the form further with some useful props like submit-behavior and submit-label. Links FormKit Docs: Forms https://play.gumlet.io/embed/69c2caaf531f7f7b6cec048f 196 2022-11-24T14:00:00.000Z yes no https://vueschool.io/lessons/form-population-and-submission 2022-11-24T14:00:00.000Z https://video.gumlet.io/69bfd71b913220ae3bb572b1/69c2caaf9ae74a3428979bb9/thumbnail-1-0.png?v=1774374169282 Form Population and Submission In this lesson, we use FormKit to generate a form with built in support for initial values, submit handling, and smart submission states. Links Lesson Start Commit (Copy green code from here to start at same place as video) FormKit Docs: Forms https://play.gumlet.io/embed/69c2caaf9ae74a3428979bb9 460 2022-11-24T14:00:00.000Z yes no https://vueschool.io/lessons/powerful-form-fields-with-a-simple-api 2022-11-24T14:00:00.000Z https://video.gumlet.io/69bfd71b913220ae3bb572b1/69c2caaf531f7f7b6cec0487/thumbnail-1-0.png?v=1774374356810 Powerful Form Fields with a Simple API In this lesson, we create our first form inputs with FormKit. Using the FormKit component provides a consistent interface for all input types. The FormKit component also comes with many useful props to like help, validation, and more! Finally, we can override FormKit’s smart defaults for ultimate customization with section classes and slots. Links FormKit Docs: Input Sections FormKit Docs: Input Slots https://play.gumlet.io/embed/69c2caaf531f7f7b6cec0487 518 2022-11-24T14:00:00.000Z yes no https://vueschool.io/lessons/project-setup-and-formkit-config 2022-11-24T14:00:00.000Z https://video.gumlet.io/69bfd71b913220ae3bb572b1/69c2caaf531f7f7b6cec0496/thumbnail-1-0.png?v=1774374203328 Project Setup and FormKit Config In this lesson, we create a new Nuxt 3 project in which to work with FormKit. You can create the project locally by running: npx nuxi init [project-name] Or you can follow along in the browser by creating a new Nuxt application in StackBlitz. To install the FormKit Nuxt module run: npm install @formkit/nuxt Links nuxt.new Nuxt Docs FormKit Docs: Installation https://play.gumlet.io/embed/69c2caaf531f7f7b6cec0496 251 2022-11-24T14:00:00.000Z yes no https://vueschool.io/lessons/introduction-to-formkit 2022-11-24T14:00:00.000Z https://video.gumlet.io/69bfd71b913220ae3bb572b1/69c2caaf531f7f7b6cec0485/thumbnail-1-0.png?v=1774374111335 Introduction to FormKit 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 called FormKit. FormKit is a self-proclaimed “framework” that simplifies form structure, generation, validation, theming, submission, error handling, and more. Links FormKit https://play.gumlet.io/embed/69c2caaf531f7f7b6cec0485 200 2022-11-24T14:00:00.000Z yes no https://vueschool.io/lessons/improve-the-sum-function 2022-11-03T13:00:00.000Z https://video.gumlet.io/6967a80db25141dfa4d02763/69ab4ac206a15537d0519cff/thumbnail-1-0.png?v=1772833899173 Improve the Sum Function In this lesson, improve our sum function to be more robust and learn about Vitest's watch mode for super fast feedback. https://play.gumlet.io/embed/69ab4ac206a15537d0519cff 205 2022-11-03T13:00:00.000Z yes no https://vueschool.io/lessons/your-first-test 2022-11-03T13:00:00.000Z https://video.gumlet.io/6967a80db25141dfa4d02763/69ab4ac206a15537d0519d02/thumbnail-1-0.png?v=1772833777354 Your First Test In this lesson, get started writing your first test in Vitest! Create a simple sum function and test it with Vitest. https://play.gumlet.io/embed/69ab4ac206a15537d0519d02 175 2022-11-03T13:00:00.000Z yes no https://vueschool.io/lessons/how-to-install-vitest 2022-11-03T13:00:00.000Z https://video.gumlet.io/6967a80db25141dfa4d02763/69ab4ac2bb772793aa1a06c6/thumbnail-1-0.png?v=1772833748448 How to Install Vitest In this lesson, learn how to install Vitest manually or via the official Vue starter template. Links Vitest Docs: Adding Vitest to your Project Vue.js Docs: Create a Vue Application https://play.gumlet.io/embed/69ab4ac2bb772793aa1a06c6 199 2022-11-03T13:00:00.000Z yes no https://vueschool.io/lessons/introduction-to-vitest 2022-11-03T13:00:00.000Z https://video.gumlet.io/6967a80db25141dfa4d02763/69ab4ac28b86e9ed04af55d8/thumbnail-1-0.png?v=1772833775705 Introduction to Vitest 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. Links Vitest Docs antfu.me https://play.gumlet.io/embed/69ab4ac28b86e9ed04af55d8 103 2022-11-03T13:00:00.000Z yes no https://vueschool.io/lessons/hybrid-rendering-with-nuxt 2022-10-27T12:00:00.000Z https://video.gumlet.io/68b6f5a96a218061ab345f85/68b6f6ef373a93b510470994/thumbnail-1-0.png?v=1757949349847 Hybrid Rendering with Nuxt 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 application and make some pages an SPA, other pages static (indefinitely or with SWR), and other pages SSR. This is known as "Hybrid Rendering”. Links Nuxt Docs: Hybrid Rendering https://play.gumlet.io/embed/68b6f6ef373a93b510470994 641 2022-10-27T12:00:00.000Z yes no https://vueschool.io/lessons/nuxt-server-api-routes 2022-10-27T12:00:00.000Z https://video.gumlet.io/68b6f5a96a218061ab345f85/68b6f6d5373a93b5104707be/thumbnail-1-0.png?v=1757948001366 Nuxt Server API Routes 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 coerce data to the proper format. Under the hood, Nuxt uses the unjs softwares Nitro and h3. Links Nuxt Docs - Server Directory Nitro h3 github repo h3 docs https://play.gumlet.io/embed/68b6f6d5373a93b5104707be 294 2022-10-27T12:00:00.000Z yes no https://vueschool.io/lessons/define-nuxt-route-middleware 2022-10-20T12:00:00.000Z https://video.gumlet.io/68b6f5a96a218061ab345f85/68b6f6c3b21dc579f88ef418/thumbnail-1-0.png?v=1757947150181 Define Nuxt Route Middleware In this lesson, we learn how to run code before navigation with Nuxt’s route middleware. There are 3 kinds of route middleware: inline route middleware named route middleware and global route middleware Links Nuxt Docs: Route Middleware https://play.gumlet.io/embed/68b6f6c3b21dc579f88ef418 381 2022-10-20T12:00:00.000Z yes no https://vueschool.io/lessons/fetch-data-with-fetch 2022-10-06T13:02:00.000Z https://video.gumlet.io/68b6f5a96a218061ab345f85/68b6f6796a218061ab346e7a/thumbnail-1-0.png?v=1757945733918 Fetch Data with $fetch 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. Links OMDB API Nuxt Docs: $fetch https://play.gumlet.io/embed/68b6f6796a218061ab346e7a 562 2022-10-06T13:02:00.000Z yes no https://vueschool.io/lessons/dynamic-route-params-in-nuxt-js 2022-10-06T13:02:00.000Z https://video.gumlet.io/68b6f5a96a218061ab345f85/68b6f679373a93b510470115/thumbnail-1-0.png?v=1757945658308 Dynamic Route Params in Nuxt.js 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. Links Nuxt Docs: Dynamic Routes https://play.gumlet.io/embed/68b6f679373a93b510470115 327 2022-10-06T13:02:00.000Z yes no https://vueschool.io/lessons/what-is-nuxt 2022-10-06T13:02:00.000Z https://video.gumlet.io/68b6f5a96a218061ab345f85/68b6f679b21dc579f88eee84/thumbnail-1-0.png?v=1757945384050 What is Nuxt? 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: A variety of rendering modes and a developer conveniences The various rendering modes for Nuxt make it extremely versatile and the developer convenience features make working with Nuxt a delight. Links Nuxt 3 Docs Icons in this video are by Font Awesome https://play.gumlet.io/embed/68b6f679b21dc579f88eee84 438 2022-10-06T13:02:00.000Z yes no https://vueschool.io/lessons/typesafe-plugin-options-with-typescript 2022-09-29T12:00:00.000Z https://video.gumlet.io/69bfd742913220ae3bb576d1/69c2c81f9ae74a3428975bcf/thumbnail-1-0.png?v=1774374407081 Typesafe Plugin Options with TypeScript 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. Links Changes made to Prep Project for TS (Commit in Github) Lesson Starting Point (with TS changes in Stackblitz) https://play.gumlet.io/embed/69c2c81f9ae74a3428975bcf 467 2022-09-29T12:00:00.000Z yes no https://vueschool.io/lessons/use-onupdated-to-make-the-tooltip-reactive 2022-09-15T12:00:00.000Z https://video.gumlet.io/69bfd742913220ae3bb576d1/69c2c77d9ae74a3428974afc/thumbnail-1-0.png?v=1774373690890 Use onUpdated to Make the ToolTip Reactive 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 Vue plugin. https://play.gumlet.io/embed/69c2c77d9ae74a3428974afc 251 2022-09-15T12:00:00.000Z yes no https://vueschool.io/lessons/define-and-install-a-vue-js-plugin 2022-09-15T12:00:00.000Z https://video.gumlet.io/69bfd742913220ae3bb576d1/69c2c77d531f7f7b6cebb394/thumbnail-1-0.png?v=1774373654533 Define and Install a Vue.js Plugin 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 .use(). Links Vue.js Docs: Plugins Boilerplate Code on Stackblitz https://play.gumlet.io/embed/69c2c77d531f7f7b6cebb394 164 2022-09-15T12:00:00.000Z yes no https://vueschool.io/lessons/what-is-a-vue-js-plugin 2022-09-15T13:05:00.000Z https://video.gumlet.io/69bfd742913220ae3bb576d1/69c2c77d531f7f7b6cebb396/thumbnail-1-0.png?v=1774373661942 What is a Vue.js Plugin? 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. Officially supported plugins include: Pinia and Vue Router Some Useful 3rd party plugins include: Floating Vue Formkit PrimeVue and Vuetify https://play.gumlet.io/embed/69c2c77d531f7f7b6cebb396 204 2022-09-15T13:05:00.000Z yes no https://vueschool.io/lessons/click-outside-directive-1 2022-09-08T12:00:00.000Z https://video.gumlet.io/69bfd69b913220ae3bb5680e/69c076bdc98b51e9c54924f8/thumbnail-1-0.png?v=1774254701337 Click Outside Directive 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. Remember to always clean up your mess in the unmounted hook! https://play.gumlet.io/embed/69c076bdc98b51e9c54924f8 248 2022-09-08T12:00:00.000Z yes no https://vueschool.io/lessons/vue-3-understanding-vue-js-directives 2022-09-01T12:00:00.000Z https://video.gumlet.io/69bfd69b913220ae3bb5680e/69c076bcc98b51e9c54924db/thumbnail-1-0.png?v=1774221445580 Understanding Vue.js Directives 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 can be modified with modifiers. Links Vue.js Docs: Custom Directives https://play.gumlet.io/embed/69c076bcc98b51e9c54924db 155 2022-09-01T12:00:00.000Z yes no https://vueschool.io/lessons/only-show-published-content-on-the-live-site 2022-08-18T12:00:00.000Z https://video.gumlet.io/69bfd5854fe0bcfaae530b2d/69c2c626531f7f7b6ceb8fee/thumbnail-1-0.png?v=1774373442095 Only Show Published Content on the Live Site 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://play.gumlet.io/embed/69c2c626531f7f7b6ceb8fee 169 2022-08-18T12:00:00.000Z yes no https://vueschool.io/lessons/preview-the-live-site 2022-08-18T12:00:00.000Z https://video.gumlet.io/69bfd5854fe0bcfaae530b2d/69c2c6064f62335fd44f6872/thumbnail-1-0.png?v=1774373590521 Preview the Live Site in the Storyblok Editor 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. Links Storyblok Query Parameters Netlify Redirects https://play.gumlet.io/embed/69c2c6064f62335fd44f6872 456 2022-08-18T12:00:00.000Z yes no https://vueschool.io/lessons/fallback-content-for-new-projects 2022-08-04T12:00:00.000Z https://video.gumlet.io/69bfd5854fe0bcfaae530b2d/69c2c4789ae74a342896f7df/thumbnail-1-0.png?v=1774373293697 Fallback Content for New Projects 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://play.gumlet.io/embed/69c2c4789ae74a342896f7df 236 2022-08-04T12:00:00.000Z yes no https://vueschool.io/lessons/jamstack-the-complete-guide-course-conclusion 2022-07-20T15:00:00.000Z https://video.gumlet.io/69bfd5854fe0bcfaae530b2d/69c2c64f4f62335fd44f7076/thumbnail-1-0.png?v=1774373337199 Course Conclusion Thanks for watching! We hope you enjoyed the course and are now better prepared to work on the Jamstack with both Nuxt and Storyblok. Links Nuxt Github Repo Storyblok Community Project on Stackblitz https://play.gumlet.io/embed/69c2c64f4f62335fd44f7076 76 2022-07-20T15:00:00.000Z yes no https://vueschool.io/lessons/workflows-device-previews-and-the-app-directory 2022-07-20T15:00:00.000Z https://video.gumlet.io/69bfd5854fe0bcfaae530b2d/69c2c64e9ae74a3428972af9/thumbnail-1-0.png?v=1774373346577 Workflows, Device Previews, and the App Directory 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. Links Storyblok Docs: Basic Workflows Storyblok Docs: Commenting and Discussions Storyblok App Store https://play.gumlet.io/embed/69c2c64e9ae74a3428972af9 166 2022-07-20T15:00:00.000Z yes no https://vueschool.io/lessons/trigger-rebuilds-in-netlify-when-content-changes 2022-07-20T15:00:00.000Z https://video.gumlet.io/69bfd5854fe0bcfaae530b2d/69c2c6264f62335fd44f6be6/thumbnail-1-0.png?v=1774373441929 Trigger Rebuilds in Netlify when Content Changes 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 and an outgoing webhook in Storyblok. Links Storyblok Docs: Webhooks Netlify Docs: Build Hooks https://play.gumlet.io/embed/69c2c6264f62335fd44f6be6 215 2022-07-20T15:00:00.000Z yes no https://vueschool.io/lessons/deploy-a-storyblok-nuxt-3-site-to-netlify 2022-07-20T15:00:00.000Z https://video.gumlet.io/69bfd5854fe0bcfaae530b2d/69c2c5d44f62335fd44f634f/thumbnail-1-0.png?v=1774373403698 Deploy a Storyblok + Nuxt 3 Site to Netlify 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 service. Plus, it’s great for our end users, since it serves our static files from a CDN with servers all over the world. Links Netlify How to Push Code to Github Git Basics https://play.gumlet.io/embed/69c2c5d44f62335fd44f634f 266 2022-07-20T15:00:00.000Z yes no https://vueschool.io/lessons/generate-a-static-site-with-nuxt-3 2022-07-20T15:00:00.000Z https://video.gumlet.io/69bfd5854fe0bcfaae530b2d/69c2c5d34f62335fd44f6334/thumbnail-1-0.png?v=1774373541805 Generate a Static Site with Nuxt 3 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, in order to witness the Jamstack’s performance benefits for ourselves. Links What is Google Lighthouse and How to Use it https://play.gumlet.io/embed/69c2c5d34f62335fd44f6334 369 2022-07-20T15:00:00.000Z yes no https://vueschool.io/lessons/content-reusability-with-presets 2022-07-20T15:00:00.000Z https://video.gumlet.io/69bfd5854fe0bcfaae530b2d/69c2c4789ae74a342896f7ea/thumbnail-1-0.png?v=1774373327773 Content Reusability with Presets 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 another form of content re-usability with it's presets feature. Storyblok presets allow you to define blok content as the default values for future bloks and it's super handy! https://play.gumlet.io/embed/69c2c4789ae74a342896f7ea 254 2022-07-20T15:00:00.000Z yes no https://vueschool.io/lessons/related-content 2022-07-20T15:00:00.000Z https://video.gumlet.io/69bfd5854fe0bcfaae530b2d/69c2c478531f7f7b6ceb5ecf/thumbnail-1-0.png?v=1774373555431 Add Featured Projects to the Homepage 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_relations option for including all the related data in a single request. https://play.gumlet.io/embed/69c2c478531f7f7b6ceb5ecf 613 2022-07-20T15:00:00.000Z yes no https://vueschool.io/lessons/content-type-blocks 2022-07-20T15:00:00.000Z https://video.gumlet.io/69bfd5854fe0bcfaae530b2d/69c2c4784f62335fd44f3cf6/thumbnail-1-0.png?v=1774373856251 Storyblok Content Type Blocks 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. We also learn how to create a page with a dynamic route param in Nuxt to display individual projects. Links Nuxt Pages Directory Docs https://play.gumlet.io/embed/69c2c4784f62335fd44f3cf6 692 2022-07-20T15:00:00.000Z yes no https://vueschool.io/lessons/consume-site-content-with-nuxt 2022-07-20T15:00:00.000Z https://video.gumlet.io/69bfd5854fe0bcfaae530b2d/69c2c4784f62335fd44f3cde/thumbnail-1-0.png?v=1774373383165 Consume Storyblok Content with Nuxt 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. In the process, we’re introduced to the StoryblokComponent and the v-editable directive. Finally, we learn about the “Real Path” setting for configuring our home page route to the root path. Links CSS Stylesheet https://play.gumlet.io/embed/69c2c4784f62335fd44f3cde 601 2022-07-20T15:00:00.000Z yes no https://vueschool.io/lessons/create-a-hero-block-in-storyblok 2022-07-20T15:00:00.000Z https://video.gumlet.io/69bfd5854fe0bcfaae530b2d/69c2c4784f62335fd44f3ce0/thumbnail-1-0.png?v=1774373149766 Create a Hero Block in Storyblok 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 groups of content that contain particular fields, for use in composing stories. Links Storyblok - Structures of Content Balsamiq https://play.gumlet.io/embed/69c2c4784f62335fd44f3ce0 335 2022-07-20T15:00:00.000Z yes no https://vueschool.io/lessons/hello-storyblok 2022-07-20T15:00:00.000Z https://video.gumlet.io/69bfd5854fe0bcfaae530b2d/69c2c478531f7f7b6ceb5ec2/thumbnail-1-0.png?v=1774373321038 Hello Storyblok 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 in order to see live previews in action! If you'd like to bundle up the dev server and the proxy into a single command you can follow the instructions in this post by Storyblok on Settting Up HTTS on localhost in Nuxt 3. Alternately, you could do what I did in this commit. Links Storyblok Setup Dev Server HTTPS (Mac) Setup Dev Server HTTPS (Windows) Setting Up HTTPS on localhost in Nuxt 3 https://play.gumlet.io/embed/69c2c478531f7f7b6ceb5ec2 453 2022-07-20T15:00:00.000Z yes no https://vueschool.io/lessons/hello-nuxt 2022-07-20T15:00:00.000Z https://video.gumlet.io/69bfd5854fe0bcfaae530b2d/69c2c478531f7f7b6ceb5ec0/thumbnail-1-0.png?v=1774373060262 Hello Nuxt 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. npx nuxi init jamstack-course After creating the project, we install the only dependency needed to hook-up storyblock: The official Storyblok Nuxt module. npm install @storyblok/nuxt https://play.gumlet.io/embed/69c2c478531f7f7b6ceb5ec0 237 2022-07-20T15:00:00.000Z yes no https://vueschool.io/lessons/static-site-generators-for-the-jamstack 2022-07-20T15:00:00.000Z https://video.gumlet.io/69bfd5854fe0bcfaae530b2d/69c2c4784f62335fd44f3cdc/thumbnail-1-0.png?v=1774373179509 Static Site Generators for the Jamstack 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, Vuepress, and more. Lastly, we’ll settle in on Nuxt and talk about why it’s the choice SSG for our build. Links Registery of Generators https://play.gumlet.io/embed/69c2c4784f62335fd44f3cdc 262 2022-07-20T15:00:00.000Z yes no https://vueschool.io/lessons/the-jamstack-toolbelt 2022-07-20T15:00:00.000Z https://video.gumlet.io/69bfd5854fe0bcfaae530b2d/69c2c4789ae74a342896f7d1/thumbnail-1-0.png?v=1774373253785 The Jamstack Toolbelt 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 important is getting a good feel for the breadth of available tools. Links Jamstack Tools https://play.gumlet.io/embed/69c2c4789ae74a342896f7d1 330 2022-07-20T15:00:00.000Z yes no https://vueschool.io/lessons/what-is-the-jamstack 2022-07-20T15:00:00.000Z https://video.gumlet.io/69bfd5854fe0bcfaae530b2d/69c2c4789ae74a342896f7cf/thumbnail-1-0.png?v=1774373610729 What is the Jamstack? 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 it’s numerous benefits, including optimized performance, higher security, better scalability, improved developer experience, and more! Links Storyblok Nuxt.js jamstack.org How Smashing Magazine Manages Content: Migration From WordPress To Jamstack Icons in this video are by Font Awesome https://play.gumlet.io/embed/69c2c4789ae74a342896f7cf 386 2022-07-20T15:00:00.000Z yes no https://vueschool.io/lessons/debugging-vue-apps-in-vs-code 2022-05-26T12:00:00.000Z https://video.gumlet.io/6967a988b25141dfa4d05172/69ab7e3206a15537d0559417/thumbnail-1-0.png?v=1772847711447 Debugging Vue Apps in VS Code In this lesson, you learn how to setup Visual Studio Code’s “Javascript Debugger” and how to use it to do basic debugging. Links VS Code Docs: Debugging JSON Placeholder JSON Placeholder Posts URL https://play.gumlet.io/embed/69ab7e3206a15537d0559417 793 2022-05-26T12:00:00.000Z yes no https://vueschool.io/lessons/volar-the-official-language-feature-extension-for-vs-code 2022-05-19T12:00:00.000Z https://video.gumlet.io/6967a988b25141dfa4d05172/69ab7bd1bb772793aa1dd660/thumbnail-1-0.png?v=1772847529207 The Official Language Feature Extension for VS Code 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’re used to in other file types like .html or .js files. Links Vue - Official Extension on Visual Studio Marketplace Extension Repo on Github Keyboard Shortcuts Rename Symbol F2 (Mac) F2 (Windows) Open Command Palette Cmd+Shift+P (Mac) Ctr+Shift+P (Windows) https://play.gumlet.io/embed/69ab7bd1bb772793aa1dd660 449 2022-05-19T12:00:00.000Z yes no https://vueschool.io/lessons/intro-to-visual-studio-code 2022-05-12T12:00:00.000Z https://video.gumlet.io/6967a988b25141dfa4d05172/69ab7bd18b86e9ed04b325fe/thumbnail-1-0.png?v=1772846652652 Intro to Visual Studio Code ? 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! Visual Studio code is a powerful and popular open source code editor (IDE) from Microsoft and it’s the officially recommended editor by the Vue.js docs. Learn how to wield a variety of extensions, keyboard shortcuts, editor settings, and themes to optimize your Vue.js development. Links Visual Studio Code Vue.js Official Recommendation VS Code Extensions https://play.gumlet.io/embed/69ab7bd18b86e9ed04b325fe 198 2022-05-12T12:00:00.000Z yes no https://vueschool.io/lessons/create-an-image-carousel-with-vueuse 2022-04-28T12:00:00.000Z https://video.gumlet.io/6967aac66a1e75f7ab3e8214/69c11554c98b51e9c553df62/thumbnail-1-0.png?v=1774261964833 Create an Image Carousel with VueUse 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 various applications for your Vue.js projects. Links useCycleList - Start | End | Docs Vue.js Docs: Transitions https://play.gumlet.io/embed/69c11554c98b51e9c553df62 254 2022-04-28T12:00:00.000Z yes no https://vueschool.io/lessons/vueuse-utilities-usefetch-and-reactify 2022-04-21T12:00:00.000Z https://video.gumlet.io/6967aac66a1e75f7ab3e8214/69c11505c98b51e9c553d7bf/thumbnail-1-0.png?v=1774262158547 VueUse Utilities: useFetch and Reactify 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. Both functions bring some handy re-usability to your Vue.js applications. Links useFetch - Start | End | Docs reactify - Start | End | Docs https://play.gumlet.io/embed/69c11505c98b51e9c553d7bf 502 2022-04-21T12:00:00.000Z yes no https://vueschool.io/lessons/ref-history-with-vueuse 2022-04-21T12:00:00.000Z https://video.gumlet.io/6967aac66a1e75f7ab3e8214/69c114b624ffd038ef6d504a/thumbnail-1-0.png?v=1774262148269 Ref History with VueUse In this lesson, we learn how to keep up with the value of a reactive ref over time with the useRefHistory composable. Links useRefHistory - Start | End | Docs useDebouncedRefHistory - Docs https://play.gumlet.io/embed/69c114b624ffd038ef6d504a 524 2022-04-21T12:00:00.000Z yes no https://vueschool.io/lessons/the-keyboard-and-vueuse 2022-04-07T12:00:00.000Z https://video.gumlet.io/6967aac66a1e75f7ab3e8214/69c1125f38a6314ac396616b/thumbnail-1-0.png?v=1774261441515 The Keyboard and VueUse 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. Links onKeyStroke - Start | End | Docs https://play.gumlet.io/embed/69c1125f38a6314ac396616b 367 2022-04-07T12:00:00.000Z yes no https://vueschool.io/lessons/theming-with-vueuse-usedark-and-usecolormode 2022-03-31T12:00:00.000Z https://video.gumlet.io/6967aac66a1e75f7ab3e8214/69c1126024ffd038ef6d18db/thumbnail-1-0.png?v=1774261572454 Theming with VueUse useDark and useColorMode 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 the useDark and useColorMode composables which utilize local storage and system preferences to make dynamic themes a breeze for your Vue.js app. Links useDark - Start | End | Docs useColorMode - Start | End | Docs https://play.gumlet.io/embed/69c1126024ffd038ef6d18db 402 2022-03-31T12:00:00.000Z yes no https://vueschool.io/lessons/reactive-browser-wrappers-in-vueuse-useclipboard 2022-03-31T12:00:00.000Z https://video.gumlet.io/6967aac66a1e75f7ab3e8214/69c1125fc98b51e9c55398fb/thumbnail-1-0.png?v=1774261421923 Reactive Browser Wrappers in Vueuse - useClipboard 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. Links useClipboard - Start | End | Docs https://play.gumlet.io/embed/69c1125fc98b51e9c55398fb 245 2022-03-31T12:00:00.000Z yes no https://vueschool.io/lessons/intro-to-vueuse 2022-03-31T12:00:00.000Z https://video.gumlet.io/6967aac66a1e75f7ab3e8214/69c11260c98b51e9c5539905/thumbnail-1-0.png?v=1774261568091 Intro to VueUse VueUse is a collection of hundreds of essential Vue Composition Utilities for interacting with various browser, sensor, animation, and state apis, plus more! In this course, we’ll sample some hand picked functions from each category to give you an idea of what’s possible with VueUse and hopefully wet your appetite to utilize VueUse in your own projects. Links VueUse Docs https://play.gumlet.io/embed/69c11260c98b51e9c5539905 224 2022-03-31T12:00:00.000Z yes no https://vueschool.io/lessons/the-vue-application-instance 2022-03-09T16:15:00.000Z https://video.gumlet.io/68b6ef43b21dc579f88e6563/68b6ef91373a93b510467ed8/thumbnail-1-0.png?v=1759852189140 The Vue Application Instance 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 project now, we can see how it works by looking at the generated main.js file. Links Vue Docs: Creating a Vue Application Vue 3 Components Fundamentals Course https://play.gumlet.io/embed/68b6ef91373a93b510467ed8 200 2022-03-09T16:15:00.000Z yes no https://vueschool.io/lessons/using-typescript-with-the-options-api-in-components 2022-03-24T13:00:00.000Z https://video.gumlet.io/6967a2ade39380f186486b2f/6967b428b25141dfa4d1990f/thumbnail-1-0.png?v=1768411158370 Using TypeScript with the Options API in Components 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. Links Vue Docs: TypeScript with the Options API https://play.gumlet.io/embed/6967b428b25141dfa4d1990f 319 2022-03-24T13:00:00.000Z yes no https://vueschool.io/lessons/declaring-and-typing-component-props 2022-03-17T13:00:00.000Z https://video.gumlet.io/6967a2ade39380f186486b2f/6967b364b25141dfa4d1847b/thumbnail-1-0.png?v=1768408706477 Declaring and Typing Component Props 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 those components. Links Vue Docs: Typing Component Props https://play.gumlet.io/embed/6967b364b25141dfa4d1847b 587 2022-03-17T13:00:00.000Z yes no https://vueschool.io/lessons/typing-component-events 2022-03-17T13:00:00.000Z https://video.gumlet.io/6967a2ade39380f186486b2f/6967b1e1b25141dfa4d15624/thumbnail-1-0.png?v=1768415449570 Typing Component Events In this lesson, we learn how to type the payload of component events in Vue and TypeScript. Links Vue Docs: Typing Component Emits Define Emits VS Code Snippet https://play.gumlet.io/embed/6967b1e1b25141dfa4d15624 320 2022-03-17T13:00:00.000Z yes no https://vueschool.io/lessons/typescript-in-vue-components 2022-03-03T14:00:00.000Z https://video.gumlet.io/6967a2ade39380f186486b2f/6967b1e1e39380f1864a3ac1/thumbnail-1-0.png?v=1768406718430 TypeScript in Vue Components In this lesson, we learn how to direct Vue Single File Components to work with typescript. Links Vue Docs: TypeScript Usage in Single File Components https://play.gumlet.io/embed/6967b1e1e39380f1864a3ac1 130 2022-03-03T14:00:00.000Z yes no https://vueschool.io/lessons/introduction-to-typescript-with-vue-js-3 2022-03-03T14:00:00.000Z https://vueschool.io/storage/0RX9LeZsFLWd8Y4j21BQGsj4Npvv8p7CfRPpWzYQ.avif Introduction to TypeScript with Vue.js 3 In this lesson, we take a look at some of the benefits of using TypeScript with Vue.js including: Improved error detection in your IDE and at build time Safer and less stressful refactoring More focused and accurate IDE autocompletion We also answer the question: “Are there any cases when you wouldn’t want to use TypeScript?”. Links Vue.js 3 Fundamentals with the Composition API https://play.gumlet.io/embed/6967b1e1b25141dfa4d15606 333 2022-03-03T14:00:00.000Z yes no https://vueschool.io/lessons/vue-router-4-dynamic-routing 2022-02-22T15:40:00.000Z https://video.gumlet.io/68b6f1d3373a93b51046a9ac/68b6f541373a93b51046e9d4/thumbnail-1-0.png?v=1757694556334 Dynamic Routing In this lesson, we learn how to dynamically add or remove routes to Vue Router while the application is already running. https://play.gumlet.io/embed/68b6f541373a93b51046e9d4 284 2022-02-22T15:40:00.000Z yes no https://vueschool.io/lessons/vue-router-4-advanced-routes-matching-syntax 2022-02-22T15:40:00.000Z https://video.gumlet.io/68b6f1d3373a93b51046a9ac/68b6f538373a93b51046e8fb/thumbnail-1-0.png?v=1757694482717 Advanced Routes’ Matching Syntax 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://play.gumlet.io/embed/68b6f538373a93b51046e8fb 336 2022-02-22T15:40:00.000Z yes no https://vueschool.io/lessons/vue-router-4-detecting-navigation-failures 2022-02-22T15:40:00.000Z https://video.gumlet.io/68b6f1d3373a93b51046a9ac/68b6f5376a218061ab34566a/thumbnail-1-0.png?v=1757694422581 Detecting Navigation Failures 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 the reason for failure. https://play.gumlet.io/embed/68b6f5376a218061ab34566a 268 2022-02-22T15:40:00.000Z yes no https://vueschool.io/lessons/vue-router-4-redirect-and-alias 2022-02-22T15:40:00.000Z https://video.gumlet.io/68b6f1d3373a93b51046a9ac/68b6f537373a93b51046e8e4/thumbnail-1-0.png?v=1757694371881 Redirect and Alias In this lesson, we learn more about using the redirect and alias route properties for handling alternate urls. https://play.gumlet.io/embed/68b6f537373a93b51046e8e4 145 2022-02-22T15:40:00.000Z yes no https://vueschool.io/lessons/vue-router-4-named-views 2022-02-22T15:40:00.000Z https://video.gumlet.io/68b6f1d3373a93b51046a9ac/68b6f52f6a218061ab3455a5/thumbnail-1-0.png?v=1757694322894 Named Views In this lesson, we learn how to utilize named views in order to compose custom layouts per route. https://play.gumlet.io/embed/68b6f52f6a218061ab3455a5 312 2022-02-22T15:40:00.000Z yes no https://vueschool.io/lessons/vue-router-4-programmatic-navigation 2022-02-22T15:40:00.000Z https://video.gumlet.io/68b6f1d3373a93b51046a9ac/68b6f52eb21dc579f88ed57f/thumbnail-1-0.png?v=1757694268577 Programmatic Navigation In this lesson, we learn about using $router.push and $router.replace to navigate to different routes programmatically. https://play.gumlet.io/embed/68b6f52eb21dc579f88ed57f 286 2022-02-22T15:40:00.000Z yes no https://vueschool.io/lessons/vue-router-4-bonus-lessons 2022-02-22T15:40:00.000Z https://video.gumlet.io/68b6f1d3373a93b51046a9ac/68b6f52bb21dc579f88ed54d/thumbnail-1-0.png?v=1757694214501 Bonus Lessons In this chapter, we provide some more lessons to give you an even more thorough understanding of what’s possible with Vue Router. https://play.gumlet.io/embed/68b6f52bb21dc579f88ed54d 49 2022-02-22T15:40:00.000Z yes no https://vueschool.io/lessons/access-pinia-getters-in-the-options-api 2022-02-17T14:00:00.000Z https://video.gumlet.io/6964d86e6a1e75f7abf5b5b0/6964d91b6a1e75f7abf5c6ad/thumbnail-1-0.png?v=1770047699651 Access Pinia Getters in the Options API 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. Links Pinia Docs: Getters Usage with the Options API https://play.gumlet.io/embed/6964d91b6a1e75f7abf5c6ad 114 2022-02-17T14:00:00.000Z yes no https://vueschool.io/lessons/access-pinia-actions-in-the-options-api 2022-02-17T15:03:00.000Z https://video.gumlet.io/6964d86e6a1e75f7abf5b5b0/6964d91b6a1e75f7abf5c6c6/thumbnail-1-0.png?v=1768217153379 Access Pinia Actions in the Options API In this lesson, we learn how to call actions from a Pinia store in a Vue.js component setup with the options API. Links Pinia Docs: Actions - Usage with the Options API https://play.gumlet.io/embed/6964d91b6a1e75f7abf5c6c6 172 2022-02-17T15:03:00.000Z yes no https://vueschool.io/lessons/access-pinia-state-in-the-options-api 2022-02-17T15:03:00.000Z https://video.gumlet.io/6964d86e6a1e75f7abf5b5b0/6964d917b25141dfa4878f9a/thumbnail-1-0.png?v=1770047596470 Access Pinia State in the Options API 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. Links Pinia Docs: State - Usage with the Options API https://play.gumlet.io/embed/6964d917b25141dfa4878f9a 397 2022-02-17T15:03:00.000Z yes no https://vueschool.io/lessons/getters-in-pinia 2022-02-10T14:00:00.000Z https://video.gumlet.io/6964d86e6a1e75f7abf5b5b0/6964d8ed6a1e75f7abf5c1ca/thumbnail-1-0.png?v=1768217255714 Getters in Pinia In this lesson, we learn about using getters in Pinia to provide computed data based on the state of the store. With this handy feature we’re able to get our Vue.js powered Pineapple Stand showing the correct item count in the cart and show a empty cart message when there are no items. Links Pinia Docs: Getters https://play.gumlet.io/embed/6964d8ed6a1e75f7abf5c1ca 397 2022-02-10T14:00:00.000Z yes no https://vueschool.io/lessons/synchronous-and-asynchronous-actions-in-pinia 2022-02-03T14:00:00.000Z https://video.gumlet.io/6964d86e6a1e75f7abf5b5b0/6964d8edb25141dfa4878af8/thumbnail-1-0.png?v=1768217133713 Synchronous and Asynchronous Actions in Pinia 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 API and then used to fill the store. https://play.gumlet.io/embed/6964d8edb25141dfa4878af8 187 2022-02-03T14:00:00.000Z yes no https://vueschool.io/lessons/access-state-from-a-pinia-store 2022-02-03T14:00:00.000Z https://video.gumlet.io/6964d86e6a1e75f7abf5b5b0/6964d8ede39380f1860070ea/thumbnail-1-0.png?v=1768217073919 Access State from a Pinia Store 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. Links Pinia Docs: State https://play.gumlet.io/embed/6964d8ede39380f1860070ea 167 2022-02-03T14:00:00.000Z yes no https://vueschool.io/lessons/define-your-first-pinia-store 2022-01-20T14:00:00.000Z https://video.gumlet.io/6964d86e6a1e75f7abf5b5b0/6964d8ede39380f1860070e8/thumbnail-1-0.png?v=1770045559499 Define Your First Pinia Store 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 ProductStore.js where we define the application’s products in the state. Links Pinia Docs: Defining a Store https://play.gumlet.io/embed/6964d8ede39380f1860070e8 329 2022-01-20T14:00:00.000Z yes no https://vueschool.io/lessons/introduction-to-pinia 2022-01-20T14:00:00.000Z https://video.gumlet.io/6964d86e6a1e75f7abf5b5b0/6964d8edb25141dfa4878afd/thumbnail-1-0.png?v=1770045267091 Introduction to Pinia Hello! And welcome to Pinia, The Enjoyable Vue Store! In this lesson, we introduce you to Pinia and answer a few questions like: What is Pinia? What is state management? When should I use Pinia? and why should I use Pinia for state management in Vue.js? Links Pinia Docs https://play.gumlet.io/embed/6964d8edb25141dfa4878afd 334 2022-01-20T14:00:00.000Z yes no https://vueschool.io/lessons/vue-fundamentals-capi-course-conclusion 2022-02-14T20:25:00.000Z https://video.gumlet.io/68b6ef43b21dc579f88e6563/68b6ef91373a93b510467edf/thumbnail-1-0.png?v=1759852137202 Course Conclusion Congrats! You've completed the course and are well on your way to using Vue for your next web development projects! https://play.gumlet.io/embed/68b6ef91373a93b510467edf 73 2022-02-14T20:25:00.000Z yes no https://vueschool.io/lessons/vue-fundamentals-capi-local-setup-with-vite 2022-02-14T20:25:00.000Z https://video.gumlet.io/68b6ef43b21dc579f88e6563/68b6ef90373a93b510467eb3/thumbnail-1-0.png?v=1759852109396 Local Setup with Vite In this lesson, we learn how to get a Vue project setup on our local machine with Vite. Since a build step is required to use script setup this is the fastest and easiest way to get going. If you don't want to use the script setup feature then you can install Vue via a script tag linked to CDN. Links Rapid Development with Vite Course Vue 3 Single File Components Course ⚠️ You should use npm init vue@latest to install the latest version of Vue (instead of vue@3) https://play.gumlet.io/embed/68b6ef90373a93b510467eb3 218 2022-02-14T20:25:00.000Z yes no https://vueschool.io/lessons/vue-fundamentals-capi-reactivity-fundamentals 2022-02-14T20:25:00.000Z https://video.gumlet.io/68b6ef43b21dc579f88e6563/68b6ef6e6a218061ab33e993/thumbnail-1-0.png?v=1759852056785 Reactivity Fundamentals 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() functions. https://play.gumlet.io/embed/68b6ef6e6a218061ab33e993 306 2022-02-14T20:25:00.000Z yes no https://vueschool.io/lessons/vue-fundamentals-capi-computed-properties-in-vue-with-the-composition-api 2022-02-14T20:25:00.000Z https://video.gumlet.io/6880e76606c9d53d5d05d555/6880e78608716f7a30ab1200/thumbnail-1-0.png?v=1753280267773 Computed Properties in Vue with the Composition API 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. Computed properties are very useful and should replace complex in-template expressions. While this explanation without any code examples might not make much sense right now, it surely will after you've watched this lesson about computed properties. https://play.gumlet.io/embed/6880e78608716f7a30ab1200 318 2022-02-14T20:25:00.000Z yes no https://vueschool.io/lessons/vue-fundamentals-capi-dynamic-css-classes-with-vue 2022-02-14T20:25:00.000Z https://video.gumlet.io/6880e76606c9d53d5d05d555/6880e78606c9d53d5d05d85f/thumbnail-1-0.png?v=1753281143100 Dynamic CSS Classes with Vue A common need and use case for attribute bindings is to manipulate the look of elements with CSS classes or style attributes. To make this task easier than ever, Vue provides special enhancements when v-bind is used with the class or style attribute. In this lesson, we learn how to apply dynamic classes based on our Vue data. https://play.gumlet.io/embed/6880e78606c9d53d5d05d85f 441 2022-02-14T20:25:00.000Z yes no https://vueschool.io/lessons/vue-fundamentals-capi-html-attribute-binding-in-vue 2022-02-14T20:25:00.000Z https://video.gumlet.io/68b6ef43b21dc579f88e6563/68b6ef6eb21dc579f88e67df/thumbnail-1-0.png?v=1759851936237 HTML Attribute Binding in Vue 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. This is achieved with Vue's v-bind directive and would let us change the href (or any other HTML attribute) of a link or swap out an image if we need to. NOTE: for the link to work properly you should provide the protocol in the input (http:// or https://) https://play.gumlet.io/embed/68b6ef6eb21dc579f88e67df 203 2022-02-14T20:25:00.000Z yes no https://vueschool.io/lessons/vue-fundamentals-capi-conditionals-in-vue 2022-02-14T20:25:00.000Z https://video.gumlet.io/6880e76606c9d53d5d05d555/6880e786078fd918c8cc7683/thumbnail-1-0.png?v=1753281837469 Conditionals in Vue 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 directives work. https://play.gumlet.io/embed/6880e786078fd918c8cc7683 253 2022-02-14T20:25:00.000Z yes no https://vueschool.io/lessons/vue-fundamentals-capi-methods-in-vue-with-the-composition-api 2022-02-14T20:25:00.000Z https://video.gumlet.io/68b6ef43b21dc579f88e6563/68b6ef6e6a218061ab33e96a/thumbnail-1-0.png?v=1759851851676 Methods in Vue with the Composition API It is handy to run JavaScript expressions directly in the template or a directive sometimes - but not always. When the expression gets too verbose, or we need the same logic in multiple places, we can extract the logic to a function and fire the function instead. These functions are called methods and allow us to DRY up the code. https://play.gumlet.io/embed/68b6ef6e6a218061ab33e96a 233 2022-02-14T20:25:00.000Z yes no https://vueschool.io/lessons/vue-fundamentals-capi-user-events-in-vue-3 2022-02-14T20:25:00.000Z https://video.gumlet.io/6880e76606c9d53d5d05d555/6880e78606c9d53d5d05d859/thumbnail-1-0.png?v=1753280814098 User Events in Vue 3 In this lesson, we'll learn how to respond to and handle user events with Vue's v-on directive. https://play.gumlet.io/embed/6880e78606c9d53d5d05d859 441 2022-02-14T20:25:00.000Z yes no https://vueschool.io/lessons/vue-fundamentals-capi-user-inputs-in-vue 2022-02-14T20:25:00.000Z https://video.gumlet.io/6880e76606c9d53d5d05d555/689384da7afab80a3ee14555/thumbnail-1-0.png?v=1754499115190 User Inputs in Vue 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, radio buttons, selects, and more! https://play.gumlet.io/embed/689384da7afab80a3ee14555 567 2022-02-14T20:25:00.000Z yes no https://vueschool.io/lessons/vue-fundamentals-capi-list-rendering-in-vue 2022-02-14T20:25:00.000Z https://video.gumlet.io/6880e76606c9d53d5d05d555/689381c07afab80a3ee11c3f/thumbnail-1-0.png?v=1754498012249 List Rendering in Vue In almost all applications there is a need to iterate or loop through a list of items and render them on the page. In this lesson, we're taking a closer look at Vue's v-for directive, which lets us iterate through arrays and objects in an elegant matter. Links Tips and Gotchas for Using key with v-for in Vue.js 3 https://play.gumlet.io/embed/689381c07afab80a3ee11c3f 424 2022-02-14T20:25:00.000Z yes no https://vueschool.io/lessons/vue-fundamentals-capi-vue-template-syntax-and-expressions 2022-02-14T20:25:00.000Z https://video.gumlet.io/68b6ef43b21dc579f88e6563/68b6ef6e6a218061ab33e967/thumbnail-1-0.png?v=1759849294974 Vue Template Syntax and Expressions In the previous lesson, we briefly touched upon the templating syntax to bind Vue data to the DOM. In this lesson, we'll dive deeper into Vue's templating syntax and learn how to run JavaScript expressions directly in the template. https://play.gumlet.io/embed/68b6ef6e6a218061ab33e967 187 2022-02-14T20:25:00.000Z yes no https://vueschool.io/lessons/getting-started-with-vue-js-and-the-composition-api 2022-02-14T20:25:00.000Z https://video.gumlet.io/6880e76606c9d53d5d05d555/6880e78606c9d53d5d05d83d/thumbnail-1-0.png?v=1753281000543 Getting Started with Vue.js and the Composition API In the very first lesson of the Vue Fundamentals with the Composition API course, we take a look at the official playground provided in the Vue.js docs and break down it's "Hello World" example. Links Vue.js Playground https://play.gumlet.io/embed/6880e78606c9d53d5d05d83d 238 2022-02-14T20:25:00.000Z yes no https://vueschool.io/lessons/application-monitoring-for-vue-with-sentry-course-conclusion 2022-01-13T14:00:00.000Z https://video.gumlet.io/69bfd67761788532c94f331d/69c2bf63531f7f7b6ceacd8f/thumbnail-1-0.png?v=1774372484898 Course Conclusion With the conclusion of this course, you're ready to start using Sentry to provide application monitoring for your Vue.js 3 applications. Goodbye! Links Sentry Sentry Vue Docs https://play.gumlet.io/embed/69c2bf63531f7f7b6ceacd8f 63 2022-01-13T14:00:00.000Z yes no https://vueschool.io/lessons/release-health-in-sentry 2022-01-13T14:00:00.000Z https://video.gumlet.io/69bfd67761788532c94f331d/69c2bf62531f7f7b6ceacd5d/thumbnail-1-0.png?v=1774372674181 Release Health in Sentry In this lesson, we learn how to monitor the health of our Vue.js 3 application using release health in Sentry. Release health can give us an idea of how well the latest releases are being adopted, if any crashes have occurred, and how many new issues have come up. Links Sentry Docs: Release Health https://play.gumlet.io/embed/69c2bf62531f7f7b6ceacd5d 164 2022-01-13T14:00:00.000Z yes no https://vueschool.io/lessons/performance-monitoring-in-sentry 2022-01-13T14:00:00.000Z https://video.gumlet.io/69bfd67761788532c94f331d/69c2be25531f7f7b6ceaa86d/thumbnail-1-0.png?v=1774372674150 Performance Monitoring in Sentry In this lesson, we learn how to monitor a Vue.js 3 application's performance with Sentry. Links Sentry Docs: Performance Monitoring Sentry Docs: Custom Instrumentation Sentry Docs: Connect Services https://play.gumlet.io/embed/69c2be25531f7f7b6ceaa86d 280 2022-01-13T14:00:00.000Z yes no https://vueschool.io/lessons/adding-context-to-issues-in-sentry 2022-01-13T14:00:00.000Z https://video.gumlet.io/69bfd67761788532c94f331d/69c2be244f62335fd44e85a0/thumbnail-1-0.png?v=1774372418383 Adding Context to Issues in Sentry 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 trying to resolve the issue. Links Sentry Docs: Add Context https://play.gumlet.io/embed/69c2be244f62335fd44e85a0 283 2022-01-13T14:00:00.000Z yes no https://vueschool.io/lessons/identifying-end-users-in-sentry 2022-01-13T14:00:00.000Z https://video.gumlet.io/69bfd67761788532c94f331d/69c2be244f62335fd44e859e/thumbnail-1-0.png?v=1774372498327 Identifying End Users in Sentry 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. Links Sentry Docs: Identify Users https://play.gumlet.io/embed/69c2be244f62335fd44e859e 162 2022-01-13T14:00:00.000Z yes no https://vueschool.io/lessons/alerts-in-sentry 2022-01-13T14:00:00.000Z https://video.gumlet.io/69bfd67761788532c94f331d/69c2be24531f7f7b6ceaa844/thumbnail-1-0.png?v=1774372635685 Alerts in Sentry 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. With Sentry alerts you can rest easy knowing that you'll know about issues with your Vue.js application at the proper times. Links Sentry Docs: Alerts https://play.gumlet.io/embed/69c2be24531f7f7b6ceaa844 367 2022-01-13T14:00:00.000Z yes no https://vueschool.io/lessons/environments-in-sentry 2022-01-13T14:00:00.000Z https://video.gumlet.io/69bfd67761788532c94f331d/69c2be24531f7f7b6ceaa848/thumbnail-1-0.png?v=1774372311780 Environments in Sentry In this lesson, we learn how to tag issues in Sentry based on the deployment environment. For Vue.js applications powered with Vite, this pairs nicely with built in environment "modes". Links Sentry Docs: Environments Vite Environment Variables https://play.gumlet.io/embed/69c2be24531f7f7b6ceaa848 233 2022-01-13T14:00:00.000Z yes no https://vueschool.io/lessons/enable-suspect-commits-in-sentry 2022-01-06T14:00:00.000Z https://video.gumlet.io/69bfd67761788532c94f331d/69c2be244f62335fd44e859c/thumbnail-1-0.png?v=1774372796767 Enable Suspect Commits in Sentry 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 they'll need to fix it at. Links Sentry Docs: Suspect Commits Git Docs https://play.gumlet.io/embed/69c2be244f62335fd44e859c 373 2022-01-06T14:00:00.000Z yes no https://vueschool.io/lessons/resolving-issues-in-sentry 2022-01-06T14:00:00.000Z https://video.gumlet.io/69bfd67761788532c94f331d/69c2be249ae74a34289643cc/thumbnail-1-0.png?v=1774372309289 Resolving Issues in Sentry In this lesson, we take a look at the steps you should take in Sentry, once you've resolved an issue. https://play.gumlet.io/embed/69c2be249ae74a34289643cc 113 2022-01-06T14:00:00.000Z yes no https://vueschool.io/lessons/releases-in-sentry-and-enabling-source-maps 2022-01-06T14:00:00.000Z https://video.gumlet.io/69bfd67761788532c94f331d/69c2be244f62335fd44e8599/thumbnail-1-0.png?v=1774372797798 Releases in Sentry and Enabling Source Maps 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. Links Sentry Docs: Releases Sentry Docs: Source Maps Vite Sentry Plugin https://play.gumlet.io/embed/69c2be244f62335fd44e8599 553 2022-01-06T14:00:00.000Z yes no https://vueschool.io/lessons/capture-your-first-error-with-sentry 2022-01-06T14:00:00.000Z https://video.gumlet.io/69bfd67761788532c94f331d/69c2be24531f7f7b6ceaa846/thumbnail-1-0.png?v=1774372605762 Capture Your First Error with Sentry 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 a glimpse of the wealth of data reported for the issue in the Sentry dashboard. https://play.gumlet.io/embed/69c2be24531f7f7b6ceaa846 305 2022-01-06T14:00:00.000Z yes no https://vueschool.io/lessons/create-a-sentry-project 2022-01-06T14:00:00.000Z https://video.gumlet.io/69bfd67761788532c94f331d/69c2be249ae74a34289643ce/thumbnail-1-0.png?v=1774372174521 Create a Sentry Project 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. Links Vue + Sentry Official Docs Visual Studio Code Sentry Docs: Install with Vue Boilerplate Repo Boilerplate Install npx degit vueschool/sentry-course-boilerplate sentry-course https://play.gumlet.io/embed/69c2be249ae74a34289643ce 284 2022-01-06T14:00:00.000Z yes no https://vueschool.io/lessons/what-is-application-monitoring-and-sentry 2022-01-06T14:00:00.000Z https://video.gumlet.io/69bfd67761788532c94f331d/69c2be24531f7f7b6ceaa842/thumbnail-1-0.png?v=1774372594790 What is Application Monitoring and Sentry? 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, direct those issues to the proper party for resolution, and release fixes for them. Links Sentry Website https://play.gumlet.io/embed/69c2be24531f7f7b6ceaa842 230 2022-01-06T14:00:00.000Z yes no https://vueschool.io/lessons/create-a-vite-plugin 2021-12-30T14:00:00.000Z https://video.gumlet.io/6967a7796a1e75f7ab3e1a63/69ab34d2bb772793aa1797f2/thumbnail-1-0.png?v=1772829830043 Create a Vite Plugin In this lesson, we introduce the basics of creating a Vite plugin by building a markdown to Vue component Vite plugin. Links Vite Docs: Plugin API Tailwind Typography Marked https://play.gumlet.io/embed/69ab34d2bb772793aa1797f2 497 2021-12-30T14:00:00.000Z yes no https://vueschool.io/lessons/use-a-vite-plugin 2021-12-30T14:00:00.000Z https://video.gumlet.io/6967a7796a1e75f7ab3e1a63/69ab34d1bb772793aa1797bb/thumbnail-1-0.png?v=1772829095741 Use a Vite Plugin In this lesson we take a look at some of the official Vite plugins available as well as some community maintained plugins. Links Vite Docs: Plugins Rollup Plugin Compatibility https://play.gumlet.io/embed/69ab34d1bb772793aa1797bb 160 2021-12-30T14:00:00.000Z yes no https://vueschool.io/lessons/environment-variables-and-modes-in-vite 2021-12-16T14:00:00.000Z https://video.gumlet.io/6967a7796a1e75f7ab3e1a63/69ab34d1bb772793aa1797bd/thumbnail-1-0.png?v=1772829082792 Environment Variables and Modes in Vite 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. When using environment variables in our Vite powered Vue projects we can provide alternate values for different environments and keep secret values secret. Links Official Vite Docs: Environment Variables https://play.gumlet.io/embed/69ab34d1bb772793aa1797bd 361 2021-12-16T14:00:00.000Z yes no https://vueschool.io/lessons/glob-imports-in-vite 2021-12-09T14:00:00.000Z https://video.gumlet.io/6967a7796a1e75f7ab3e1a63/69ab34d106a15537d04f2be8/thumbnail-1-0.png?v=1772828667369 Glob Imports in Vite In this lesson, we learn how to import multiple modules at one time using a glob pattern. Matched modules can be imported either asynchronously as dynamic imports or synchronously as static imports. https://play.gumlet.io/embed/69ab34d106a15537d04f2be8 300 2021-12-09T14:00:00.000Z yes no https://vueschool.io/lessons/json-and-vite 2021-12-09T14:00:00.000Z https://video.gumlet.io/6967a7796a1e75f7ab3e1a63/69ab33d906a15537d04f10c6/thumbnail-1-0.png?v=1772828008888 JSON and Vite In this lesson, we learn how Vite handles JSON imports for our Vue.js projects. https://play.gumlet.io/embed/69ab33d906a15537d04f10c6 212 2021-12-09T14:00:00.000Z yes no https://vueschool.io/lessons/images-and-vite 2021-12-09T14:00:00.000Z https://video.gumlet.io/6967a7796a1e75f7ab3e1a63/69ab33d906a15537d04f10c0/thumbnail-1-0.png?v=1772828280790 Images and Vite In this lesson, we examine how to import static assets like images into a Vite project. With Vite, the process is simple and intuitive and for production builds we get some built in optimizations. Such optimizations include hashed filenames for automatic cache busting and small images that are auto inlined with base64 encoding. Links Tiny Vue Logo https://play.gumlet.io/embed/69ab33d906a15537d04f10c0 504 2021-12-09T14:00:00.000Z yes no https://vueschool.io/lessons/css-and-vite 2021-12-02T14:00:00.000Z https://video.gumlet.io/6967a7796a1e75f7ab3e1a63/69ab33d906a15537d04f10c3/thumbnail-1-0.png?v=1772828364901 CSS and Vite 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 or using a CSS import. https://play.gumlet.io/embed/69ab33d906a15537d04f10c3 366 2021-12-02T14:00:00.000Z yes no https://vueschool.io/lessons/introduction-to-vite 2021-12-02T14:00:00.000Z https://video.gumlet.io/6967a7796a1e75f7ab3e1a63/69ab33d9bb772793aa177c83/thumbnail-1-0.png?v=1772828575306 Introduction to Vite In this lesson, we take a look at what Vite is and the problems that it aims to solve. https://play.gumlet.io/embed/69ab33d9bb772793aa177c83 238 2021-12-02T14:00:00.000Z yes no https://vueschool.io/lessons/typescript-fundamentals-introduction-to-typescript 2021-10-21T12:00:00.000Z https://video.gumlet.io/6967962cb25141dfa4ce4ba0/69c2a1734f62335fd44ba460/thumbnail-1-0.png?v=1774364553977 Introduction to TypeScript Welcome to the TypeScript Fundamentals course! Typescript is a super set of Javascript that provides static typing. With static typing we reap a number of benefits including: Tighter integration with IDE Better Refactoring with Errors at Compile Time And Self Documented Code that's Easier to Understand Finally, TypeScript compiles JavaScript, so you can run your TypeScript anywhere you'd run your JavaScript code. Links TypeScript Playground https://play.gumlet.io/embed/69c2a1734f62335fd44ba460 160 2021-10-21T12:00:00.000Z yes no https://vueschool.io/lessons/the-setup-attribute 2021-09-01T12:00:00.000Z https://video.gumlet.io/6967a438e39380f186489abe/6967eab9b25141dfa4d868b1/thumbnail-1-0.png?v=1768418360514 Script Setup 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://play.gumlet.io/embed/6967eab9b25141dfa4d868b1 251 2021-09-01T12:00:00.000Z yes no https://vueschool.io/lessons/using-provide-inject-with-the-composition-api 2021-09-01T12:00:00.000Z https://video.gumlet.io/6967a438e39380f186489abe/6967ea82e39380f1865145ae/thumbnail-1-0.png?v=1768418524208 Using provide / inject with the Composition API 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 having to pass the data down through multiple components as props. https://play.gumlet.io/embed/6967ea82e39380f1865145ae 521 2021-09-01T12:00:00.000Z yes no https://vueschool.io/lessons/the-composition-api-watcheffect-function 2021-09-01T12:00:00.000Z https://video.gumlet.io/6967a438e39380f186489abe/6967ea64b25141dfa4d860b9/thumbnail-1-0.png?v=1768418415202 The Composition API watchEffect Function In this lesson we compare the Vue Composition API watchEffect function to the watch function and talk about when we should which. https://play.gumlet.io/embed/6967ea64b25141dfa4d860b9 171 2021-09-01T12:00:00.000Z yes no https://vueschool.io/lessons/using-watch-with-the-composition-api 2021-09-01T12:00:00.000Z https://video.gumlet.io/6967a438e39380f186489abe/6967e929e39380f1865122d2/thumbnail-1-0.png?v=1768418532805 Using Watch with the Composition API 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 variables at once and the ability to remove a watcher altogether. https://play.gumlet.io/embed/6967e929e39380f1865122d2 540 2021-09-01T12:00:00.000Z yes no https://vueschool.io/lessons/computed-properties-in-the-composition-api 2021-09-01T12:00:00.000Z https://video.gumlet.io/6967a438e39380f186489abe/6967e929e39380f1865122b1/thumbnail-1-0.png?v=1768418239450 Computed Properties in the Composition API 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 only a small mental leap that doesn't take too much conceptual or syntactical change. https://play.gumlet.io/embed/6967e929e39380f1865122b1 314 2021-09-01T12:00:00.000Z yes no https://vueschool.io/lessons/introduction-to-the-vue-js-3-composition-api 2021-08-19T05:57:00.000Z https://video.gumlet.io/6967a438e39380f186489abe/6967e929b25141dfa4d84123/thumbnail-1-0.png?v=1768418145187 Introduction to the Vue.js 3 Composition API 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. The Composition API consists of a number of different Vue.js internals exposed via utility functions. It helps to better organize component code by logical concern and makes it easier to separate component logic from the component template and even reuse that logic across multiple components. Finally, it brings better Typescript support to Vue.js. Resources Composition API Official Docs Using the Composition API with Typescript Vue 2 Composition API Plugin https://play.gumlet.io/embed/6967e929b25141dfa4d84123 525 2021-08-19T05:57:00.000Z yes no https://vueschool.io/lessons/vue-3-introduction-to-single-file-components 2021-06-23T13:05:00.000Z https://video.gumlet.io/69a1cb3a98dac99517600bea/69a1cb91825d3351d5394779/thumbnail-1-0.png?v=1772211558418 Introduction to Single File Components 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 of how we can use pre-processors like Pug, Jade, or Styles in our Vue.js 3 components. Watch our lesson on Component Names Best Practices Watch our course on Modern Javascript ES6 and Beyond Links Vue 3 Single File Component Docs https://play.gumlet.io/embed/69a1cb91825d3351d5394779 302 2021-06-23T13:05:00.000Z yes no https://vueschool.io/lessons/vue-3-build-a-notification-vue-component 2021-06-23T13:04:00.000Z https://video.gumlet.io/6967a545b25141dfa4cfd2c7/69c3ed41e018a8d70347aad9/thumbnail-1-0.png?v=1774448819604 Build a Notification Vue Component 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. In this component exercise, we're going to build a fun and useful component that is a notification message. In the exercise, we'll be using Semantic UI, we'll specifically use the message element. We've prepared a boilerplate as a starting point for the exercise. Your goal is to create a component that will be passed some content (the message) and the type of notification (info, error, success). The user should also be able to close the notification. We encourage you to go back and rewatch videos if you're stuck, but if want to, you can peak at the solution. Good luck and have fun! https://play.gumlet.io/embed/69c3ed41e018a8d70347aad9 486 2021-06-23T13:04:00.000Z yes no https://vueschool.io/lessons/vue-3-build-a-github-user-profile-vue-component 2021-06-23T13:04:00.000Z https://video.gumlet.io/6967a545b25141dfa4cfd2c7/69c3ed41123b739cbbb489ee/thumbnail-1-0.png?v=1774455899717 Build a Github User Profile Vue Component This lesson is a component exercise lesson, where we're going to use everything we've learned about Vue.js 3 components so far. The goal is to create a component that displays a person’s GitHub profile. Including the user's avatar, name, register date, bio, and followers. In the exercise, we'll be using Semantic UI, we'll specifically use the card element. We've prepared a boilerplate as a starting point for the exercise. The Github API endpoint we'll be using is: https://api.github.com/users We encourage you to go back and rewatch videos if you're stuck, but if want to, you can peak at the solution. Good luck and have fun! https://play.gumlet.io/embed/69c3ed41123b739cbbb489ee 596 2021-06-23T13:04:00.000Z yes no https://vueschool.io/lessons/vue-3-component-slots 2021-06-23T13:04:00.000Z https://video.gumlet.io/6967a545b25141dfa4cfd2c7/69c3ed41e018a8d70347aadd/thumbnail-1-0.png?v=1774456003779 Vue Component Slots 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. Links Starter Files Slots Exercise Solution https://play.gumlet.io/embed/69c3ed41e018a8d70347aadd 598 2021-06-23T13:04:00.000Z yes no https://vueschool.io/lessons/vue-3-component-lifecycle-hooks 2021-06-23T13:03:00.000Z https://video.gumlet.io/6967a545b25141dfa4cfd2c7/69c3ed41b365493ac059a260/thumbnail-1-0.png?v=1774448337909 Vue Component Lifecycle Hooks 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 Lifecycle Hooks lesson. https://play.gumlet.io/embed/69c3ed41b365493ac059a260 191 2021-06-23T13:03:00.000Z yes no https://vueschool.io/lessons/vue-3-component-naming-best-practices-in-vue 2021-06-23T13:03:00.000Z https://video.gumlet.io/6967a545b25141dfa4cfd2c7/69c3ed41e018a8d70347aae6/thumbnail-1-0.png?v=1774456021791 Component Naming Best Practices In Vue 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 our applications will be easier to understand for other developers, just by taking a look at the component files. https://play.gumlet.io/embed/69c3ed41e018a8d70347aae6 544 2021-06-23T13:03:00.000Z yes no https://vueschool.io/lessons/vue-3-communication-between-vue-components-with-custom-events 2021-06-23T13:03:00.000Z https://video.gumlet.io/6967a545b25141dfa4cfd2c7/69c3ed41b365493ac059a26e/thumbnail-1-0.png?v=1774449811310 Communication Between Vue Components with Custom Events 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. We will use a custom event to notify the plan-picker of which plan has been selected, and make sure we have the right logic in place so the user can only select one plan at a time. https://play.gumlet.io/embed/69c3ed41b365493ac059a26e 587 2021-06-23T13:03:00.000Z yes no https://vueschool.io/lessons/vue-3-global-vs-local-vue-components 2021-06-23T13:03:00.000Z https://video.gumlet.io/6967a545b25141dfa4cfd2c7/69c3ed41e018a8d70347ab01/thumbnail-1-0.png?v=1774448578060 Global vs Local Vue Components 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 application. https://play.gumlet.io/embed/69c3ed41e018a8d70347ab01 275 2021-06-23T13:03:00.000Z yes no https://vueschool.io/lessons/vue-3-nested-components-in-vue 2021-06-23T13:03:00.000Z https://video.gumlet.io/6967a545b25141dfa4cfd2c7/69c3ed41e018a8d70347ab05/thumbnail-1-0.png?v=1774448510026 Nested Components In Vue 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 features of our apps. In this lesson, we'll learn how we can create a plan-picker component, to easily display all our plans wherever we want. https://play.gumlet.io/embed/69c3ed41e018a8d70347ab05 168 2021-06-23T13:03:00.000Z yes no https://vueschool.io/lessons/vue-3-reusable-components-with-props 2021-06-23T13:03:00.000Z https://video.gumlet.io/6967a545b25141dfa4cfd2c7/69c3ed42123b739cbbb48a10/thumbnail-1-0.png?v=1774448981599 Reusable Components with Props In this lesson, we'll see a realistic use case for reusable components and learn about Vue.js 3 component props. Props are custom HTML attributes that we can register on our components, which allow us to pass data to our components. Links Boilerplate and Assets https://play.gumlet.io/embed/69c3ed42123b739cbbb48a10 544 2021-06-23T13:03:00.000Z yes no https://vueschool.io/lessons/vue-3-component-template 2021-06-23T13:03:00.000Z https://video.gumlet.io/6967a545b25141dfa4cfd2c7/69c3ed41b365493ac059a25e/thumbnail-1-0.png?v=1774448281539 Vue Component Template 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 in the template. In Vue.js, we can define our template in a few different ways. In this lesson, we'll move away from the inline template and use the x-template technique, which is great when you're getting started. You can read more about Vue's Template Syntax in the documentation. https://play.gumlet.io/embed/69c3ed41b365493ac059a25e 136 2021-06-23T13:03:00.000Z yes no https://vueschool.io/lessons/vue-3-intro-to-components 2021-06-23T13:02:00.000Z https://video.gumlet.io/6967a545b25141dfa4cfd2c7/69c3ed41e018a8d70347aae4/thumbnail-1-0.png?v=1774448438299 Intro to Vue 3 Components 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. Links Starter Files https://play.gumlet.io/embed/69c3ed41e018a8d70347aae4 220 2021-06-23T13:02:00.000Z yes no https://vueschool.io/lessons/router-and-the-composition-api 2021-06-09T12:16:00.000Z https://video.gumlet.io/68b6f1d3373a93b51046a9ac/68b6f5276a218061ab3454f0/thumbnail-1-0.png?v=1757694151362 Router and the Composition API 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 from within the setup function, much of Vue Router remains unchanged. This lesson is not essential to being successful with Vue Router, so if you are not interested in working with the composition API at this time, consider yourself done with the course. Thanks for watching! https://play.gumlet.io/embed/68b6f5276a218061ab3454f0 495 2021-06-09T12:16:00.000Z yes no https://vueschool.io/lessons/extending-router-link-for-external-urls 2021-06-09T12:15:00.000Z https://video.gumlet.io/68b6f1d3373a93b51046a9ac/68b6f51a6a218061ab3453c4/thumbnail-1-0.png?v=1757694091891 Extending Router Link for External URLs 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 handling of external and internal links but makes links throughout your app easily extensible from one place. https://play.gumlet.io/embed/68b6f51a6a218061ab3453c4 511 2021-06-09T12:15:00.000Z yes no https://vueschool.io/lessons/router-query-params 2021-06-09T12:15:00.000Z https://video.gumlet.io/68b6f1d3373a93b51046a9ac/68b6f519b21dc579f88ed39a/thumbnail-1-0.png?v=1757694036378 Router Query Params 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, storing the path of a route to redirect to after user login. https://play.gumlet.io/embed/68b6f519b21dc579f88ed39a 425 2021-06-09T12:15:00.000Z yes no https://vueschool.io/lessons/route-meta-fields 2021-06-09T12:14:00.000Z https://video.gumlet.io/68b6f1d3373a93b51046a9ac/68b6f50bb21dc579f88ed293/thumbnail-1-0.png?v=1757693979150 Route Meta Fields In this lesson, we take a look at Vue Router's route meta fields and their ability to attach arbitrary information to a route. A common use case for route meta fields is to mark some routes as protected. We implement just this for the travel app to see route meta fields in action. https://play.gumlet.io/embed/68b6f50bb21dc579f88ed293 737 2021-06-09T12:14:00.000Z yes no https://vueschool.io/lessons/scroll-behavior 2021-06-09T12:14:00.000Z https://video.gumlet.io/68b6f1d3373a93b51046a9ac/68b6f50a6a218061ab345292/thumbnail-1-0.png?v=1757693908504 Scroll Behavior In this lesson, we learn how to customize the scroll behavior between route changes in Vue Router. https://play.gumlet.io/embed/68b6f50a6a218061ab345292 289 2021-06-09T12:14:00.000Z yes no https://vueschool.io/lessons/route-guards 2021-06-03T10:44:00.000Z https://video.gumlet.io/68b6f1d3373a93b51046a9ac/68b6f5006a218061ab3451ea/thumbnail-1-0.png?v=1757693848368 Route Guards 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 corresponding destination existant to show. https://play.gumlet.io/embed/68b6f5006a218061ab3451ea 272 2021-06-03T10:44:00.000Z yes no https://vueschool.io/lessons/404-not-found-page 2021-06-03T10:44:00.000Z https://video.gumlet.io/68b6f1d3373a93b51046a9ac/68b6f4f7b21dc579f88ed11d/thumbnail-1-0.png?v=1757693761719 Learn How to Handle 404 Not Found 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://play.gumlet.io/embed/68b6f4f7b21dc579f88ed11d 220 2021-06-03T10:44:00.000Z yes no https://vueschool.io/lessons/route-transitions 2021-06-03T10:44:00.000Z https://video.gumlet.io/68b6f1d3373a93b51046a9ac/68b6f4f6373a93b51046e2f1/thumbnail-1-0.png?v=1757692646936 Route Transitions 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 a simple fade transition the possibilities for page transitions with Vue.js and Vue Router are endless! Links Vue Router Docs - Route Transitions https://play.gumlet.io/embed/68b6f4f6373a93b51046e2f1 422 2021-06-03T10:44:00.000Z yes no https://vueschool.io/lessons/go-back 2021-06-03T10:44:00.000Z https://video.gumlet.io/68b6f1d3373a93b51046a9ac/68b6f4f6373a93b51046e2db/thumbnail-1-0.png?v=1757692587741 Go Back 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. Links Vue Router Docs - Back https://play.gumlet.io/embed/68b6f4f6373a93b51046e2db 141 2021-06-03T10:44:00.000Z yes no https://vueschool.io/lessons/nested-routes 2021-06-03T10:44:00.000Z https://video.gumlet.io/68b6f1d3373a93b51046a9ac/68b6f4eab21dc579f88ecfd6/thumbnail-1-0.png?v=1757692524468 Nested Routes 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. Links Vue Router Docs - Nested Routes https://play.gumlet.io/embed/68b6f4eab21dc579f88ecfd6 236 2021-06-03T10:44:00.000Z yes no https://vueschool.io/lessons/experience-cards 2021-06-03T10:44:00.000Z https://video.gumlet.io/68b6f1d3373a93b51046a9ac/68b6f4e96a218061ab344f9e/thumbnail-1-0.png?v=1757692462402 Experience Cards 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 destinations using Vue's v-for and link to an Experience page with router link. https://play.gumlet.io/embed/68b6f4e96a218061ab344f9e 708 2021-06-03T10:44:00.000Z yes no https://vueschool.io/lessons/route-props 2021-06-03T10:44:00.000Z https://video.gumlet.io/68b6f1d3373a93b51046a9ac/68b6f4e3b21dc579f88ecf28/thumbnail-1-0.png?v=1757692391216 Route Props 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 record to true and automatically passing all params as props, setting the props property to a static object to provide static props, or setting it to a function that returns the desired props. Setting the route records props property to a function is the most versatile. It allows you to cast parameters into other types, combine static values with route-based values, and much more. Links Vue Router Docs - Passing Props https://play.gumlet.io/embed/68b6f4e3b21dc579f88ecf28 311 2021-06-03T10:44:00.000Z yes no https://vueschool.io/lessons/reacting-to-param-changes 2021-06-03T10:44:00.000Z https://video.gumlet.io/68b6f1d3373a93b51046a9ac/68b6f4d86a218061ab344d74/thumbnail-1-0.png?v=1757692303271 Reacting to Param Changes 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 between pages registered to use the same component, some Vue lifecycle hooks that you might expect to fire, will not. There is good reason for this, but you must be aware of it and respond appropriately. Links Vue Router Docs - Reacting to Param Changes Vue 3 Docs - key attribtue Fetch MDN Docs Dummy API ⚠️ IMPORTANT: If the dummy api is giving you CORS issues you can simulate the API in your local project by doing the following: Provide a JSON file for each location in the public directory (and for the sake of organization in a new api directory) Make your async requests to the local endpoints like this: fetch("/api/brazil.json") You can copy the json file contents from this commit in the repo (also notice the repo shows the location where you would store these - @/public/api) https://play.gumlet.io/embed/68b6f4d86a218061ab344d74 742 2021-06-03T10:44:00.000Z yes no https://vueschool.io/lessons/clean-up 2021-06-03T10:44:00.000Z https://video.gumlet.io/68b6f1d3373a93b51046a9ac/68b6f4d7b21dc579f88ece16/thumbnail-1-0.png?v=1757692237240 Clean Up 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://play.gumlet.io/embed/68b6f4d7b21dc579f88ece16 399 2021-06-03T10:44:00.000Z yes no https://vueschool.io/lessons/named-routes 2021-06-03T10:44:00.000Z https://video.gumlet.io/68b6f1d3373a93b51046a9ac/68b6f4d26a218061ab344cea/thumbnail-1-0.png?v=1757692183251 Named Routes 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. Links Vue Router Docs - Named Routes https://play.gumlet.io/embed/68b6f4d26a218061ab344cea 214 2021-06-03T10:44:00.000Z yes no https://vueschool.io/lessons/dynamic-routes 2021-06-03T10:44:00.000Z https://video.gumlet.io/68b6f1d3373a93b51046a9ac/68b6f4c76a218061ab344bda/thumbnail-1-0.png?v=1757692091353 Dynamic Routes 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. Links Vue Router Docs - Dynamic Route Matching With Params https://play.gumlet.io/embed/68b6f4c76a218061ab344bda 547 2021-06-03T10:44:00.000Z yes no https://vueschool.io/lessons/router-link-active-class 2021-06-03T10:44:00.000Z https://video.gumlet.io/68b6f1d3373a93b51046a9ac/68b6f4c6b21dc579f88ecc89/thumbnail-1-0.png?v=1757692027443 Router Link Active Class 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 gives them more context about where they are on your site. With Vue.js, all that's needed is to provide the desired styles on the router-link-active class, and Vue Router takes care of the rest! Links Vue Router Docs Active Class https://play.gumlet.io/embed/68b6f4c6b21dc579f88ecc89 212 2021-06-03T10:44:00.000Z yes no https://vueschool.io/lessons/navigation-component 2021-06-03T10:44:00.000Z https://video.gumlet.io/68b6f1d3373a93b51046a9ac/68b6f49f373a93b51046db49/thumbnail-1-0.png?v=1757691961235 Navigation Component 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 that's only meant to be used throughout the application. Links Vue 3 Styleguide https://play.gumlet.io/embed/68b6f49f373a93b51046db49 101 2021-06-03T10:44:00.000Z yes no https://vueschool.io/lessons/lazy-loading-routes-vue-cli-only 2021-06-03T10:44:00.000Z https://video.gumlet.io/68b6f1d3373a93b51046a9ac/68b6f49e373a93b51046db1e/thumbnail-1-0.png?v=1757691894252 Lazy Loading Routes (Vue CLI Only) 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 is needed. If you're using Vite and don't want to see how lazy loading differs with Vue CLI, you can skip this lesson (suggested). Skip to next lesson using Vite: Navigation Component Lesson. Links Vue Router 4 Docs - Lazy Loading Routes Vue School Lesson - Load Vue Components Asyncronously https://play.gumlet.io/embed/68b6f49e373a93b51046db1e 395 2021-06-03T10:44:00.000Z yes no https://vueschool.io/lessons/lazy-loading-routes-vite-only 2021-06-03T10:44:00.000Z https://video.gumlet.io/68b6f1d3373a93b51046a9ac/68b6f49e6a218061ab3448b7/thumbnail-1-0.png?v=1757520272940 Lazy Loading Routes (Vite Only) 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 is needed. If you're using Vue CLI and don't want to see how lazy loading works with Vite, you can skip this lesson (not suggested). Skip to next lesson on Lazy Loading with Vue CLI. Links Vue Router 4 Docs - Lazy Loading Routes Vue School Lesson - Load Vue Components Asyncronously https://play.gumlet.io/embed/68b6f49e6a218061ab3448b7 332 2021-06-03T10:44:00.000Z yes no https://vueschool.io/lessons/history-mode 2021-06-03T10:43:00.000Z https://video.gumlet.io/68b6f1d3373a93b51046a9ac/68b6f49e6a218061ab3448b5/thumbnail-1-0.png?v=1757517783747 History Mode: HTML5 vs Hash 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 use which. Links Vue Router History Mode Docs https://play.gumlet.io/embed/68b6f49e6a218061ab3448b5 239 2021-06-03T10:43:00.000Z yes no https://vueschool.io/lessons/adding-routes-and-content 2021-06-03T10:43:00.000Z https://video.gumlet.io/68b6f1d3373a93b51046a9ac/68b6f49eb21dc579f88ec927/thumbnail-1-0.png?v=1757517684318 Adding Routes and Content In this lesson, we import project assets, like images, a stylesheet, and the data, into the Vue.js application via a dowload. Then we start making our own routes, pages, and links for the Vue School Travel App destinations using Vue Router 4. Links Starter Files https://play.gumlet.io/embed/68b6f49eb21dc579f88ec927 702 2021-06-03T10:43:00.000Z yes no https://vueschool.io/lessons/the-scaffolded-codebase-vue-cli-only 2021-06-03T10:43:00.000Z https://video.gumlet.io/68b6f1d3373a93b51046a9ac/68b6f49e373a93b51046db20/thumbnail-1-0.png?v=1757516606124 The Scaffolded Codebase (Vue CLI Only) 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 registration, and the router-link and router-view components. This code was generated because we chose to include Vue Router in the project during installation. If you already setup the project with Vite and don't want to use Vue CLI as an alternative, you can skip this lesson (suggested). Skip to next lesson using Vite. Links Vue Router Docs https://play.gumlet.io/embed/68b6f49e373a93b51046db20 349 2021-06-03T10:43:00.000Z yes no https://vueschool.io/lessons/creating-the-project-with-vue-cli-vue-cli-only 2021-06-03T10:43:00.000Z https://video.gumlet.io/68b6f1d3373a93b51046a9ac/68b6f49e6a218061ab3448af/thumbnail-1-0.png?v=1757516483154 Creating the Project with Vue CLI (Vue CLI Only) 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. If you already setup the project with Vite and don't want to use Vue CLI as an alternative, you can skip this lesson (suggested). Skip to next lesson using Vite. Links Vue CLI Docs Alternative setup with Vite https://play.gumlet.io/embed/68b6f49e6a218061ab3448af 346 2021-06-03T10:43:00.000Z yes no https://vueschool.io/lessons/installing-and-setting-up-vue-router-with-vite-vite-only 2021-06-03T10:43:00.000Z https://video.gumlet.io/6880e76606c9d53d5d05d555/6880e78608716f7a30ab11fe/thumbnail-1-0.png?v=1753281315480 Installing and Setting Up Vue Router with Vite (Vite Only) In this lesson, we'll learn how to install and set up the project with Vite. Unlike Vue CLI, Vite does not provide an option to setup Vue Router for you. That's ok though, because it allows us a great opportunity to see how to install Vue Router 4 from scratch. This will be helpful not only for the projects you create using Vite but also anytime you need to add Vue Router to an existing project. Links Vue Router Docs Vite Resolving File Extensions https://play.gumlet.io/embed/6880e78608716f7a30ab11fe 719 2021-06-03T10:43:00.000Z yes no https://vueschool.io/lessons/the-scaffolded-codebase-vite-only 2021-06-03T10:43:00.000Z https://video.gumlet.io/68b6f1d3373a93b51046a9ac/68b6f49eb21dc579f88ec923/thumbnail-1-0.png?v=1757516329299 The Scaffolded Codebase (Vite Only) 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. Links Vite Config Options Setup Attribute Release Notes https://play.gumlet.io/embed/68b6f49eb21dc579f88ec923 319 2021-06-03T10:43:00.000Z yes no https://vueschool.io/lessons/creating-the-project-with-vite-vite-only 2021-06-03T10:43:00.000Z https://video.gumlet.io/68b6f1d3373a93b51046a9ac/68b6f49e373a93b51046db1c/thumbnail-1-0.png?v=1757516190866 Creating the Project with Vite (Vite Only) 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. Links Vite Notes Since this video was created, an official scaffolding tool for Vue.js projects with Vite has been released. You can get a more comprehensive Vue + Vite setup by running: npm init vue@latest https://play.gumlet.io/embed/68b6f49e373a93b51046db1c 191 2021-06-03T10:43:00.000Z yes no https://vueschool.io/lessons/introduction-to-vue-router-4 2021-06-03T10:32:00.000Z https://video.gumlet.io/6880e76606c9d53d5d05d555/6880e786078fd918c8cc7660/thumbnail-1-0.png?v=1753281524427 Introduction to Vue Router 4 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 back button, see smooth page transitions and more! Links Visual Studio Code Chrome Dev Tools Finished Application Starter Files https://play.gumlet.io/embed/6880e786078fd918c8cc7660 227 2021-06-03T10:32:00.000Z yes no https://vueschool.io/lessons/using-vue-dev-tools-with-vuejs-3 2021-04-27T12:25:00.000Z https://video.gumlet.io/69679604e39380f1864729e0/69c2d8899ae74a342898f0a2/thumbnail-1-0.png?v=1774377773692 Using Vue Devtools with Vue.js 3 The Vue Devtools is an invaluable browser extension to Chrome and Firefox that will speed up your development and bug hunting. Vue Devtools 6 supports Vue 3 and as of right now it's in beta and available for Chrome and Firefox. https://play.gumlet.io/embed/69c2d8899ae74a342898f0a2 277 2021-04-27T12:25:00.000Z yes no https://vueschool.io/lessons/computed-properties-in-vue-3 2021-03-24T10:22:00.000Z https://video.gumlet.io/69679604e39380f1864729e0/69c2d889531f7f7b6ced5cbd/thumbnail-1-0.png?v=1774377523726 Computed Properties in Vue 3 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. Computed properties are very useful and should replace complex in-template expressions. While this explanation without any code examples might not make much sense right now, it surely will after you've watched this lesson about computed properties. https://play.gumlet.io/embed/69c2d889531f7f7b6ced5cbd 270 2021-03-24T10:22:00.000Z yes no https://vueschool.io/lessons/dynamic-css-classes-with-vue-3 2021-03-24T10:13:00.000Z https://video.gumlet.io/69679604e39380f1864729e0/69c2d8899ae74a342898f0a0/thumbnail-1-0.png?v=1774377862189 Dynamic CSS classes with Vue 3 A common need and use case for attribute bindings is to manipulate the look of elements with CSS classes or style attributes. To make this task easier than ever, Vue provides special enhancements when v-bind is used with the class or style attribute. In this lesson, we're learning how to apply dynamic classes based on our Vue data. https://play.gumlet.io/embed/69c2d8899ae74a342898f0a0 472 2021-03-24T10:13:00.000Z yes no https://vueschool.io/lessons/html-attribute-binding-in-vue-3 2021-03-24T10:21:00.000Z https://video.gumlet.io/69679604e39380f1864729e0/69c2d8894f62335fd4513567/thumbnail-1-0.png?v=1774377414728 HTML Attribute Binding in Vue 3 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. This is achieved with Vue's v-bind directive and would let us change the href (or any other HTML attribute) of a link or swap out an image if we need to. https://play.gumlet.io/embed/69c2d8894f62335fd4513567 175 2021-03-24T10:21:00.000Z yes no https://vueschool.io/lessons/conditional-rendering-in-vue-3 2021-03-24T10:11:00.000Z https://video.gumlet.io/69679604e39380f1864729e0/69c2d8894f62335fd451356d/thumbnail-1-0.png?v=1774377706920 Conditional Rendering in Vue 3 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 directives work. https://play.gumlet.io/embed/69c2d8894f62335fd451356d 253 2021-03-24T10:11:00.000Z yes no https://vueschool.io/lessons/methods-in-vue-3 2021-03-24T10:11:00.000Z https://video.gumlet.io/69679604e39380f1864729e0/69c2d8894f62335fd4513569/thumbnail-1-0.png?v=1774377762681 Methods in Vue 3 It is handy to run JavaScript expressions directly in the template or a directive sometimes - but not always. When the expression is getting too verbose, or we need the same logic in multiple places, we can extract the logic to a function and fire the function instead. These functions are called methods and allow us to DRY up the code. https://play.gumlet.io/embed/69c2d8894f62335fd4513569 318 2021-03-24T10:11:00.000Z yes no https://vueschool.io/lessons/user-events-in-vue-3 2021-03-24T10:10:00.000Z https://video.gumlet.io/6880e76606c9d53d5d05d555/6880e78606c9d53d5d05d859/thumbnail-1-0.png?v=1753280814098 User Events in Vue 3 In this lesson, we'll learn how to respond to and handle user events with Vue's v-on directive. https://play.gumlet.io/embed/6880e78606c9d53d5d05d859 441 2021-03-24T10:10:00.000Z yes no https://vueschool.io/lessons/user-inputs-vue-devtools-in-vue-3 2021-03-24T10:10:00.000Z https://video.gumlet.io/6880e76606c9d53d5d05d555/6880e78606c9d53d5d05d857/thumbnail-1-0.png?v=1753280693603 User Inputs in Vue 3 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, radio buttons, selects, and more! https://play.gumlet.io/embed/6880e78606c9d53d5d05d857 667 2021-03-24T10:10:00.000Z yes no https://vueschool.io/lessons/list-rendering-in-vue-3 2021-03-24T10:09:00.000Z https://video.gumlet.io/6880e76606c9d53d5d05d555/6880e786078fd918c8cc7663/thumbnail-1-0.png?v=1753280550095 List Rendering in Vue 3 In almost all applications there is a need to iterate or loop through a list of items and render them on the page. In this lesson, we're taking a closer look at Vue's v-for directive, which lets us iterate through arrays and objects in an elegant matter. Links Tips and Gotchas for Using key with v-for in Vue.js 3 https://play.gumlet.io/embed/6880e786078fd918c8cc7663 466 2021-03-24T10:09:00.000Z yes no https://vueschool.io/lessons/vue-js-3-template-syntax-and-expressions 2021-03-24T10:08:00.000Z https://video.gumlet.io/69679604e39380f1864729e0/69c2d8894f62335fd451356b/thumbnail-1-0.png?v=1774377428436 Vue.js 3 template Syntax and Expressions In the previous lesson, we briefly touched upon the templating syntax to bind Vue data to the DOM. In this lesson, we'll dive deeper into Vue's templating syntax and learn how to run JavaScript expressions directly in the template. https://play.gumlet.io/embed/69c2d8894f62335fd451356b 146 2021-03-24T10:08:00.000Z yes no https://vueschool.io/lessons/getting-started-with-vue-js-3 2021-03-24T10:07:00.000Z https://video.gumlet.io/69679604e39380f1864729e0/69c2d8894f62335fd4513564/thumbnail-1-0.png?v=1774377600542 Getting Started with Vue.js 3 In the very first lesson of our Vue.js 3 Fundamentals course, besides of learning how to easily add Vue.js from a CDN to our site we're going to take a look at Vue.js enjoyable and automatic reactivity system. https://play.gumlet.io/embed/69c2d8894f62335fd4513564 232 2021-03-24T10:07:00.000Z yes no https://vueschool.io/lessons/dynamic-named-slots 2020-12-30T11:55:00.000Z https://video.gumlet.io/6967ae10b25141dfa4d0e115/69c2ea4dc99612552fced5d4/thumbnail-1-0.png?v=1774382154477 Dynamic Named Slots 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://play.gumlet.io/embed/69c2ea4dc99612552fced5d4 444 2020-12-30T11:55:00.000Z yes no https://vueschool.io/lessons/composing-components 2020-12-24T15:07:00.000Z https://video.gumlet.io/6967ae10b25141dfa4d0e115/69c2ea4dc99612552fced5c5/thumbnail-1-0.png?v=1774381902186 Composing Components 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://play.gumlet.io/embed/69c2ea4dc99612552fced5c5 162 2020-12-24T15:07:00.000Z yes no https://vueschool.io/lessons/using-scoped-slots-with-functions 2020-12-24T15:06:00.000Z https://video.gumlet.io/6967ae10b25141dfa4d0e115/69c2ea4dc99612552fced5cc/thumbnail-1-0.png?v=1774382040994 Using Scoped Slots with Functions In this lesson, we'll learn how to pass methods to scoped slots, so we can make our slot-based component more interactive. https://play.gumlet.io/embed/69c2ea4dc99612552fced5cc 222 2020-12-24T15:06:00.000Z yes no https://vueschool.io/lessons/refactor-user-list-component-using-slots 2020-11-12T12:07:00.000Z https://video.gumlet.io/6967ae10b25141dfa4d0e115/69c2ea4d36217516b58fe818/thumbnail-1-0.png?v=1774382139939 Refactor User List Component Using Slots In this lesson, we'll learn about component composition using nested slots. https://play.gumlet.io/embed/69c2ea4d36217516b58fe818 338 2020-11-12T12:07:00.000Z yes no https://vueschool.io/lessons/passing-data-to-the-parent-using-scoped-slot 2020-11-12T12:05:00.000Z https://video.gumlet.io/6967ae10b25141dfa4d0e115/69c2ea4d36217516b58fe816/thumbnail-1-0.png?v=1774381939790 Passing Data to the Parent Using Scoped Slot 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://play.gumlet.io/embed/69c2ea4d36217516b58fe816 218 2020-11-12T12:05:00.000Z yes no https://vueschool.io/lessons/fake-scoped-slots-with-functions 2020-10-29T15:35:00.000Z https://video.gumlet.io/6967ae10b25141dfa4d0e115/69c2ea4d3b13b4783935d2b1/thumbnail-1-0.png?v=1774382024827 Fake Scoped Slots with Functions 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://play.gumlet.io/embed/69c2ea4d3b13b4783935d2b1 341 2020-10-29T15:35:00.000Z yes no https://vueschool.io/lessons/create-a-user-list-component 2020-10-29T15:34:00.000Z https://video.gumlet.io/6967ae10b25141dfa4d0e115/69c2ea4d36217516b58fe811/thumbnail-1-0.png?v=1774382105794 Create a User List Component 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. Lesson Resources Starting point https://play.gumlet.io/embed/69c2ea4d36217516b58fe811 259 2020-10-29T15:34:00.000Z yes no https://vueschool.io/lessons/named-slots 2020-10-22T15:00:00.000Z https://video.gumlet.io/6967ae10b25141dfa4d0e115/69c2ea4d36217516b58fe814/thumbnail-1-0.png?v=1774382096381 Named Slots In this lesson, we'll learn about named slots. Named slots allow us to use multiple slots in one component. We'll also learn how to define fallback content for our slots. https://play.gumlet.io/embed/69c2ea4d36217516b58fe814 226 2020-10-22T15:00:00.000Z yes no https://vueschool.io/lessons/using-slots 2020-10-08T12:19:00.000Z https://video.gumlet.io/6967ae10b25141dfa4d0e115/69c2ea4dc99612552fced5c3/thumbnail-1-0.png?v=1774381949151 Using Slots 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://play.gumlet.io/embed/69c2ea4dc99612552fced5c3 235 2020-10-08T12:19:00.000Z yes no https://vueschool.io/lessons/what-are-slots 2020-10-08T12:19:00.000Z https://video.gumlet.io/6967ae10b25141dfa4d0e115/69c2ea4dc99612552fced5d6/thumbnail-1-0.png?v=1774382052175 What are Slots In this lesson, we'll learn what slots are and the basics of how to use slots to create reusable Vue.js components. https://play.gumlet.io/embed/69c2ea4dc99612552fced5d6 228 2020-10-08T12:19:00.000Z yes no https://vueschool.io/lessons/what-is-vue-apollo 2020-10-01T09:41:00.000Z https://video.gumlet.io/69c2a3e0531f7f7b6ce7ff24/69c2a4054f62335fd44be2b7/thumbnail-1-0.png?v=1774366774207 What is Vue-Apollo? This course uses Vue-Apollo to connect to the SpaceX GraphQL API. In this lesson, we'll take a look at what Vue-Apollo and the Apollo client is. https://play.gumlet.io/embed/69c2a4054f62335fd44be2b7 124 2020-10-01T09:41:00.000Z yes no https://vueschool.io/lessons/introduction-to-vue-3 2020-09-08T12:55:00.000Z https://video.gumlet.io/69c2aaab4f62335fd44c87de/69c2aacd4f62335fd44c8a8b/thumbnail-1-0.png?v=1774365706547 Introduction to Vue 3 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. In this lesson, we'll introduce the third version of Vue.js and give an overview of what the course covers, and what you'll learn from the course. Lesson Resources Vue.js Fundamentals course Vue.js Composition API course https://play.gumlet.io/embed/69c2aacd4f62335fd44c8a8b 123 2020-09-08T12:55:00.000Z yes no https://vueschool.io/lessons/what-is-graphql 2020-07-30T04:00:00.000Z https://video.gumlet.io/69bfd8714fe0bcfaae534743/69c1bbc6c98b51e9c563d497/thumbnail-1-0.png?v=1774304565408 What is GraphQL In this lesson, we'll learn what GraphQL is and what some of the benefits of using GraphQL are. https://play.gumlet.io/embed/69c1bbc6c98b51e9c563d497 242 2020-07-30T04:00:00.000Z yes no https://vueschool.io/lessons/what-is-storybook 2020-06-11T12:40:00.000Z https://video.gumlet.io/69c2e1d63fe452f53abc171d/69c2e4d605651df01cd297e6/thumbnail-1-0.png?v=1774380737047 What is Storybook In this lesson, we'll explain what Storybook is and demonstrate the benefits of having a component library for our Vue.js components. https://play.gumlet.io/embed/69c2e4d605651df01cd297e6 166 2020-06-11T12:40:00.000Z yes no https://vueschool.io/lessons/what-are-functional-components 2020-05-14T10:30:00.000Z https://video.gumlet.io/69c2dfb19ae74a342899af94/69c2e7583fe452f53abc9300/thumbnail-1-0.png?v=1774381243350 What are functional components 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://play.gumlet.io/embed/69c2e7583fe452f53abc9300 255 2020-05-14T10:30:00.000Z yes no https://vueschool.io/lessons/vue-i18n-number-localization 2020-04-23T09:21:00.000Z https://video.gumlet.io/69c3f31fe018a8d7034858c8/69c3f3acb365493ac05a6429/thumbnail-1-0.png?v=1774450129572 Number Localization 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. In this lesson, we'll learn how to configure different number formatting with the vue-i18n plugin to support the differences. Lesson Resources Intl.NumberFormat MDN documentation https://play.gumlet.io/embed/69c3f3acb365493ac05a6429 292 2020-04-23T09:21:00.000Z yes no https://vueschool.io/lessons/format-dates-and-time 2020-01-30T12:37:00.000Z https://video.gumlet.io/69c3f31fe018a8d7034858c8/69c3f3acb365493ac05a642f/thumbnail-1-0.png?v=1774450346229 Format Dates and Time 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 to work with vue-i18n and the different date and time formats. https://play.gumlet.io/embed/69c3f3acb365493ac05a642f 436 2020-01-30T12:37:00.000Z yes no https://vueschool.io/lessons/pluralisation 2020-01-23T08:34:00.000Z https://video.gumlet.io/69c3f31fe018a8d7034858c8/69c3f3ace018a8d70348696b/thumbnail-1-0.png?v=1774450032334 Pluralisation 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 we would handle irregular pluralization. https://play.gumlet.io/embed/69c3f3ace018a8d70348696b 260 2020-01-23T08:34:00.000Z yes no https://vueschool.io/lessons/named-formatting 2020-01-17T11:46:00.000Z https://video.gumlet.io/69c3f31fe018a8d7034858c8/69c3f3acb365493ac05a642d/thumbnail-1-0.png?v=1774449976917 Named Formatting In this lesson, we'll learn how to use named formatting with vue-i18n to include dynamic text in our translations. Named formatting are essentially variables in our translation files that we can use to insert dynamic data. https://play.gumlet.io/embed/69c3f3acb365493ac05a642d 168 2020-01-17T11:46:00.000Z yes no https://vueschool.io/lessons/getting-the-locale-from-the-browser 2020-01-17T11:44:00.000Z https://video.gumlet.io/69c3f31fe018a8d7034858c8/69c3f3ace018a8d70348696d/thumbnail-1-0.png?v=1774450120199 Getting the Locale from the Browser 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://play.gumlet.io/embed/69c3f3ace018a8d70348696d 225 2020-01-17T11:44:00.000Z yes no https://vueschool.io/lessons/persist-locale-changes 2020-01-09T09:06:00.000Z https://video.gumlet.io/69c3f31fe018a8d7034858c8/69c3f3acb365493ac05a6432/thumbnail-1-0.png?v=1774450061968 Persist Locale Changes 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, which offers a bad user experience. In this lesson, we'll learn how to persist the locale change with local storage, so our users don't have to choose their language on every page load. https://play.gumlet.io/embed/69c3f3acb365493ac05a6432 179 2020-01-09T09:06:00.000Z yes no https://vueschool.io/lessons/changing-locale 2020-01-09T09:06:00.000Z https://video.gumlet.io/69c3f31fe018a8d7034858c8/69c3f3ac123b739cbbb54e7c/thumbnail-1-0.png?v=1774449860124 Changing Locale It is important that users are able to change the language on our website when we support multiple languages. In this lesson, we'll learn how to change the locale programmatically and from the user interface. https://play.gumlet.io/embed/69c3f3ac123b739cbbb54e7c 96 2020-01-09T09:06:00.000Z yes no https://vueschool.io/lessons/translations-in-action 2020-01-02T14:00:00.000Z https://video.gumlet.io/69c3f31fe018a8d7034858c8/69c3f3acb365493ac05a642b/thumbnail-1-0.png?v=1774450562217 Translations in Action 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 working with i18n. https://play.gumlet.io/embed/69c3f3acb365493ac05a642b 554 2020-01-02T14:00:00.000Z yes no https://vueschool.io/lessons/introduce-vue-i18n-through-the-gui 2019-12-26T14:00:00.000Z https://video.gumlet.io/69c3f31fe018a8d7034858c8/69c3f3adb365493ac05a6468/thumbnail-1-0.png?v=1774450320663 Introduce Vue i18n through the GUI In this lesson, we'll learn how to install the vue-i18n plugin through the Vue CLI Graphical User Interface (GUI). The plugin can be installed with npm or yarn npm install vue-i18n # OR yarn add vue-i18n When using a module system, we must explicitly install the plugin with the Vue.use() method. import Vue from 'vue' import VueI18n from 'vue-i18n' Vue.use(VueI18n) For other installation instructions, please see the vue-i18n documentation https://play.gumlet.io/embed/69c3f3adb365493ac05a6468 396 2019-12-26T14:00:00.000Z yes no https://vueschool.io/lessons/do-it-yourself-i18n 2019-12-26T14:00:00.000Z https://video.gumlet.io/69c3f31fe018a8d7034858c8/69c3f3ace018a8d70348696f/thumbnail-1-0.png?v=1774450045196 Do it Yourself i18n Before we start using the vue-i18n plugin, we'll create a DIY solution for internationalization. This helps us get a better understanding of the task ahead, and how the plugin will be of great help to us. https://play.gumlet.io/embed/69c3f3ace018a8d70348696f 187 2019-12-26T14:00:00.000Z yes no https://vueschool.io/lessons/introduction-to-web-accessibility-fundamentals 2019-10-02T11:22:00.000Z https://video.gumlet.io/69c2ae16531f7f7b6ce8fc11/69c2b4c99ae74a342895402b/thumbnail-1-0.png?v=1774368217469 Introduction to Web Accessibility Fundamentals 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. During the course, we’ll be using Google Chrome with Vue devtools installed. We’ll also be using Visual Studio Code with Vetur (Vue extension) installed. We recommend that you install the resources above if you want to follow along. https://play.gumlet.io/embed/69c2b4c99ae74a342895402b 63 2019-10-02T11:22:00.000Z yes no https://vueschool.io/lessons/vue-router-query-parameters 2019-09-11T20:00:00.000Z https://video.gumlet.io/69679fab6a1e75f7ab3d347c/69c3d3dbe018a8d7034509d8/thumbnail-1-0.png?v=1774441965373 Vue Router Query Parameters 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://play.gumlet.io/embed/69c3d3dbe018a8d7034509d8 270 2019-09-11T20:00:00.000Z yes no https://vueschool.io/lessons/how-to-configure-an-authentication-middleware-route-guard-with-vue-router 2019-09-11T20:00:00.000Z https://video.gumlet.io/69679fab6a1e75f7ab3d347c/69c3d54c123b739cbbb211f1/thumbnail-1-0.png?v=1774442655821 How to configure an authentication middleware (route guard) with Vue Router In this lesson, we'll learn how to create authentication middleware by using route guards and meta fields. Meta fields are a powerful feature that we can use to customize or tackle advanced routing needs. https://play.gumlet.io/embed/69c3d54c123b739cbbb211f1 559 2019-09-11T20:00:00.000Z yes no https://vueschool.io/lessons/how-to-control-the-scroll-behavior-of-vue-router 2019-08-29T12:00:00.000Z https://video.gumlet.io/69679fab6a1e75f7ab3d347c/69c3d3dbe018a8d7034509dc/thumbnail-1-0.png?v=1774442149086 How to control the scroll behavior of Vue Router 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 applications when used correctly. https://play.gumlet.io/embed/69c3d3dbe018a8d7034509dc 310 2019-08-29T12:00:00.000Z yes no https://vueschool.io/lessons/how-to-create-a-404-not-found-route-and-page-with-vue-router 2019-08-29T12:00:00.000Z https://video.gumlet.io/69679fab6a1e75f7ab3d347c/69c3d3dbe018a8d7034509de/thumbnail-1-0.png?v=1774442192323 How to create a 404 Not Found route and page with Vue Router 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. We also learn how to use a navigation guard to make sure nested routes exists. https://play.gumlet.io/embed/69c3d3dbe018a8d7034509de 299 2019-08-29T12:00:00.000Z yes no https://vueschool.io/lessons/how-to-create-route-transitions-with-vue-router 2019-08-22T12:00:00.000Z https://video.gumlet.io/69679fab6a1e75f7ab3d347c/69c3d3dbe018a8d7034509da/thumbnail-1-0.png?v=1774441905662 How to create route transitions with Vue Router In this lesson, we learn how to create cool transitions when users navigate between pages on our website with the transition classes provided by Vue and Vue Router. https://play.gumlet.io/embed/69c3d3dbe018a8d7034509da 208 2019-08-22T12:00:00.000Z yes no https://vueschool.io/lessons/creating-a-go-back-button 2019-08-22T12:00:00.000Z https://video.gumlet.io/69679fab6a1e75f7ab3d347c/69c3d3db123b739cbbb1e92d/thumbnail-1-0.png?v=1774441744337 Creating a Go-Back button In this lesson, we learn how to create a go-back button and programmatically navigate to the previously visited page with Vue Router. https://play.gumlet.io/embed/69c3d3db123b739cbbb1e92d 117 2019-08-22T12:00:00.000Z yes no https://vueschool.io/lessons/vue-router-nested-routes 2019-08-22T12:00:00.000Z https://video.gumlet.io/69679fab6a1e75f7ab3d347c/69c3d3dbb365493ac05701de/thumbnail-1-0.png?v=1774442258996 Vue Router Nested Routes 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 properly. Learn how to use multiple router-views in this lesson by adding experiences to each destination in our travel app. https://play.gumlet.io/embed/69c3d3dbb365493ac05701de 453 2019-08-22T12:00:00.000Z yes no https://vueschool.io/lessons/how-to-pass-vue-router-params-as-props-to-components 2019-08-15T05:50:00.000Z https://video.gumlet.io/69679fab6a1e75f7ab3d347c/69c3d3db123b739cbbb1e941/thumbnail-1-0.png?v=1774449378110 How to pass Vue Router params as props to components 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 params as props to our route components. We also learn about the history mode of Vue router, which will remove the hash symbol in our URLs. https://play.gumlet.io/embed/69c3d3db123b739cbbb1e941 232 2019-08-15T05:50:00.000Z yes no https://vueschool.io/lessons/how-to-rerender-components-when-vue-router-params-changes 2019-08-08T10:00:00.000Z https://video.gumlet.io/69679fab6a1e75f7ab3d347c/69c3d3db123b739cbbb1e93f/thumbnail-1-0.png?v=1774449263771 How to rerender components when vue router params changes In this lesson, we learn how to re-render components when Vue Router params of the same route changes. We learn about the special key attribute of the router-view and refactor TheNavigation component to use dynamic routes. https://play.gumlet.io/embed/69c3d3db123b739cbbb1e93f 269 2019-08-08T10:00:00.000Z yes no https://vueschool.io/lessons/vue-router-dynamic-routes 2019-08-08T10:00:00.000Z https://video.gumlet.io/69679fab6a1e75f7ab3d347c/69c3d3dbe018a8d7034509e7/thumbnail-1-0.png?v=1774441982441 Vue Router Dynamic Routes In this lesson, we’ll learn how to work with dynamic routes in Vue router. We’ll learn how to declare the dynamic routes and also how to fetch and use the dynamic data in our components. https://play.gumlet.io/embed/69c3d3dbe018a8d7034509e7 235 2019-08-08T10:00:00.000Z yes no https://vueschool.io/lessons/vue-router-named-routes-and-params 2019-08-01T11:00:00.000Z https://video.gumlet.io/69679fab6a1e75f7ab3d347c/69c3d3db123b739cbbb1e92f/thumbnail-1-0.png?v=1774449117187 Vue Router Named Routes and Params 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. Named routes are highly recommended as they allow us to do changes to the URL without the need for refactoring the links in our apps. https://play.gumlet.io/embed/69c3d3db123b739cbbb1e92f 226 2019-08-01T11:00:00.000Z yes no https://vueschool.io/lessons/vue-router-active-class 2019-08-01T11:00:00.000Z https://video.gumlet.io/69679fab6a1e75f7ab3d347c/69c3d3dcb365493ac05701e4/thumbnail-1-0.png?v=1774442096907 Vue Router Active Class 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://play.gumlet.io/embed/69c3d3dcb365493ac05701e4 199 2019-08-01T11:00:00.000Z yes no https://vueschool.io/lessons/how-to-lazy-load-routes-with-vue-router 2019-07-25T14:00:00.000Z https://video.gumlet.io/69679fab6a1e75f7ab3d347c/69c3d4c8123b739cbbb202cf/thumbnail-1-0.png?v=1774442918816 How to lazy load routes with Vue Router 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. You can learn more about webpack’s code splitting feature here. If you want to learn more about how you can lazy load your Vue.js components in general, we recommend watching the Load Vue Components Asynchronously lesson. https://play.gumlet.io/embed/69c3d4c8123b739cbbb202cf 299 2019-07-25T14:00:00.000Z yes no https://vueschool.io/lessons/vuejs-router-creating-routes 2019-07-25T14:00:00.000Z https://video.gumlet.io/69679fab6a1e75f7ab3d347c/69c3d4e4123b739cbbb20604/thumbnail-1-0.png?v=1774442987916 Creating Routes In this lesson, we’re going to learn how to add new routes and pages to the Vue Router. Before we can dive into creating our travel app we need to download and import the starter files and do some light refactoring. If you're following along, make sure you Copy all the files in the assets folder to src/assets Copy the store.js file to the src folder https://play.gumlet.io/embed/69c3d4e4123b739cbbb20604 414 2019-07-25T14:00:00.000Z yes no https://vueschool.io/lessons/understanding-how-vue-router-is-setup 2019-07-18T08:06:00.000Z https://video.gumlet.io/69679fab6a1e75f7ab3d347c/69c3d4e5b365493ac0571ee7/thumbnail-1-0.png?v=1774442676420 Understanding how Vue Router is setup In this lesson, we’re getting a tour in our newly created Vue project that we created with Vue CLI GUI. We’re also going to learn about the two core components we need to work with Vue Router, namely router-link and router-view. The lesson also covers why we should not use a tags when we use Vue router to create Single Page Applications. We’re also going to learn about the logic behind Single Page Applications, and why they tend to have faster page changes compared to traditional websites. https://play.gumlet.io/embed/69c3d4e5b365493ac0571ee7 300 2019-07-18T08:06:00.000Z yes no https://vueschool.io/lessons/create-a-new-project-with-vue-router-using-the-vue-cli-ui 2019-07-18T08:06:00.000Z https://video.gumlet.io/69679fab6a1e75f7ab3d347c/69c3d520b365493ac05725cf/thumbnail-1-0.png?v=1774442335540 Create a new project with Vue Router using the Vue CLI UI In this lesson, we’re learning how to create a new Vue project that includes the Vue router with the Vue CLI GUI. If you haven’t worked with Vue CLI before, you’ll need to install it. Install Vue CLI Open up your terminal and type. npm install -g @vue/cli # OR yarn global add @vue/cli Open Vue CLI GUI vue ui https://play.gumlet.io/embed/69c3d520b365493ac05725cf 171 2019-07-18T08:06:00.000Z yes no https://vueschool.io/lessons/vue-router-course-and-resource-overview 2019-07-18T08:06:00.000Z https://video.gumlet.io/69679fab6a1e75f7ab3d347c/69c3d520e018a8d703452dd7/thumbnail-1-0.png?v=1774442361332 Vue Router Course and Resource overview In this lesson, we're demonstrating the travel app that we are going to build while learning how to master the Vue.js Router. You can enjoy the course by just watching. However, we strongly recommend that you follow along. We will also go through some resources that are optional to use while following along. You can find links to each resource below. Vue Router Course Resources Vue Router for Everyone starter files Vue.js devtools can be downloaded for Google Chrome and Mozilla Firefox Editor and Extensions VS Code Editor VS Code Vetur Extension VS Code Vue VS Code Extension Pack https://play.gumlet.io/embed/69c3d520e018a8d703452dd7 201 2019-07-18T08:06:00.000Z yes no https://vueschool.io/lessons/learn-how-to-set-default-parameter-values-in-javascript-functions 2019-08-27T10:00:00.000Z https://video.gumlet.io/6967a74d6a1e75f7ab3e15db/69c433efe018a8d7034f0540/thumbnail-1-0.png?v=1774466763040 Learn how to set default parameter values in JavaScript functions 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. We also see a few examples of how this can come in handy in our applications. https://play.gumlet.io/embed/69c433efe018a8d7034f0540 239 2019-08-27T10:00:00.000Z yes no https://vueschool.io/lessons/what-is-the-difference-between-var-let-and-const 2019-07-04T08:49:00.000Z https://video.gumlet.io/6967a74d6a1e75f7ab3e15db/69c433efe018a8d7034f053e/thumbnail-1-0.png?v=1774467118149 What is the difference between var, let and const? 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?" Click here to play with the codesandbox used in this lesson. https://play.gumlet.io/embed/69c433efe018a8d7034f053e 266 2019-07-04T08:49:00.000Z yes no https://vueschool.io/lessons/why-is-es6-and-beyond-considered-to-be-modern-javascript 2019-07-04T08:49:00.000Z https://video.gumlet.io/6967a74d6a1e75f7ab3e15db/69c433f0e018a8d7034f0553/thumbnail-1-0.png?v=1774466308084 Why is ES6 and beyond considered to be modern JavaScript? 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. We also showcase some examples of ES6 features and syntaxes you will learn in this course. https://play.gumlet.io/embed/69c433f0e018a8d7034f0553 94 2019-07-04T08:49:00.000Z yes no https://vueschool.io/lessons/how-to-test-vuejs-component-with-vuex-store 2019-06-27T14:00:00.000Z https://video.gumlet.io/69c3f344e018a8d703485cb7/69c47bcbb365493ac0674149/thumbnail-1-0.png?v=1774485319659 How to test that a Vuex Store is injected into a Vue.js component Sometimes when we're working with Vuex, it's essential to test that our components are properly integrated with Vuex. In this lesson, we're learning how to test that a Vuex Store is injected into our Vue.js component. We'll also show you a neat tip you should use to not pollute your global Vue instance when working with Vue plugins (such as Vuex). This testing lesson requires knowledge about Vuex and is optional. If you want to learn Vuex, you can watch our popular Vuex for Everyone course. https://play.gumlet.io/embed/69c47bcbb365493ac0674149 344 2019-06-27T14:00:00.000Z yes no https://vueschool.io/lessons/traversing-the-dom 2019-06-20T14:00:00.000Z https://video.gumlet.io/69c3f344e018a8d703485cb7/69c47bcbe018a8d703554ab9/thumbnail-1-0.png?v=1774485001865 Traversing The DOM 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. The techniques we learn in this testing lesson can bring you a long way in making sure that our vue.js component's works for your users. You can use any valid CSS Selector to find the DOM element you need to locate. https://play.gumlet.io/embed/69c47bcbe018a8d703554ab9 276 2019-06-20T14:00:00.000Z yes no https://vueschool.io/lessons/learn-how-to-test-vuejs-lifecycle-methods 2019-06-13T14:00:00.000Z https://video.gumlet.io/69c3f344e018a8d703485cb7/69c47bcb123b739cbbc23719/thumbnail-1-0.png?v=1774485345267 Learn How to Test Vue.js Lifecycle Methods Lifecycle methods are a very power Vue.js feature, that we use all time time. In this lesson, we’re learning how to test the vue.js lifecycle methods or lifecycle hooks as they’re also called. The lesson contains examples of how to test the mounted, beforeDestroy and destroyed hook. It should give you the insights to test any lifecycle method you desire. We will use a spy to test the beforeDestroy hook. Follow the link to learn more about spies in testing. You can find the demo on codesandbox https://play.gumlet.io/embed/69c47bcb123b739cbbc23719 471 2019-06-13T14:00:00.000Z yes no https://vueschool.io/lessons/the-wrapper-object 2019-06-06T14:00:00.000Z https://video.gumlet.io/69c3f344e018a8d703485cb7/69c47bcbb365493ac067414e/thumbnail-1-0.png?v=1774485430590 The Wrapper Object 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. Amongst other things, this allow us to easily get and set our component data when testing them. This lesson also explains why the snapshots are so easy to read. This is thanks to the jest-serializer-vue package. The package was provided with the boilerplate. If you wish to use it in your own projects, you’ll have to install it: Install jest-serializer-vue yarn add --dev jest-serializer-vue # OR npm install --save-dev jest-serializer-vue Then add this to your jest.config.js snapshotSerializers: [ "<rootDir>/node_modules/jest-serializer-vue" ] https://play.gumlet.io/embed/69c47bcbb365493ac067414e 260 2019-06-06T14:00:00.000Z yes no https://vueschool.io/lessons/mounting-components-with-vue-test-utils 2019-05-30T10:00:00.000Z https://video.gumlet.io/69c3f344e018a8d703485cb7/69c47bcbe018a8d703554acc/thumbnail-1-0.png?v=1774485378677 Mounting Components with Vue Test Utils When we’re testing our vue.js components, we need a way to mount and render the component. In this lesson, we’ll see the mount function in action. Mount creates a Wrapper that contains the mounted and rendered Vue component. We use this wrapper to test our component in various ways. In this lesson, we’ll take a look at the Wrapper HTML function, which returns the entire component DOM node as a string. If you want to learn more about snapshots, check out Snapshot Testing with Jest. https://play.gumlet.io/embed/69c47bcbe018a8d703554acc 420 2019-05-30T10:00:00.000Z yes no https://vueschool.io/lessons/installing-vue-test-utils 2019-05-30T10:00:00.000Z https://video.gumlet.io/69c3f344e018a8d703485cb7/69c47bcbb365493ac067414c/thumbnail-1-0.png?v=1774485217430 Installing Vue Test Utils Before we learn how to test our vue.js components, we need to install a few packages that will be the tools we use. In this lesson, we'll walk you through the project that we've prepared and show you how to install the required packages before we continue with testing vue.js components. We have created a boilerplate that contains the components that we will test in this course. Make sure to download or clone it (instructions below) if you want to follow along. Clone project and Install the dependencies cd ~ git clone https://github.com/vueschool/testing-vue-components.git cd testing-vue-components yarn # OR npm install Install vue-template-compiler and vue-jest yarn add vue-template-compiler vue-jest # OR npm install vue-template-compiler vue-jest Install vue-test-utils yarn add @vue/test-utils # OR npm install @vue/test-utils If you're not familiar with Jest, the testing framework, we recommend watching Test with Jest before continuing with this course. https://play.gumlet.io/embed/69c47bcbb365493ac067414c 315 2019-05-30T10:00:00.000Z yes no https://vueschool.io/lessons/dynamically-load-components 2019-05-24T12:00:00.000Z https://video.gumlet.io/69c2dc794f62335fd451a185/69c2e5a73fe452f53abc7044/thumbnail-1-0.png?v=1774381355129 Load Vue Components Asynchronously In this lesson, we'll learn how to lazy-load vue.js components to improve performance. This is an important technique to have in your tool belt when you are building kickass Vue.js applications. By lazy-loading our single file components, we reduce the size of the JavaScript bundle our users has to download before they can interact with our applications. We'll use a technique called Code Splitting, which is a common technique that has become the defacto golden standard. https://play.gumlet.io/embed/69c2e5a73fe452f53abc7044 513 2019-05-24T12:00:00.000Z yes no https://vueschool.io/lessons/introduction-to-single-file-components 2019-04-24T03:37:00.000Z https://video.gumlet.io/69c2dc794f62335fd451a185/69c2e5a705651df01cd2aae0/thumbnail-1-0.png?v=1774381058433 Introduction to Single File Components 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 a brief glimpse of how we can use pre-processors like Pug, Jade or Styles in our vue.js components. Watch our lesson on Component Names Best Practices https://play.gumlet.io/embed/69c2e5a705651df01cd2aae0 240 2019-04-24T03:37:00.000Z yes no https://vueschool.io/lessons/vuejs-component-naming-best-practices 2019-03-21T10:23:00.000Z https://video.gumlet.io/69679c7be39380f18647c66d/69c3d19bb365493ac056c4e7/thumbnail-1-0.png?v=1774441737436 Component Naming Best Practices 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 our applications will be easier to understand for other developers, just by taking a look at the component files. Important Note Since Vue.js 3 became the default you must now specify version 2 when getting Vue from a CDN. <script src="https://unpkg.com/vue@2"></script> https://play.gumlet.io/embed/69c3d19bb365493ac056c4e7 412 2019-03-21T10:23:00.000Z yes no https://vueschool.io/lessons/create-a-notification-message-component 2019-03-01T09:29:00.000Z https://video.gumlet.io/69679c7be39380f18647c66d/69c3d19be018a8d70344cd2b/thumbnail-1-0.png?v=1774441373812 #2 Create a Notification Message Component This lesson is also a component exercise lesson, where we're going to use everything we've learned about Vue.js components so far. In this component exercise, we're going to build a fun and useful component that is a notification message. In the exercise, we'll be using Semantic UI, we'll specifically use the message element. We've prepared a boilerplate as a starting point for the exercise. Your goal is to create a component that will be passed some content (the message) and the type of notification (info, error, success). The user should also be able to close the notification. We encourage you to go back and rewatch videos if you're stuck, but if want to, you can peak at the solution. Good luck and have fun! Important Note Since Vue.js 3 became the default you must now specify version 2 when getting Vue from a CDN. <script src="https://unpkg.com/vue@2"></script> https://play.gumlet.io/embed/69c3d19be018a8d70344cd2b 273 2019-03-01T09:29:00.000Z yes no https://vueschool.io/lessons/build-a-github-user-profile-component 2019-03-01T09:28:00.000Z https://video.gumlet.io/69679c7be39380f18647c66d/69c3d19b123b739cbbb1ad49/thumbnail-1-0.png?v=1774441685435 #1 Build a GitHub User Profile Component This lesson is a component exercise lesson, where we're going to use everything we've learned about Vue.js components so far. The goal is to create a component that displays a person’s GitHub profile. Including the user's avatar, name, register date, bio, and followers. In the exercise, we'll be using Semantic UI, we'll specifically use the card element. We've prepared a boilerplate as a starting point for the exercise. The Github API endpoint we'll be using is: https://api.github.com/users We encourage you to go back and rewatch videos if you're stuck, but if want to, you can peak at the solution. Good luck and have fun! Important Note Since Vue.js 3 became the default you must now specify version 2 when getting Vue from a CDN. <script src="https://unpkg.com/vue@2"></script> https://play.gumlet.io/embed/69c3d19b123b739cbbb1ad49 468 2019-03-01T09:28:00.000Z yes no https://vueschool.io/lessons/component-slots 2019-03-07T09:27:00.000Z https://video.gumlet.io/69679c7be39380f18647c66d/69c3d19b123b739cbbb1ad47/thumbnail-1-0.png?v=1774442050760 Component Slots 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. Solution to the slots exercise Remember If you need to pass HTML to your components, use slots. If you need to pass data, use props. Important Note Since Vue.js 3 became the default you must now specify version 2 when getting Vue from a CDN. <script src="https://unpkg.com/vue@2"></script> https://play.gumlet.io/embed/69c3d19b123b739cbbb1ad47 477 2019-03-07T09:27:00.000Z yes no https://vueschool.io/lessons/component-lifecycle-hooks 2019-03-07T09:26:00.000Z https://video.gumlet.io/69679c7be39380f18647c66d/69c3d19b123b739cbbb1ad45/thumbnail-1-0.png?v=1774441285843 Component Lifecycle Hooks 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 Lifecycle Hooks lesson. Important Note Since Vue.js 3 became the default you must now specify version 2 when getting Vue from a CDN. <script src="https://unpkg.com/vue@2"></script> https://play.gumlet.io/embed/69c3d19b123b739cbbb1ad45 134 2019-03-07T09:26:00.000Z yes no https://vueschool.io/lessons/communication-between-components 2019-03-21T08:20:00.000Z https://video.gumlet.io/69679c7be39380f18647c66d/69c3d19bb365493ac056c502/thumbnail-1-0.png?v=1774441540347 Communication Between Components with Custom Events We know how to pass data to a child component through props. In this lesson, we'll learn how to communicate from a child to a parent component through custom events. We will use a custom event to notify the plan-picker of which plan has been selected, and make sure we have the right logic in place so the user can only select one plan at a time. Important Note Since Vue.js 3 became the default you must now specify version 2 when getting Vue from a CDN. <script src="https://unpkg.com/vue@2"></script> https://play.gumlet.io/embed/69c3d19bb365493ac056c502 444 2019-03-21T08:20:00.000Z yes no https://vueschool.io/lessons/global-vs-local-components 2019-04-03T07:12:00.000Z https://video.gumlet.io/69679c7be39380f18647c66d/69c3d19bb365493ac056c4e5/thumbnail-1-0.png?v=1774441203928 Global vs Local Components 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 application. Important Note Since Vue.js 3 became the default you must now specify version 2 when getting Vue from a CDN. <script src="https://unpkg.com/vue@2"></script> https://play.gumlet.io/embed/69c3d19bb365493ac056c4e5 191 2019-04-03T07:12:00.000Z yes no https://vueschool.io/lessons/nested-components 2019-04-03T06:51:00.000Z https://video.gumlet.io/69679c7be39380f18647c66d/69c3d19be018a8d70344cd0c/thumbnail-1-0.png?v=1774441064861 Nested Components 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 of our apps. In this lesson, we'll learn how we can create a plan-picker component, to easily display all our plans wherever we want. Important Note Since Vue.js 3 became the default you must now specify version 2 when getting Vue from a CDN. <script src="https://unpkg.com/vue@2"></script> https://play.gumlet.io/embed/69c3d19be018a8d70344cd0c 110 2019-04-03T06:51:00.000Z yes no https://vueschool.io/lessons/reusable-components-with-props 2019-04-17T06:47:00.000Z https://video.gumlet.io/69679c7be39380f18647c66d/69c3d19bb365493ac056c4e3/thumbnail-1-0.png?v=1774441682026 Reusable Components with Props In this lesson, we'll see a realistic use case for reusable components and learn about Vue.js component props. Props are custom HTML attributes that we can register on our components, which allow us to pass data to our components. You can find the starting point of the demo in this lesson in the link. We've also created a jsfiddle if you want to play around with the code. Important Note Since Vue.js 3 became the default you must now specify version 2 when getting Vue from a CDN. <script src="https://unpkg.com/vue@2"></script> https://play.gumlet.io/embed/69c3d19bb365493ac056c4e3 406 2019-04-17T06:47:00.000Z yes no https://vueschool.io/lessons/components-template 2019-02-21T07:21:00.000Z https://video.gumlet.io/69679c7be39380f18647c66d/69c3d19be018a8d70344cd05/thumbnail-1-0.png?v=1774441206455 Component's Template 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 to the DOM in the template. In Vue.js, we can define our template in a few different ways. In this lesson, we'll move away from the inline template and use the x-template technique, which is great when you're getting started. Remember! Component template must contain exactly one root element. You can read more about Vue's Template Syntax in the documentation. Important Note Since Vue.js 3 became the default you must now specify version 2 when getting Vue from a CDN. <script src="https://unpkg.com/vue@2"></script> https://play.gumlet.io/embed/69c3d19be018a8d70344cd05 140 2019-02-21T07:21:00.000Z yes no https://vueschool.io/lessons/introduction-to-components 2019-02-21T07:04:00.000Z https://video.gumlet.io/69679c7be39380f18647c66d/69c3d19b123b739cbbb1ad5b/thumbnail-1-0.png?v=1774441279804 Introduction to Components 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. Important Note Since Vue.js 3 became the default you must now specify version 2 when getting Vue from a CDN. <script src="https://unpkg.com/vue@2"></script> https://play.gumlet.io/embed/69c3d19b123b739cbbb1ad5b 171 2019-02-21T07:04:00.000Z yes no https://vueschool.io/lessons/what-is-pre-rendering 2019-01-02T10:45:00.000Z https://video.gumlet.io/69c2a8339ae74a34289407b8/69c2a84c531f7f7b6ce86e30/thumbnail-1-0.png?v=1774365499751 What is Prerendering? 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 break it down for you and address the difference too. You can find the starting point here https://play.gumlet.io/embed/69c2a84c531f7f7b6ce86e30 114 2019-01-02T10:45:00.000Z yes no https://vueschool.io/lessons/the-axios-module 2018-12-17T09:23:00.000Z https://video.gumlet.io/69c3c9a6e018a8d70343dde6/69c4351b123b739cbbbc0e6b/thumbnail-1-0.png?v=1774467510017 The Axios Module Nuxt modules are extensions to the framework that allows us to extend its core functionality. In this lesson, we'll learn about the axios module and how we benefit from using the module. Install with yarn: yarn add @nuxtjs/axios Install with npm: npm install @nuxtjs/axios https://play.gumlet.io/embed/69c4351b123b739cbbbc0e6b 210 2018-12-17T09:23:00.000Z yes no https://vueschool.io/lessons/fetch-async-data-with-axios 2018-12-17T09:05:00.000Z https://video.gumlet.io/69c3c9a6e018a8d70343dde6/69c4351b123b739cbbbc0e67/thumbnail-1-0.png?v=1774467198988 Fetch Async Data with Axios In this lesson, we will switch to axios, which is a full-blown, promise-based HTTP client that both works in the browser and the Node environment. Since we'll be pre-rendering our website in this course, Nuxt needs an HTTP client that also works server side. Install axios with yarn yarn add axios Install axios with npm npm install axios https://play.gumlet.io/embed/69c4351b123b739cbbbc0e67 100 2018-12-17T09:05:00.000Z yes no https://vueschool.io/lessons/introduction-to-asynchronous-data-with-nuxt.js 2018-12-17T08:31:00.000Z https://video.gumlet.io/69c3c9a6e018a8d70343dde6/69c4351ce018a8d7034f2566/thumbnail-1-0.png?v=1774467650493 Introduction to Asynchronous Data with Nuxt.js This course is all about asynchronous data. To work along you will need an API. We recommend the JSON Placeholder API if you want to get up and running quickly. You can find the boilerplate that we use in the course here. In this lesson, we'll set ourselves up and fetch our first async data. This course requires that you are familiar with the Nuxt.js Fundamentals. https://play.gumlet.io/embed/69c4351ce018a8d7034f2566 292 2018-12-17T08:31:00.000Z yes no https://vueschool.io/lessons/running-the-first-test 2018-11-20T09:55:00.000Z https://video.gumlet.io/69ab6a0806a15537d0543927/69ab6a4b8b86e9ed04b1f9ab/thumbnail-1-0.png?v=1772841868127 Running the First Test In this lesson, we'll learn how to define our first test, also called specs which is short for specifications. We also learn how we can group our tests with the describe function for organizational purposes. As well as where to place our tests to make sure Jest knows about them. https://play.gumlet.io/embed/69ab6a4b8b86e9ed04b1f9ab 182 2018-11-20T09:55:00.000Z yes no https://vueschool.io/lessons/install-jest 2018-11-20T09:11:00.000Z https://video.gumlet.io/69ab6a0806a15537d0543927/69ab6a4bbb772793aa1caa56/thumbnail-1-0.png?v=1772842112697 Install Jest This course is all about unit testing with Jest and in this lesson, we'll learn how to install Jest in our project. To get started, we need a package.json. Go to your project directory and run the following commands in your terminal: yarn init -y Then we need to install Jest: yarn add --dev jest Add support for babel: yarn add --dev babel-core babel-jest babel-preset-env Create a babel preset file: touch .babelrc And add the current preset, to .babelrc: { "presets": [ "env" ] } And voilà, Jest is installed! https://play.gumlet.io/embed/69ab6a4bbb772793aa1caa56 178 2018-11-20T09:11:00.000Z yes no https://vueschool.io/lessons/how-to-deploy-nuxtjs-to-netlify 2018-11-06T13:34:00.000Z https://video.gumlet.io/696795d8e39380f186472567/69c2d191531f7f7b6cecb0a8/thumbnail-1-0.png?v=1774375871329 How to Deploy Nuxt.js to Netlify 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 like Netlify or GitHub pages which are actually free even when you have a ton of traffic. In this lesson, we're learning how to pre-render our application and deploying it to Netlify. Pre-rendering makes our application load faster, it improves SEO and can actually reduce our hosting costs drastically. https://play.gumlet.io/embed/69c2d191531f7f7b6cecb0a8 234 2018-11-06T13:34:00.000Z yes no https://vueschool.io/lessons/how-to-deploy-nuxtjs-to-heroku 2018-11-06T13:32:00.000Z https://video.gumlet.io/696795d8e39380f186472567/69c2d1914f62335fd4508b97/thumbnail-1-0.png?v=1774375976105 How to Deploy Nuxt.js to Heroku Heroku 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. Learn more about deploying your Nuxt.js app to Heroku https://play.gumlet.io/embed/69c2d1914f62335fd4508b97 227 2018-11-06T13:32:00.000Z yes no https://vueschool.io/lessons/nuxtjs-seo-and-meta-tags 2018-11-06T12:45:00.000Z https://video.gumlet.io/696795d8e39380f186472567/69c2d1914f62335fd4508ba4/thumbnail-1-0.png?v=1774375864623 SEO and Meta Tags 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://play.gumlet.io/embed/69c2d1914f62335fd4508ba4 194 2018-11-06T12:45:00.000Z yes no https://vueschool.io/lessons/utilising-the-vuex-store-nuxtjs 2018-11-06T12:42:00.000Z https://video.gumlet.io/696795d8e39380f186472567/69c2d1919ae74a342898460c/thumbnail-1-0.png?v=1774375822863 Utilising the Vuex Store Another great feature of Nuxt.js is that it supports Vuex out of the box. In this lesson, we're learning what we need to know to work with Vuex and Nuxt. You can safely skip this lesson if you do not want to use Vuex in your Nuxt.js applications We will not cover what Vuex is in this lesson. Check out our Vuex for Everyone course if you want to learn Vuex. https://play.gumlet.io/embed/69c2d1919ae74a342898460c 253 2018-11-06T12:42:00.000Z yes no https://vueschool.io/lessons/nuxtjs-dynamic-routes 2018-11-06T12:38:00.000Z https://video.gumlet.io/696795d8e39380f186472567/69c2d1919ae74a342898460e/thumbnail-1-0.png?v=1774375609780 Dynamic Routes 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. Luckily, Nuxt handles this automagically for us. https://play.gumlet.io/embed/69c2d1919ae74a342898460e 113 2018-11-06T12:38:00.000Z yes no https://vueschool.io/lessons/adding-a-navbar-to-nuxt-apps 2018-11-06T12:36:00.000Z https://video.gumlet.io/696795d8e39380f186472567/69c2d1914f62335fd4508b9c/thumbnail-1-0.png?v=1774375685490 Adding a Navbar to Nuxt Apps 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://play.gumlet.io/embed/69c2d1914f62335fd4508b9c 89 2018-11-06T12:36:00.000Z yes no https://vueschool.io/lessons/global-css 2018-11-06T12:33:00.000Z https://video.gumlet.io/696795d8e39380f186472567/69c2d1914f62335fd4508b9f/thumbnail-1-0.png?v=1774375850901 Global CSS 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. Luckily Nuxt.js has a very elegant solution that allows us to inject global CSS in our project directly from the config file. Whether it is a custom CSS file from your assets directory or an NPM package. https://play.gumlet.io/embed/69c2d1914f62335fd4508b9f 151 2018-11-06T12:33:00.000Z yes no https://vueschool.io/lessons/nuxtjs-page-components 2018-11-06T12:21:00.000Z https://video.gumlet.io/696795d8e39380f186472567/69c2d191531f7f7b6cecb0af/thumbnail-1-0.png?v=1774375872363 Nuxt.js Page Components 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. We have prepared CSS for the Post Page and the default layout component for this course. Click the links to download them individually. https://play.gumlet.io/embed/69c2d191531f7f7b6cecb0af 179 2018-11-06T12:21:00.000Z yes no https://vueschool.io/lessons/customize-the-home-page 2018-11-06T12:16:00.000Z https://video.gumlet.io/696795d8e39380f186472567/69c2d1919ae74a3428984625/thumbnail-1-0.png?v=1774375651578 Customize the home page In this lesson, we start to customize our home page of our Nuxt project. Click here to get the CSS we use in the video. https://play.gumlet.io/embed/69c2d1919ae74a3428984625 56 2018-11-06T12:16:00.000Z yes no https://vueschool.io/lessons/guided-nuxtjs-project-tour 2018-11-06T11:53:00.000Z https://video.gumlet.io/696795d8e39380f186472567/69c2d224531f7f7b6cecbd12/thumbnail-1-0.png?v=1774375930203 Guided Nuxt.js Project Tour In this lesson, we'll show you around in our newly created Nuxt project. Please note that each directory includes a readme file, that explains what the directory is. You can safely delete the directories of the features you do not need. https://play.gumlet.io/embed/69c2d224531f7f7b6cecbd12 122 2018-11-06T11:53:00.000Z yes no https://vueschool.io/lessons/create-nuxt-app 2018-11-06T11:36:00.000Z https://video.gumlet.io/696795d8e39380f186472567/69c2d2264f62335fd45097e6/thumbnail-1-0.png?v=1774375711945 Create Nuxt App Nuxt.js has an official scaffolding tool (create-nuxt-app), that you can use from your package manager. In this lesson, we will use yarn to set up our new Nuxt.js project, with this command: yarn create nuxt-app nuxt-fundamentals You can also use npx (´npx´ is shipped by default since NPM ´5.2.0´) npx create-nuxt-app nuxt-fundamentals https://play.gumlet.io/embed/69c2d2264f62335fd45097e6 98 2018-11-06T11:36:00.000Z yes no https://vueschool.io/lessons/what-is-nuxtjs 2018-11-06T11:27:00.000Z https://video.gumlet.io/696795d8e39380f186472567/69c2d2309ae74a34289853fa/thumbnail-1-0.png?v=1774375921632 What is Nuxt.js? 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. In this lesson, we talk about some of the awesome features Nuxt.js brings to the table: SEO with Server Side Rendering (SSR) Pre Rendering Code Splitting You do not need to know Nuxt.js to take this course, but you should know Vue.js. Check out our other courses if you want to learn Vue.js. https://play.gumlet.io/embed/69c2d2309ae74a34289853fa 225 2018-11-06T11:27:00.000Z yes no https://vueschool.io/lessons/custom-vuejs-directive-values 2018-10-15T10:51:00.000Z https://video.gumlet.io/69c4806c123b739cbbc2895d/69c480a2b365493ac067994c/thumbnail-1-0.png?v=1774486142124 Custom Directive's Value 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://play.gumlet.io/embed/69c480a2b365493ac067994c 201 2018-10-15T10:51:00.000Z yes no https://vueschool.io/lessons/create-vuejs-directive 2018-10-15T10:47:00.000Z https://video.gumlet.io/69c4806c123b739cbbc2895d/69c480a2123b739cbbc28df0/thumbnail-1-0.png?v=1774486078910 Create Vue.js Directive In this lesson, you'll learn how to create a custom Vue.js directive. We will create a very important directive that we simply cannot live without. We will create the v-purple directive. https://play.gumlet.io/embed/69c480a2123b739cbbc28df0 83 2018-10-15T10:47:00.000Z yes no https://vueschool.io/lessons/understanding-vuejs-directives 2018-10-15T10:37:00.000Z https://video.gumlet.io/69c4806c123b739cbbc2895d/69c480a2123b739cbbc28df9/thumbnail-1-0.png?v=1774486267246 Understanding Vue.js Directives 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 can be modified with modifiers. https://play.gumlet.io/embed/69c480a2123b739cbbc28df9 155 2018-10-15T10:37:00.000Z yes no https://vueschool.io/lessons/why-is-testing-important 2018-10-15T07:22:00.000Z https://video.gumlet.io/6967ac30b25141dfa4d0a48a/69c3e222123b739cbbb3703b/thumbnail-1-0.png?v=1774445881679 Why is testing important? Testing your software is important, and in this lesson, we will tell you why. https://play.gumlet.io/embed/69c3e222123b739cbbb3703b 200 2018-10-15T07:22:00.000Z yes no https://vueschool.io/lessons/what-are-stubs 2018-10-15T07:06:00.000Z https://video.gumlet.io/6967ac30b25141dfa4d0a48a/69c3e222e018a8d703468f7b/thumbnail-1-0.png?v=1774445461302 What are stubs? In this lesson, we're learning what stubs are when it comes to JavaScript testing. Stubs are similar to mocks, but they only replace small parts of your code compared to Mocks who replace the entire dependency. https://play.gumlet.io/embed/69c3e222e018a8d703468f7b 188 2018-10-15T07:06:00.000Z yes no https://vueschool.io/lessons/what-are-spies-javascript-testing 2018-10-15T06:37:00.000Z https://video.gumlet.io/6967ac30b25141dfa4d0a48a/69c3e222123b739cbbb37039/thumbnail-1-0.png?v=1774445330808 What are spies? 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://play.gumlet.io/embed/69c3e222123b739cbbb37039 144 2018-10-15T06:37:00.000Z yes no https://vueschool.io/lessons/what-are-mocks-and-mocking-javascript-testing 2018-10-15T06:05:00.000Z https://video.gumlet.io/6967ac30b25141dfa4d0a48a/69c3e222123b739cbbb3703d/thumbnail-1-0.png?v=1774445478291 What are mocks and mocking? 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://play.gumlet.io/embed/69c3e222123b739cbbb3703d 250 2018-10-15T06:05:00.000Z yes no https://vueschool.io/lessons/types-of-testing 2018-10-15T05:57:00.000Z https://video.gumlet.io/6967ac30b25141dfa4d0a48a/69c3e222e018a8d703468f79/thumbnail-1-0.png?v=1774445520921 Types of Testing In this lesson about testing, we're learning about the different types of tests we can create. We'll talk about Unit Tests Integration Tests Acceptance Tests (often called end-to-end tests) https://play.gumlet.io/embed/69c3e222e018a8d703468f79 290 2018-10-15T05:57:00.000Z yes no https://vueschool.io/lessons/what-to-test 2018-10-15T05:00:00.000Z https://video.gumlet.io/6967ac30b25141dfa4d0a48a/69c3e222e018a8d703468f76/thumbnail-1-0.png?v=1774445441682 What to test? 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://play.gumlet.io/embed/69c3e222e018a8d703468f76 259 2018-10-15T05:00:00.000Z yes no https://vueschool.io/lessons/control-child-component-through-refs 2018-09-15T15:56:00.000Z https://video.gumlet.io/69c2eb963b13b4783935ee09/69c2ee986eaf6261464c55b5/thumbnail-1-0.png?v=1774383385282 Control Child Component Through refs In this lesson, we'll learn how to control a component through the powerful ref feature of Vue.js. By assigning a ref to the component, we have full access and control over the step, which is exactly what our mama form needs. https://play.gumlet.io/embed/69c2ee986eaf6261464c55b5 341 2018-09-15T15:56:00.000Z yes no https://vueschool.io/lessons/communication-between-forms 2018-09-15T15:07:00.000Z https://video.gumlet.io/69c2eb963b13b4783935ee09/69c2ee986eaf6261464c55b3/thumbnail-1-0.png?v=1774383581435 Communication Between Forms 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. Make sure you have the boilerplate by either downloading the starting-point branch directly from GitHub or cloning it in your terminal: git clone --single-branch -b starting-point git@github.com:vueschool/dynamic-forms.git See our Form Validation Course if you want to learn more about the topic or the Event Documentation if needed. https://play.gumlet.io/embed/69c2ee986eaf6261464c55b3 511 2018-09-15T15:07:00.000Z yes no https://vueschool.io/lessons/the-dynamic-form 2018-09-15T14:48:00.000Z https://video.gumlet.io/69c2eb963b13b4783935ee09/69c2ef2006e4c3b9a357ce7b/thumbnail-1-0.png?v=1774383127016 The Badass Dynamic Form This course is all about dynamic forms and in this lesson, we'll go through what we will build. The dynamic form of this vue.js course will have the following steps: Pick a Coffee plan Login or register Enter shipping details A summary page where you can add additional treats Confirm order The course requires some markup and CSS that we have prepared beforehand, make sure you download the starting point. You can run this command in your favorite terminal: git clone --single-branch -b starting-point git@github.com:vueschool/dynamic-forms.git Or download the starting-point branch directly from GitHub. https://play.gumlet.io/embed/69c2ef2006e4c3b9a357ce7b 100 2018-09-15T14:48:00.000Z yes no https://vueschool.io/lessons/vuejs-form-validation-with-vuelidate 2018-08-21T07:54:00.000Z https://video.gumlet.io/6967acf36a1e75f7ab3ec406/69c3ca95e018a8d703440090/thumbnail-1-0.png?v=1774439734129 Form Validation with Vuelidate In this lesson, we'll get started with Vuelidate and take a look at how we can validate our forms with Vuelidates validators. https://play.gumlet.io/embed/69c3ca95e018a8d703440090 309 2018-08-21T07:54:00.000Z yes no https://vueschool.io/lessons/vuejs-form-validation-diy 2018-08-21T07:29:00.000Z https://video.gumlet.io/6967acf36a1e75f7ab3ec406/69c3caca123b739cbbb0ea92/thumbnail-1-0.png?v=1774439946500 Do It Yourself Form Validation 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. This lesson works as an intro to the form validation chapter. We will take a look at what's required from our end to validate forms and provide a rich user experience when validation forms in this lesson. https://play.gumlet.io/embed/69c3caca123b739cbbb0ea92 385 2018-08-21T07:29:00.000Z yes no https://vueschool.io/lessons/global-navigation-guards-and-meta-fields 2018-06-27T08:16:00.000Z https://video.gumlet.io/696793cbb25141dfa4ce0854/69c6f7f81f1dc34da84fb7be/thumbnail-1-0.png?v=1774650618646 Global Navigation Guards and Meta Fields 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 hook and make decisions based on a routes meta fields (e.g. requiresAuth: true). In this lesson, we'll learn how to set up global navigation guards and get a few ideas on how we can benefit from storing data in the route meta fields. https://play.gumlet.io/embed/69c6f7f81f1dc34da84fb7be 298 2018-06-27T08:16:00.000Z yes no https://vueschool.io/lessons/vuejs-computed-properties 2018-06-21T14:49:00.000Z https://video.gumlet.io/696793f5b25141dfa4ce0cf1/69c1c661c98b51e9c5647eae/thumbnail-1-0.png?v=1774316263969 Computed Properties 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. Computed properties are very useful and should replace complex in-template expressions. While this explanation without any code examples might not make much sense right now, it surely will after you've watched this lessons on computed properties. https://play.gumlet.io/embed/69c1c661c98b51e9c5647eae 270 2018-06-21T14:49:00.000Z yes no https://vueschool.io/lessons/vuejs-dynamic-classes 2018-06-21T11:30:00.000Z https://video.gumlet.io/696793f5b25141dfa4ce0cf1/69c1c66124ffd038ef7e030f/thumbnail-1-0.png?v=1774309308619 Dynamic Classes A common need and use case for attribute bindings is to manipulate the look of elements through CSS classes or style attributes. To make this task easier than ever, Vue provides special enhancements when v-bind is used with the class or style attribute. In this lesson, we're learning how to apply classes based on our Vue data conditionally. https://play.gumlet.io/embed/69c1c66124ffd038ef7e030f 472 2018-06-21T11:30:00.000Z yes no https://vueschool.io/lessons/vuejs-attribute-bindings 2018-06-21T11:26:00.000Z https://video.gumlet.io/696793f5b25141dfa4ce0cf1/69c1c66138a6314ac3a75736/thumbnail-1-0.png?v=1774308428475 Attribute Bindings 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. This is achieved with Vue's v-bind directive and would let us change the href of a link or swap out an image if we need to. https://play.gumlet.io/embed/69c1c66138a6314ac3a75736 175 2018-06-21T11:26:00.000Z yes no https://vueschool.io/lessons/vuejs-conditionals 2018-06-21T11:12:00.000Z https://video.gumlet.io/696793f5b25141dfa4ce0cf1/69c1c66124ffd038ef7e0309/thumbnail-1-0.png?v=1774308818676 Conditional Rendering 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 directives work. https://play.gumlet.io/embed/69c1c66124ffd038ef7e0309 253 2018-06-21T11:12:00.000Z yes no https://vueschool.io/lessons/vue-methods 2018-06-21T11:08:00.000Z https://video.gumlet.io/696793f5b25141dfa4ce0cf1/69c1c66124ffd038ef7e02e8/thumbnail-1-0.png?v=1774308630582 Vue Methods It is handy to be able to run JavaScript expressions directly in the template or a directive sometimes - but not always. When the expression is getting too verbose or needs to be reused in multiple places, we can extract the logic to a function and fire the function instead. These functions are called methods and allow us to DRY up the code. https://play.gumlet.io/embed/69c1c66124ffd038ef7e02e8 318 2018-06-21T11:08:00.000Z yes no https://vueschool.io/lessons/vuejs-user-events 2018-06-21T11:01:00.000Z https://video.gumlet.io/696793f5b25141dfa4ce0cf1/69c1c66124ffd038ef7e030d/thumbnail-1-0.png?v=1774308812632 User Events In this lesson, we'll learn how to respond to user events with Vue's v-on directive. https://play.gumlet.io/embed/69c1c66124ffd038ef7e030d 340 2018-06-21T11:01:00.000Z yes no https://vueschool.io/lessons/vuejs-user-inputs-vue-devtools 2018-06-21T10:56:00.000Z https://video.gumlet.io/696793f5b25141dfa4ce0cf1/69c1c66138a6314ac3a75738/thumbnail-1-0.png?v=1774309041993 User Inputs & Vue Devtools 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 Devtools is an invaluable browser extension to Chrome and Firefox that will speed up your development and bug hunting. https://play.gumlet.io/embed/69c1c66138a6314ac3a75738 667 2018-06-21T10:56:00.000Z yes no https://vueschool.io/lessons/vuejs-loops 2018-06-21T10:48:00.000Z https://video.gumlet.io/696793f5b25141dfa4ce0cf1/69c1c66138a6314ac3a75734/thumbnail-1-0.png?v=1774308933660 List Rendering 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 us filter through arrays and objects in an elegant matter. https://play.gumlet.io/embed/69c1c66138a6314ac3a75734 466 2018-06-21T10:48:00.000Z yes no https://vueschool.io/lessons/vuejs-template-syntax-and-expressions 2018-06-21T10:36:00.000Z https://video.gumlet.io/696793f5b25141dfa4ce0cf1/69c1c66138a6314ac3a75732/thumbnail-1-0.png?v=1774308437914 Vue.js Template Syntax And Expressions In the previous lesson, we briefly touched upon the templating syntax where we bind Vue data to the DOM. In this lesson, we'll take deeper dive into the Vue's templating syntax and learn how to run JavaScript expressions in the template. https://play.gumlet.io/embed/69c1c66138a6314ac3a75732 146 2018-06-21T10:36:00.000Z yes no https://vueschool.io/lessons/getting-started-with-vuejs 2018-06-21T10:33:00.000Z https://video.gumlet.io/696793f5b25141dfa4ce0cf1/69c1c661c98b51e9c5647ebf/thumbnail-1-0.png?v=1774308825621 Getting Started With Vue.js 2 In the very first lesson of our Vue.js 2 Fundamentals course, besides of learning how to easily add Vue.js from a CDN to our site we're going to take a look at Vue.js enjoyable and automatic reactivity system. Install Snippet <script src="https://unpkg.com/vue@2"></script> https://play.gumlet.io/embed/69c1c661c98b51e9c5647ebf 232 2018-06-21T10:33:00.000Z yes no https://vueschool.io/lessons/componentless-routes-with-navigation-guards 2018-06-19T08:02:00.000Z https://video.gumlet.io/696793cbb25141dfa4ce0854/69c6f7f7f7bf88d62b0e33f8/thumbnail-1-0.png?v=1774650318566 Componentless Routes with Navigation Guards In-component guards are useful in certain scenarios, in this lesson we're learning how to set the guard directly in the Vue router. We will also learn how we can create navigation guards for componentless routes (such as logout). https://play.gumlet.io/embed/69c6f7f7f7bf88d62b0e33f8 174 2018-06-19T08:02:00.000Z yes no https://vueschool.io/lessons/in-component-navigation-guards 2018-06-19T07:28:00.000Z https://video.gumlet.io/696793cbb25141dfa4ce0854/69c6f7c2f7bf88d62b0e2e32/thumbnail-1-0.png?v=1774650540824 In Component Navigation Guards 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. A navigation guard acts as a middleware that can protect a route component. We're also learning how to access data from child components through component refs and how to prevent navigation if a user has made changes to a form. Click here for the exercise solution. https://play.gumlet.io/embed/69c6f7c2f7bf88d62b0e2e32 424 2018-06-19T07:28:00.000Z yes no https://vueschool.io/lessons/sign-up-in-or-out-with-firebase-authentication 2018-05-11T11:41:00.000Z https://video.gumlet.io/69c2e5f41f4c44c59079249e/69c2e8173fe452f53abca467/thumbnail-1-0.png?v=1774381896240 Sign up, in, or out with Firebase Authentication 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 an event listener to manage the authenticated state of the Firebase user when he or she signs in and out. https://play.gumlet.io/embed/69c2e8173fe452f53abca467 468 2018-05-11T11:41:00.000Z yes no https://vueschool.io/lessons/introduction-to-firebase-authentication 2018-05-11T11:36:00.000Z https://video.gumlet.io/69c2e5f41f4c44c59079249e/69c2e8171f4c44c5907953bd/thumbnail-1-0.png?v=1774382271830 Introduction to Firebase Authentication 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://play.gumlet.io/embed/69c2e8171f4c44c5907953bd 95 2018-05-11T11:36:00.000Z yes no https://vueschool.io/lessons/understanding-the-vuejs-lifecycle-hooks 2018-04-07T12:38:00.000Z https://video.gumlet.io/696793cbb25141dfa4ce0854/69c6fa9f1f1dc34da850084e/thumbnail-1-0.png?v=1774652358617 Understanding the Vue.js Lifecycle Hooks 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 lifecycle hooks. https://play.gumlet.io/embed/69c6fa9f1f1dc34da850084e 262 2018-04-07T12:38:00.000Z yes no https://vueschool.io/lessons/meet-firebase-realtime-database 2018-03-27T07:35:00.000Z https://video.gumlet.io/69c3c984e018a8d70343d85a/69c3e7b0b365493ac0590b29/thumbnail-1-0.png?v=1774454600966 Meet Firebase Realtime Database In this lesson, we'll create our first realtime database in Firebase, and prepare the necessary data structure for our realtime chatroom. You can find the JSON file on GitHub. https://play.gumlet.io/embed/69c3e7b0b365493ac0590b29 186 2018-03-27T07:35:00.000Z yes no https://vueschool.io/lessons/what-is-firebase-and-why-is-it-so-great 2018-03-27T07:33:00.000Z https://video.gumlet.io/69c3c984e018a8d70343d85a/69c3e7b0123b739cbbb3f2e0/thumbnail-1-0.png?v=1774447023485 What is Firebase and Why is it so Great? 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. In this intro lesson, we'll run a short introduction to Firebase, some of their features, prices, and lastly answer a common question: Who uses Firebase in production? https://play.gumlet.io/embed/69c3e7b0123b739cbbb3f2e0 126 2018-03-27T07:33:00.000Z yes no https://vueschool.io/lessons/what-is-a-higher-order-function 2018-03-15T08:03:00.000Z https://video.gumlet.io/696793cbb25141dfa4ce0854/69c6fa2b7a8212fa5f91c6f3/thumbnail-1-0.png?v=1774652085315 What is a Higher Order Function? 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 either accepts a function or returns a function, but let's see how we would use them in our applications. https://play.gumlet.io/embed/69c6fa2b7a8212fa5f91c6f3 273 2018-03-15T08:03:00.000Z yes no https://vueschool.io/lessons/vuejs-custom-prop-validation 2018-03-05T10:33:00.000Z https://video.gumlet.io/696793cbb25141dfa4ce0854/69c6fa147a8212fa5f91c41c/thumbnail-1-0.png?v=1774652098847 Vue.js Custom Prop Validation 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 validate that the component received precisely what it needs. In this lesson, we'll create a custom validator for our post prop, and also throw errors in the console if the post is invalid. https://play.gumlet.io/embed/69c6fa147a8212fa5f91c41c 188 2018-03-05T10:33:00.000Z yes no https://vueschool.io/lessons/split-vuex-store-in-multiple-files 2018-01-31T13:20:00.000Z https://video.gumlet.io/6967948cb25141dfa4ce1eec/69ab60b28b86e9ed04b14302/thumbnail-1-0.png?v=1772839646094 Split Vuex Store in Multiple Files 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://play.gumlet.io/embed/69ab60b28b86e9ed04b14302 71 2018-01-31T13:20:00.000Z yes no https://vueschool.io/lessons/module-namespaces 2018-01-25T06:44:00.000Z https://video.gumlet.io/6967948cb25141dfa4ce1eec/69ab612206a15537d05391c5/thumbnail-1-0.png?v=1772840224408 Namespaced Vuex Modules 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 same mutation or action. In this lesson we’re going to learn how to namespace our Vuex modules, to control this behavior. This lesson is the final tutorial in our Vuex for Everyone course. If you’re enrolled in The Vue.js Master Class, we’ll show you how to implement and use everything we’ve learned in this course in a real-world application. If you like this Vue.js course, please share it with your friends. https://play.gumlet.io/embed/69ab612206a15537d05391c5 387 2018-01-25T06:44:00.000Z yes no https://vueschool.io/lessons/vuex-modules 2018-01-25T06:43:00.000Z https://video.gumlet.io/6967948cb25141dfa4ce1eec/69ab662d06a15537d053ef84/thumbnail-1-0.png?v=1772848396238 Vuex Modules When splitting the store into multiple files isn’t enough, you can extract the store into multiple Vuex modules. Each Vuex modules can contain its own state, mutations, actions, getters and even their own modules. In this vue.js tutorial, we’ll learn how to use Vuex Modules and implement it in our shopping cart app. https://play.gumlet.io/embed/69ab662d06a15537d053ef84 443 2018-01-25T06:43:00.000Z yes no https://vueschool.io/lessons/vuex-mapping-state-mutations-getters-and-actions 2018-01-25T06:42:00.000Z https://video.gumlet.io/6967948cb25141dfa4ce1eec/69ab60b206a15537d053897c/thumbnail-1-0.png?v=1772840149371 Vuex Map Helpers 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 mapMutations. We also use and explain the ES7 Object Spread Operator, which we use to combine maps and ordinary properties. https://play.gumlet.io/embed/69ab60b206a15537d053897c 484 2018-01-25T06:42:00.000Z yes no https://vueschool.io/lessons/dynamic-vuex-getters 2018-01-25T06:40:00.000Z https://video.gumlet.io/6967948cb25141dfa4ce1eec/69ab60b206a15537d0538986/thumbnail-1-0.png?v=1772839853954 Dynamic Vuex Getters 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 useful if you want to query your store. A common use case is to create a getter to find an item in the state using its id. getProductById (state, getters) { return id => { return state.products.find(product => product.id === id) } } https://play.gumlet.io/embed/69ab60b206a15537d0538986 151 2018-01-25T06:40:00.000Z yes no https://vueschool.io/lessons/vuex-mutation-history-and-vue-devtools 2018-01-25T05:55:00.000Z https://video.gumlet.io/6967948cb25141dfa4ce1eec/69ab60b206a15537d0538966/thumbnail-1-0.png?v=1772839966308 Vuex Mutation History and Vue Devtools In this tutorial, we’ll show you how you can test drive your shopping cart functionality with the Vue Devtools. The devtools have a Vuex tab, and whenever Vuex dispatches a mutation, a history event is logged. This makes it easy to see that your Vue application works as expected and debug it if needed. Watch the lesson to learn more about this Vue necessity! Vue Devtools are available for Firefox and Chrome, if you haven’t installed it yet, you definitely should! https://play.gumlet.io/embed/69ab60b206a15537d0538966 166 2018-01-25T05:55:00.000Z yes no https://vueschool.io/lessons/checkout 2018-01-19T17:22:00.000Z https://video.gumlet.io/6967948cb25141dfa4ce1eec/69ab60b206a15537d0538988/thumbnail-1-0.png?v=1772840082975 Checkout 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. A checkout process is usually responsible for multiple things, some of them could be: Checking if the items are still in stock Interacting with the payment processor Emptying the cart Reporting back to the user if the purchase was successful or not In this vue.js tutorial, we’re doing a simplified version of a checkout process, but what we already know is that multiple things will need to take place. We’ve said it before, and you probably remember, but we’re going to repeat ourselves: In Vuex, actions are responsible for the logic of when a mutation should be dispatched, while each mutation is only responsible for one single state change. Can you imagine how we’re going to structure our checkout action? https://play.gumlet.io/embed/69ab60b206a15537d0538988 229 2018-01-19T17:22:00.000Z yes no https://vueschool.io/lessons/cart-items-and-total 2018-01-19T17:21:00.000Z https://video.gumlet.io/6967948cb25141dfa4ce1eec/69ab60b2bb772793aa1bf28a/thumbnail-1-0.png?v=1772839726323 Cart items and total When you’re developing, it’s very handy to test drive the application with the Vue devtools, but it’s not enough for the end users. In this tutorial we’ll create the ShoppingCart component and interact with the Vuex state through getters, to get the items in the cart along with the cart total. https://play.gumlet.io/embed/69ab60b2bb772793aa1bf28a 272 2018-01-19T17:21:00.000Z yes no https://vueschool.io/lessons/add-products-to-the-cart 2018-01-19T17:20:00.000Z https://video.gumlet.io/6967948cb25141dfa4ce1eec/69ab60b2bb772793aa1bf28e/thumbnail-1-0.png?v=1772846944042 Add products to the cart 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. We’ll create the actual shopping cart in the state and make it functional by setting up the action and mutations necessary. Remember that Vuex actions are responsible for handling the logic of when a mutation should be fired (dispatched), while mutations have the single responsibility of altering the state. https://play.gumlet.io/embed/69ab60b2bb772793aa1bf28e 308 2018-01-19T17:20:00.000Z yes no https://vueschool.io/lessons/store-access-from-all-components 2018-01-19T10:54:00.000Z https://video.gumlet.io/6967948cb25141dfa4ce1eec/69ab60b206a15537d053895d/thumbnail-1-0.png?v=1772839413666 Store Access from all Components In this lesson, we’ll learn how we can easily access the Vuex store from all child components. https://play.gumlet.io/embed/69ab60b206a15537d053895d 53 2018-01-19T10:54:00.000Z yes no https://vueschool.io/lessons/vuex-actions 2018-01-19T10:42:00.000Z https://video.gumlet.io/6967948cb25141dfa4ce1eec/69ab60b2bb772793aa1bf28c/thumbnail-1-0.png?v=1772840162064 Vuex Actions In this lesson, we’ll dive into what Vuex actions are, and how and where to define in our application. We’ll point out a true benefit of using actions to fetch our products from the store compared to fetching products directly inside a component. Since actions usually are asynchronous we’ve added a little bonus section with promises. As always we’ll implement what we’ve learned and progressively build our shopping cart. You can find the spinner image here. https://play.gumlet.io/embed/69ab60b2bb772793aa1bf28c 265 2018-01-19T10:42:00.000Z yes no https://vueschool.io/lessons/vuex-getters 2018-01-19T10:34:00.000Z https://video.gumlet.io/6967948cb25141dfa4ce1eec/69ab60b206a15537d0538968/thumbnail-1-0.png?v=1772840579267 Vuex Getters Think of the Vuex getters as computed properties - perfect when we need to filter or calculate something at runtime. This lesson explains how the getters work, and how and where to define them. We’ll also implement what we’ve learned in our shopping cart. https://play.gumlet.io/embed/69ab60b206a15537d0538968 117 2018-01-19T10:34:00.000Z yes no https://vueschool.io/lessons/vuex-mutations 2018-01-19T10:27:00.000Z https://video.gumlet.io/6967948cb25141dfa4ce1eec/69ab61418b86e9ed04b14d27/thumbnail-1-0.png?v=1772840159535 Vuex Mutations 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 true difference between actions and mutations. We’ll also implement what we’ve learned in our shopping cart app. https://play.gumlet.io/embed/69ab61418b86e9ed04b14d27 202 2018-01-19T10:27:00.000Z yes no https://vueschool.io/lessons/install-and-use-vuex 2018-01-19T10:14:00.000Z https://video.gumlet.io/6967948cb25141dfa4ce1eec/69ab6141bb772793aa1bfd1d/thumbnail-1-0.png?v=1772840040459 Install and use Vuex In this Vuex lesson, we’ll learn how to install and use Vuex in any application. We’ll then take a brief theoretical look at the different Vuex options available. The available options are state, getters, actions, and mutations. Modules will be introduced later in the course. https://play.gumlet.io/embed/69ab6141bb772793aa1bfd1d 117 2018-01-19T10:14:00.000Z yes no https://vueschool.io/lessons/create-a-new-project-with-vue-cli 2018-01-19T10:04:00.000Z https://video.gumlet.io/6967948cb25141dfa4ce1eec/69ab61228b86e9ed04b14b28/thumbnail-1-0.png?v=1772840047197 Create a new project with vue-cli 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. Did you know that our Vuex course is based on the official Vuex example? Since it is, we’ll grab the shop.js from the official Github repo which will serve as our simulated API. https://play.gumlet.io/embed/69ab61228b86e9ed04b14b28 225 2018-01-19T10:04:00.000Z yes no https://vueschool.io/lessons/meet-vuex 2018-01-19T09:35:00.000Z https://video.gumlet.io/6967948cb25141dfa4ce1eec/69ab612206a15537d05391d4/thumbnail-1-0.png?v=1772847078575 Meet Vuex 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 introductory lesson to Vuex, you'll have a deeper understanding of how Vuex works and the benefit of using Vuex as a centralized store. We'll also answer the frequently asked question of when to use Vuex. https://play.gumlet.io/embed/69ab612206a15537d05391d4 166 2018-01-19T09:35:00.000Z yes no