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