How to reuse a component?

Question

Vue.js

there is a Sidebar.vue component described like this

<template>
<div class="sidebar">
<a href="#" @click.prevent="sidebarShow = !sidebarShow" class="sideBarToggle" v-bind:class="{ active: sidebarShow }">
<i class="fa fa-cog fa-spin fa-3x fa-fw" style="font-size:18px"></i>
</a>
<transition name="slide">
  <menu v-show="sidebarShow" class="sidebar-content">
    Контент...
  </menu>
</transition>
</div>
</template>
<script>
module.exports = {
data:function() {
return {
  'sidebarShow': false
      }
    }
    
  }
</script>


<style>
.slide-leave-active,
.slide-enter-active {
  transition: all 0.25s;
}
.sideBarToggle {
position:fixed;
top:50%;
right:0;
z-index:2;
color:white;
background-color:#FF7588;
display:block;
height:50px;
width:54px;
cursor:pointer;
line-height: 54px;
margin: 0 auto;
text-align:center;
}
.sideBarToggle.active {
 right:299px;
 transition:all 0.3s;
}
.sideBarToggle:hover {
color:white;
background-color:#ff3353;
}
.sidebar-content{
border-left: 1px solid #CFD8DC !important;
position:fixed;
right:0;
width:300px;
height:100vh;
background-color:#253858;
z-index:1;
margin:0;
}
.slide-enter {
  transform: translate(100%, 0);
}
.slide-leave-to {
  transform: translate(100%, 0);
}
</style>

I connect it and register it in app.js like this:

const vm = new Vue({
  el:'#sidebar',
  template:'<button-sidebar/>',
  components:{'button-sidebar':Sidebar}
})

there are two questions. First - can I now use it in a page like

<div class="super-app">
<button-sidebar />

</div>

?
And the second question is how to make it so that you can write some tags inside the element and stuff it all into the content? For example, like this

<button-sidebar>
<h1>Super app </h1>
<p> ... </p>

I will be very grateful for the answers

Answer 1

can i now use it in a page like...

And you try.
Use slots .