1.1.0 • Published 6 years ago
vue-component-anywhere v1.1.0
vue-component-anywhere
Mount Vue Component from anywhere, suppurt event messaging.
From Rails 5, we can run Vue with it, with this feature we can write our useful small components for Rails views. But there is not easy to use many small Vue components, you have to write javascript to mount it to a certain HTML dom, and not easy to catch events from normal HTML to Vue component.
This plugin helps you use component easily from HTML, catch Vue event from HTML.
Install
npm add vue-component-anywhere
Usage
From Vue side(components.js):
import Vue from 'vue'
import VCA from 'vue-component-anywhere'
Vue.use(VCA)
# or passing onLoadEventName if you are using Rails turbolinks
Vue.use(VCA, {onLoadEventName: 'turbolinks:load'})
import Hello from './hello'
VCA.add('hello', Hello);
From Vue component(hello.vue):
<template>
<div :class="$htmlClass">
<h3>Hello Example</h3>
<b>User Name: {{$htmlAttributes['username']}}</b>
</div>
</template>
...
mounted () {
console.log('Attributes from HTML:', this.$htmlAttributes)
setTimeout(() => this.$fireHTMLEvent('change', 'new value'), 2000)
}
...
From HTML side(mypage.html):
<div
rel="vue" role="catalog"
@change="showChange"
class="mystyle"
username="xiaohui"
></div>
<script src="/packs/components-92219426ec74afb4a5c3.js"></script>
<link rel="stylesheet" media="screen" href="/packs/components-4461095acd9ae576e8d9249c6800a509.css" />
<script language="javascript">
function showChange(v) {
console.log(`name changes to ${v}`);
}
</script>
VCA will automatically search DOMs which rel="vue", then mount Vue component which name is defined from role hello
when page is loaded.
References
- Required HTML DOM tags
rel="vca"
=> declare this is an Vue Component Anywhere elementrole
=> the name of component which added byVCA.add('hello', Hello)
- Added Computed attributes:
$htmlAttributes
=> all attributes from HTML DOM$htmlClass
=> class name of HTML DOM$htmlName
=> attribute name of HTML DOM
- Added Methods:
$fireHTMLEvent
=> fire event to HTML