Named slots and scoped slots in Vue - Mini Project: Build & Apply

Using Named Slots and Scoped Slots in Vue

📖 Scenario: You are building a simple card component in Vue that can display different content in its header and footer areas. You want to use named slots so users can put custom content in these areas. Also, you want to pass some data from the card to the slot content using scoped slots.

🎯 Goal: Create a Vue component called BaseCard that uses named slots for header and footer. Pass a title string from the component to the header slot using a scoped slot. Then use BaseCard in an app and provide custom content for the named slots.

📋 What You'll Learn

Create a Vue component named BaseCard with a title prop set to 'Welcome'.

Inside BaseCard, define named slots called header and footer.

Pass the title prop to the header slot as a scoped slot property.

Use BaseCard in the main app and provide custom content for the header and footer slots.

In the header slot content, display the passed title property.

💡 Why This Matters

🌍 Real World

Named and scoped slots let you build flexible UI components that can be customized by users without changing the component code.

💼 Career

Understanding slots is essential for Vue developers to create reusable components and collaborate on large projects.

1

Create the BaseCard component with a title prop

Create a Vue component called BaseCard with a props option that defines a title prop with the default value 'Welcome'.

Vue

// Create BaseCard component with a title prop
export default {
  name: 'BaseCard',
  props: {
    // Your code here
  }
}

Need a hint?

Use props: { title: { type: String, default: 'Welcome' } } inside the component.

2

Add named slots for header and footer in BaseCard template

Add a template section to BaseCard with a <div> container. Inside it, add two named slots: one named header and one named footer. Use <slot name="header"></slot> and <slot name="footer"></slot>.

Vue

export default {
  name: 'BaseCard',
  props: {
    title: {
      type: String,
      default: 'Welcome'
    }
  },
  template: `
    
      
    
  `
}

Need a hint?

Use <slot name="header"></slot> and <slot name="footer"></slot> inside the template.

3

Pass the title prop to the header slot as a scoped slot

Modify the header slot in BaseCard to pass the title prop as a scoped slot property named title. Use <slot name="header" :title="title"></slot>.

Vue

export default {
  name: 'BaseCard',
  props: {
    title: {
      type: String,
      default: 'Welcome'
    }
  },
  template: `
    
      
      
      
    
  `
}

Need a hint?

Add :title="title" to the header slot tag to pass the prop as a scoped slot.

4

Use BaseCard with named slots and display scoped slot title

In the main app component, import BaseCard and use it. Provide content for the header slot using <template #header="{ title }"> that displays the title inside an <h1>. Provide content for the footer slot with a <p> that says 'Footer content here'.

Vue

// Import BaseCard component
// Your code here



  
    
    
      
    
    
    
      
    
  

Need a hint?

Use <template #header="{ title }"> to access the scoped slot property and display it inside an <h1>.