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/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/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/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/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/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/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/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/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/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/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/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/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-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/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/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/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/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/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/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/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/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/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