quantity-digital / vue-shave

Simple Vue.js directive wrapper for shave.js with responsive support

vue-shave

Simple Vue.js directive wrapper for shave. This plugin also adds support for responsive media queries to shavejs.

Features

• Lightweight wrapper around shave.
• Runs shave on component updates.
• Adds responsive support to shave.

Installing

With a module bundler (webpack, rollup, etc.)

Shave is installed as a dependency of vue-shave.

npm install vue-shave

Then initialize the plugin.

// main.js
import VueShave from 'vue-shave';

Vue.use( VueShave );

CDN

Include shave and vue-shave.

Note: Remember to include the shave library before vue-shave

<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></script>

Then initialize the plugin.

// main.js

Vue.use( VueShave );

Options

Add global options as the second parameter.

// main.js

const shaveConfig = {
  throttle: 400,    // Throttle length in ms
  character: '!!!', // Override default elipsis character
  spaces: true,     // Spaces config (see shave documentation)
  height: 80        // Default shave height (see shave documentation)
}; 

Vue.use( VueShave, shaveConfig );

Examples

Simply add v-shave with a height to a text node to instantiale shave.

<div v-shave="{ height: 80 }">
  <!-- text -->
</div>

Height is inherited from the global options, so you can do:

<div v-shave>
  <!-- text -->
</div>

All shave options are supported:

<div v-shave="{ height: 80, character: '!!!', spaces: false }">
  <!-- text -->
</div>

Have fun!

vue-shave's Issues

Remove console.log

vue-shave/src/vue-shave.js

Line 38 in 9b332ad

console.log( 'shaving' );