Adding a content inside of a vue component

Question

I have a vue component Jumbotron.vue:

<template lang="html">
  <div class="jumbotron" style="border-radius:0px; color:#fff;">
    <div class="container">

    </div>
  </div>
</template>

And other page component Main.vue:

<template>
  <div class="root">
    <navbar></navbar>
    <jumbotron>
      <h1 class="display-4">I want to add here, to the jumbotron's div container some h1 and paragraph</h1>
      <p class="lead ">Like this paragraph</p>
    </jumbotron>
    <words></words>
  </div>
</template>

But i cant add content to the jumbotron, because its wrong. I dont want to add content(p and h1) inside of the Jumbotron.vue, because i want to use Jumbotron.vue more than 1 time with different content inside it. Is this possible?

score 28 · Accepted Answer · edited Jul 15 '22 at 19:57

28

This is done with slots.

<template lang="html">
  <div class="jumbotron" style="border-radius:0px; color:#fff;">
    <div class="container">
      <slot></slot>    
    </div>
  </div>
</template>

Everything you put inside the jumbotron component in the parent will be rendered in the slot.

edited Jul 15 '22 at 19:57

tony19

125,647
18
229
307

answered Oct 14 '17 at 20:11

Bert

80,741
17
199
164

Given link is for Vue 2 docs. Alternative link for Vue 3 docs on slots: https://vuejs.org/guide/components/slots.html#slots – Benjamin Carlsson Jul 04 '23 at 18:29

Adding a content inside of a vue component

1 Answers1