'How wrap another component and add a template to it in vue?

I have some components.

I need to add some tags and style to them, so wanted to wrap them by another component and do it. How can I add some tags to child?

new Vue({
  el: '#app'
})

new Vue({
  el: '#app2',
  inheritAttrs: false,
  props: ['childComponent']
})

Vue.component(
  'wrapper',
  { extends: app2, props: { childComponent: { type: String, default: 'app' } } }
)
<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>


<div id="app">
  <div>
    This is my chid component
  </div>
</div>

<div id="app2">
  <div>
    <component
      :is="childComponent"
      v-bind="$attrs"
      v-on="$listeners"
    >
      <template>
        <div>This is my wrapper component</div>
      </template>
    </component>
  </div>
</div>

In my example, I need to get:

This is my chid component
This is my wrapper component


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source