https://github.com/lucaperret/vue-gaspard
DOM helpers plugin for Vue.js
https://github.com/lucaperret/vue-gaspard
dom-manipulation javascript vue vue-plugin youmightnotneed
Last synced: 9 months ago
JSON representation
DOM helpers plugin for Vue.js
- Host: GitHub
- URL: https://github.com/lucaperret/vue-gaspard
- Owner: lucaperret
- Created: 2017-08-16T18:23:39.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-08-28T08:00:36.000Z (over 8 years ago)
- Last Synced: 2025-02-16T06:11:09.983Z (10 months ago)
- Topics: dom-manipulation, javascript, vue, vue-plugin, youmightnotneed
- Language: JavaScript
- Homepage: https://lucaperret.github.io/vue-gaspard
- Size: 248 KB
- Stars: 7
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue - vue-gaspard - DOM helpers plugin for Vue.js ` 📝 4 years ago` (Utilities [🔝](#readme))
- awesome-vue-zh - 瓦斯帕德 - 用于Vue JS的DOM助手插件 (公用事业 / 杂)
- awesome-vue - vue-gaspard - DOM helpers plugin for Vue.js (Components & Libraries / Utilities)
- awesome-vue - vue-gaspard ★6 - DOM helpers plugin for Vue.js (Utilities / Miscellaneous)
- awesome-vue - vue-gaspard - DOM helpers plugin for Vue.js (Utilities / Miscellaneous)
README
# Vue-gaspard
> DOM helpers plugin for Vue.js using [gaspard](https://github.com/lucaperret/gaspard)
[](https://badge.fury.io/js/vue-gaspard)
[](https://www.npmjs.com/package/vue-gaspard)
## Getting started
### Installing
npm | yarn | bower | unpkg
------------ | ------------- | ------------- | -------------
npm install vue-gaspard | yarn add vue-gaspard | bower install vue-gaspard | [vue-gaspard.umd.js](https://unpkg.com/vue-gaspard)
### Usage
In main.js:
```javascript
import Vue from 'vue'
import VueGaspard from 'vue-gaspard'
Vue.use(VueGaspard)
```
In any of your components (e.g. [examples](demo/src/App.vue)):
```javascript
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 ``
```html
<div id="app">Hello world !</div>
<script src="https://unpkg.com/vue">
var app = new Vue({
el: '#app',
mounted () {
this.$g.css('background-color', 'red')
}
})
```
### Options
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:
```javascript
Vue.use(VueGaspard, {
globalNamespace: '$dom',
instanceNamespace: '$dom'
})
```
### API
[gaspard's documentation](https://github.com/lucaperret/gaspard/blob/master/docs/API.md#srccollectionjs)
## Contribute
```bash
# 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