Pandan Studio
Intermediate Vue
3 hours, 49 minutes
CC
Course Description
Master Vue and build scalable, reusable components like a pro! Get hands-on with the Composition API, transparent component design, and scoped slots while creating composables for sharing logic across your applications. Implement file-based routing with Vue Router for streamlined navigation, and solve state management challenges with the help of Pinia. Leverage Vue 3's improved developer experience and gain the skills to take the lead on your next Vue project.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: July 15, 2025
Rating
Learning Paths
Topics
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 250+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 5 minutes
Ben Hong introduces course by providing an overview of what will be covered including components, composables, routing, and state management. He also outlines the prerequisites, emphasizing a basic understanding of Vue 3 fundamentals and the Composition API.
Component Design Patterns
Section Duration: 1 hour, 18 minutes
Ben discusses managing dependencies with third-party libraries and frequent design changes. He demonstrates a vendor wrapper for handling custom icons and introduces the v-bind/v-on object syntax for dynamic props and events.
Ben introduces transparent components, showing how to build reusable form inputs with v-model support. He also introduces a helper function called `defineModel` to streamline the process of setting up v-model bindings.
Ben instructs students to create a BaseTextarea component by applying key concepts like component wrapping and prop usage. He also addresses naming conventions and best practices to prevent conflicts, along with troubleshooting script setup and TypeScript type inference issues.
Ben discusses scoped slots, which allow a parent component to access and manipulate data from a child component for more flexible component design. Scoped slots are useful in scenarios where standard data flow models may not suffice, such as when using third-party libraries or creating components with varying display requirements.
Ben explains that slot props in Vue.js allow clear, scoped data passing but limit access outside the slot. He introduces useSlots for dynamic slot control and emphasizes composition over configuration for more flexible component design.
Ben briefly discusses defineExpose, which allows child components to share properties with their parents. While this can be useful, it risks breaking encapsulation. He emphasizes that it should be reserved for edge cases to avoid messy code.
Ben instructs students to create a NewPlannerCard component by using useSlots to render actions and text differently. Ben also demonstrates handling props, toggling visibility, and using slots effectively to enhance the component structure.
Understanding Composables
Section Duration: 40 minutes
Ben explains that composables are reusable functions built with Vue’s composition API, allowing developers to share logic like task filtering across components. They help organize code by feature rather than separating it into options like data and computed.
Ben explains the difference between composables and utilities in Vue.js development. Composables are related to view composition and stateful UI, while utilities are more generic and focused on pure functions like lodash or moment JS.
Ben explains the difference between named exports and default exports in JavaScript when writing composables. Named exports involve explicitly naming each export, while default exports use an unnamed function exported with the keyword "default." Ben recommends using named exports for consistency, avoiding naming collisions, and benefiting from autocomplete features.
Ben instructs students to create a useWeek composable to streamline code sharing and look for opportunities to create dateTime.ts utility functions. He also walks through refactoring duplicated logic into a composable for easy reuse across components, highlighting the benefits of composables for sharing state efficiently.
Ben discusses creating flexible composables by standardizing return values and using types like MaybeRefOrGetter to handle various input types. This ensures consistency when working with reactive and plain values.
Routing Techniques
Section Duration: 23 minutes
Ben explains how file-based routing in Vue Router simplifies configuration by aligning URLs with the file and folder structure. This approach streamlines route management, reduces manual setup, and improves clarity when organizing components. He demonstrates how auto-generated routes enhance efficiency and the overall developer experience.
Ben instructs students to migrate routes to file-based routing, highlighting how it can coexist with manual routing for flexibility. He walks through the migration process, covering wildcard routes, folder structure, and using aliases in Vue config to simplify paths and debug issues.
Advanced Composable Patterns
Section Duration: 47 minutes
Ben introduces shallow ref in Vue.js as a way to improve performance by avoiding deep reactivity for large data. He recommends it for tests needing only top-level changes and also explains JavaScript singletons as shared instances across components.
Ben explains the factory pattern in state management, contrasting it with the Datastore pattern, which shares a singleton state modified through functions. He also covers using getters, actions, and read-only values to protect state.
Ben instructs students to apply the factory pattern to useFetch.ts and refactor useWeek into a store-like pattern. He highlights the common pattern of fetching data, checking the response, and converting it to JSON. He also encourages exploring advanced fetch implementations for practice.
Ben introduces VueUse, focusing on useStorage for easier local storage. He highlights using options objects in composables to simplify functions and enable features like media controls and color mode detection.
Ben instructs students to create a useTheme composable to switch between themes on the settings page and and apply useMagicKeys composable to switch between the different themes. He also demonstrates implementing these composables, and discusses other useful composables like useMediaPlayer for video controls and useClipboard for clipboard history.
State Management
Section Duration: 25 minutes
Ben discusses the importance of state management libraries like Pinya, highlighting how they provide a set of standards for teams to follow, ensuring consistency and facilitating collaboration. He points out that Pinya offers features such as dev tools for easy inspection and modification of state, while also addressing performance concerns by optimizing tree-shaking to avoid unnecessary bulk in the application.
Ben explores composition stores in Vue 3, detailing the shift from options API to setup syntax. He demonstrates converting an options store to a setup store, emphasizing the explicit declaration of state, getters, and actions for better structure and clarity.
Ben stresses using multiple small stores over a single global store to avoid data duplication and maintain a single source of truth. He also shows how to compose and import stores to combine logic and manage state more effectively across the app.
Ben explains that Vue’s proxy-based reactivity system updates state efficiently, avoiding issues common in React. He mentions Vue Vapor for virtual DOM-free rendering and notes how modern frameworks are converging around reactivity and memoized computed properties.
Ben instructs students to set up a weak store with Pinna for the final coding exercise, focusing on practicing and getting familiar with Pinna. He also demonstrates defining the store, moving the state to the store, and organizing the code within the store.
Wrapping Up
Section Duration: 7 minutes
Ben covers composables, file-based routing, and state management in Vue, stressing advanced composition patterns and tools like Pinia. He also encourages improving TypeScript and JavaScript skills, recommending Nuxt for DX and VuePress for static sites.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops