Courses
Vue Foundations Vue Fullstack Vue Enterprise
Articles
Latest Topics
More
Newsletter Sponsorship Discord About
The video for this lesson is currently being updated, please read the transcript instead.
Test-driving Vue 3 > Lesson 7

Styling slot content in Vue 3

To make our modal reusable, we've provided a slot for content. In the App component we've put a paragraph in the slot for content.

src/App.vue

<template>
  <button @click="toggleModalState">Open modal</button>
  <teleport to="#modal-wrapper">
    <modal v-if="modalOpen">
      <p>Hello, I'm a Vue 3 modal window.</p>
    </modal>
  </teleport>
</template>

Scoped CSS

Back in the modal component, let's begin to style that content by adding a style tag to the component.


Back to course page

Click to load comments...

Courses
  • Vue Foundations
  • Vue Fullstack
  • Vue Enterprise
Articles
  • Latest
  • Topics
Newsletter
  • Join
  • Sponsorship
More
  • Discord
  • Vue.js jobs
  • About

Vue.js Developers © 2021. View our privacy policy .

  • RSS
  • |
  • Atom