Intermediate Vue

Ben Hong
Pandan Studio
3 hours, 49 minutes CC
Intermediate Vue

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
Close

Course Details

Published: July 15, 2025

Rating

4.8

Learning Paths

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops

Table of Contents

Introduction

Section Duration: 5 minutes
  • Introduction
    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
  • Component Patterns
    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.
  • Transparent Components
    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.
  • Component Design Patterns Exercise
    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.
  • Component Data Flow
    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.
  • Scope Slots
    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.
  • Using defineExpose
    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.
  • useSlot Exercise
    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
  • What Are Composables?
    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.
  • Composables vs Utilities vs Logic
    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.
  • Named vs Default Exports
    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.
  • useWeek Composable Exercise
    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.
  • Flexible Arguments
    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
  • File-Based Routing
    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.
  • File-Based Routing Exercise
    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
  • Shallow Ref & Singletons
    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.
  • Singleton Data Store
    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.
  • Factory Pattern Composable Exercise
    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.
  • VueUse Composition Utilities
    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.
  • useTheme & useMagicKeys Exercise
    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
  • Why Do You Need State Management?
    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.
  • Options vs Composition Stores
    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.
  • State Management Best Practices
    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.
  • State Management Q&A
    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.
  • WeekStore with Pinia Exercise
    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
  • Wrapping Up
    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
Get Unlimited Access Now