DOM helpers plugin for Vue.js using gaspard

Vue-gaspard

DOM helpers plugin for Vue.js using gaspard

Getting started

Installing

Usage

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>

Options

You can optionally pass in some options:

Override defaults example:

Vue.use(VueGaspard, {
  globalNamespace: '$dom',
  instanceNamespace: '$dom'
})

API

gaspard's documentation

Contribute

# Install dependencies
cd vue-gaspard
npm install

# Build main library
npm run build

# Run demo
npm run dev

Licensing

MIT License Copyright (c) 2017 Luca Perret