vue-hump
v0.0.1
Published
Utility to mount Vue 3 apps into existing markup. Supports passing props via HTML attributes, without using the template compiler.
Downloads
2
Readme
vue-hump
Tiny utility to mount Vue 3 apps into existing markup. Supports passing props via HTML attributes, without using the template compiler.
This is useful when using Vue to augment a traditional server-side application, like WordPress.
Getting Started
Simply install via NPM, or your favourite package manager:
npm i vue-hump
Then import the ES module:
import { mountAll } from 'vue-hump';
Examples
Simple Example
We can mount a fictional component LikeCounter
to all .like-counter
elements:
<div class="like-counter"></div>
import { mountAll } from 'vue-hump';
import LikeCounter from 'LikeCounter.vue';
mountAll(LikeCounter, '.like-counter');
Passing Props via data-*
We could pass an ID or any number of other properties to our fictional LikeCounter
. All we need to do is set a data-*
attribute on the element, and the prop will be available to Vue:
<div class='like-counter' data-content-id='500'></div>
contentId
is now available as a prop in the component.
Passing JSON objects as props via data-*:json
We can also pass a JSON object as a data-*
prop, by using the special syntax :json
:
<div class='like-counter' data-my-object:json='{"foo": "bar"}'></div>
myObject
is now available as a prop in the component, and is an object.
Accessing inner HTML content
Inner html content is automatically exposed as the inner
property.
<div class="like-counter">This text will be available as a string on the `inner` prop!</div>
Loading Vue plugins
You can pass an array of plugins as an optional last parameter to any of the mount
functions:
import { mountAll } from 'vue-hump';
import MyPlugin from 'my-plugin';
import LikeCounter from 'LikeCounter.vue';
mountAll(LikeCounter, '.like-counter', MyPlugin);
... Or pass plugin options via a nested array:
import { mountAll } from 'vue-hump';
import MyPlugin from 'my-plugin';
import LikeCounter from 'LikeCounter.vue';
mountAll(LikeCounter, '.like-counter', [[MyPlugin, {myOption: true, otherOption: false}]);
... Or multiple plugins (with or without options!)
import { mountAll } from 'vue-hump';
import MyPlugin from 'my-plugin';
import MyOtherPlugin from 'my-other-plugin';
import LikeCounter from 'LikeCounter.vue';
mountAll(LikeCounter, '.like-counter', [MyOtherPlugin, [MyPlugin, {myOption: true, otherOption: false}]);
API
mountAll
Mounts a Vue component to all elements matching a selector.
function mountAll(component: Component, selector: string, uses: Plugin[] | Plugin = []): Component[]
component: Component
Your Vue component object.
selector: string
A DOM selector string to target elements. If more than one match is found, a new instance will be created for each.
uses: Plugin[] | Plugin = []
A single Vue plugin, or array of Vue plugin objects. If you need to pass options to the plugins, you can use a nested array. For example:
[[MyPlugin, {myOption: true, otherOption: false}], MyOtherPlugin, ...]
mountElement
Mounts a Vue component to a single HTML element.
function mountElement(component: Component, el: HTMLElement, uses: Plugin[] | Plugin = []): Component
component: Component
Your Vue component object.
el: HTMLElement
Your
HTMLElement
to mount the component to.
uses: Plugin[] | Plugin = []
A single Vue plugin, or array of Vue plugin objects. If you need to pass options to the plugins, you can use a nested array. For example:
[[MyPlugin, {myOption: true, otherOption: false}], MyOtherPlugin, ...]