How to remove div from template?

Question

Vue.js

there is template `myHello`:

<div>
   <h2>Hello</h1>
   <p>world</p>
</div>

Then I add it:

<h1>my hello:</h1>
<my-hello><my-hello>

As a result, it turns out like this:

<h1>my hello:</h1>
<div>
   <h2>Hello</h1>
   <p>world</p>
</div>

How to make `div` disappear?
I saw somewhere that this is possible, but I lost the link ..

Answer 1

Any component MUST have a root wrapper tag. Nothing without this. This limitation exists in React as well. Clean up except with crutches, which is not recommended, of course.
Read up on slot in components, you can use it to display your h1 inside a div if you don't want to put h1 in the component itself.

Answer 2

Agree with the previous commenter, it is possible to use a slot in your my-hello component:

<div>
 <slot name="title"></slot>
 <h2>Hello</h1>
 <p>world</p>
</div>

And then use it:

<my-hello>
  <h1 slot="title">my hello:</h1>
</my-hello>