A Vue component that slugify your v-model
npm install vue-suglify
In your script entry point:
window.Vue = require('vue');
import VueSuglify from 'vue-suglify'
const app = new Vue({
el: '#app',
components: {
VueSuglify
},
data: {
title : '',
slug : ''
},
});
Just apply the name and the model name that you want to have the value of the slug
<div id="app">
<input type="text" v-model="title">
<vue-suglify name="title" model="slug"></vue-suglify>
</div>
<script>
const app = new Vue({
el: '#app',
components: {
VueSuglify
},
data: {
title : '',
slug : ''
},
});
</script>
You can also disable the input by passing the disabled
attribute as boolean
<vue-suglify name="title" model="slug" disabled="true"></vue-suglify>
Or The input class as classname
attribute
<vue-suglify name="title" model="slug" classname="form-control" disabled="true"></vue-suglify>
The separator can be change by passing sep
attribute by default is -
<vue-suglify name="title" model="slug" sep="--"></vue-suglify>
If You want the first letter to be UpperCase you can use lowerCase
<vue-suglify name="title" model="slug" :lowerCase="false"></vue-suglify>
For The errors you need to add is-danger
class css and pass the errors
attribute as boolean
<style>
.is-danger {
border-color:#ff3860
}
</style>
<vue-suglify name="title" model="slug" :errors="true"></vue-suglify>
You are more than welcome to contribute to this repo with anything you think is useful. fixes are more than welcome.