Skip to content

DreaMinder/vue-html-injector

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

HTML injector

Helps inject a vue.js component to certain place in v-html string

Usage

Import: npm i vue-html-injector

import injector from 'vue-html-injector/main.vue'
export default {
  components: {
    injector
  }
}

Raw HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</p>  
%%default%%
<p>ed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Injector component with HTML prop "content"

<injector :content="rawHTML">
  <p>{{ new Date().getFullYear() }}</p>
</injector>

#Multiple slots:

Raw HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</p>  
%%image%%
<p>ed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
%%hr%%

Injector component with HTML prop "content"

<injector :content="rawHTML">
  <template slot="image">
    <image-component src="logo.png" />
  </template>
  <template slot="hr">
    <hr />
  </template>
</injector>

About

Helps inject a component to certain place in v-html string

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages