@blattmann/vue-plugins
v0.1.3
Published
## How to use: 1. Just use `npm i --save @stanwood/vue-plugins` 2. Follow the `README.md`
Downloads
2
Readme
stanwood vue-plugins
Important! Please install the official
vue-plugins
fron stanwood as stated below!
Install
$ npm i @stanwood/vue-plugins
Access plugins
# In `main.js` add:
import swVuePlugins from '@stanwood/vue-plugins'
Vue.use(swVuePlugins)
Example usage
getImagePath
{{ $swplugins.getImagePath('assets', 'images', 'icon_facebook.svg') }}
imageResize
{{ $swplugins.imageResize('test.png', 300, 1000, 2000, 500) }}
locationRedirect
<template lang="html">
<div>
<h1>This is a redirect example</h1>
<button @click.prevent="redirect">Redirect</button>
</div>
</template>
<script>
export default {
name: 'LocationRedirect',
methods: {
redirect () {
// targets: _blank | _self | _parent | _top
this.$swplugins.$locationRedirect(this, 'http://google.com/', '_blank')
}
}
}
</script>
setBackground
{{ $swplugins.setBackground('myBackgroundImage.png', 'http://me.com/mynewbackgroundimage', 'myBackgroundImageClass') }}
setDocumentTitle
<template lang="html">
<div>
<sw-doctitle
:title="$swplugins.setDocumentTitle('My Page')"
></sw-doctitle>
</div>
</template>
<script>
import DocTitle from '@/components/doctitle'
export default {
name: 'Doctitle',
components: {
'sw-doctitle': DocTitle
}
}
</script>
# components/doctitle.js
export default {
name: 'DoctitleComponent',
props: [
'title'
],
created () {
document.title = this.title
},
watch: {
title () {
// only used when the title changes after page load
document.title = this.title
}
}
}
titleCase
{{ $swplugins.toTitleCase('title case me') }}
togglePassword
<template lang="html">
<div>
<h1>This is a toggle example to show / hide a password</h1>
<input type="password" id="password">
<button @click.prevent="toggle">show / hide</button>
</div>
</template>
<script>
export default {
name: 'TogglePassword',
methods: {
toggle () {
this.$swplugins.togglePassword('#password')
}
}
}
</script>
urlBeautify
{{ $swplugins.urlBeautify('I am a dummy text') }}