[Vuejs]-Passing HTML or Components to the Vue Plugin

by

0👍

✅

You can use a slot to render an arbitrary HTML inside any of your components.

Your Example Component:

<template>
  <div class="example">
    <slot />
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
  name: 'Example',
});
</script>

Then use it like this:

<template>
  <example>
    <div>Render me inside the slot</div>
  </example>
</template>

And it will result in the following rendered HTML:

<div class="example">
  <div>Render me inside the slot</div>
</div>

Then in you plugin you can use your Example component and pass any html you want to it

Update: this how your plugin might look like. Just create a global component inside of it

import Vue from 'vue'

const ExamplePlugin = {
  install(Vue){
    Vue.component('Example', {
      name: 'Example',
      template: '<div class="example"><slot /></div>'
    })
  }
}

Then you can Vue.use(ExamplePlugin) and Example component will be available globally in your application

Leave a comment