DOM helpers plugin for Vue.js using gaspard
| npm | yarn | bower | unpkg |
|---|---|---|---|
| npm install vue-gaspard | yarn add vue-gaspard | bower install vue-gaspard | vue-gaspard.umd.js |
In main.js:
import Vue from 'vue' import VueGaspard from 'vue-gaspard' Vue.use(VueGaspard)In any of your components (e.g. examples):
import Vue from 'vue' export default { mounted () { // Use gaspard global Vue.$gaspard.addClass(document.documentElement, 'container') // On his component instance this.$g.css('border', '1px dashed #eb592d') // On a referenced child element this.$g .find(this.$refs.childElement) .attr('title', 'gaspard !') // On a referenced child component this.$refs.childComponent.$g.css('border', '1px dotted #eb592d') } }Or use gaspard within a <script>
<div id="app">Hello world !</div> <script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/gaspard"></script> <script src="https://unpkg.com/vue-gaspard"></script> <script> var app = new Vue({ el: '#app', mounted () { this.$g.css('background-color', 'red') } }) </script>You can optionally pass in some options:
| Name | Type | Default | Description |
|---|---|---|---|
| globalNamespace | String | $gaspard | Global access name |
| instanceNamespace | String | $g | Instance access name |
Override defaults example:
Vue.use(VueGaspard, { globalNamespace: '$dom', instanceNamespace: '$dom' })# Install dependencies cd vue-gaspard npm install # Build main library npm run build # Run demo npm run devMIT License Copyright (c) 2017 Luca Perret