Convert your Vue.js nested data into slugs

Slugify VueJs

Often strings of texts need to be in slug form to describe what the content of a URL is. A Vue.js component is available which provides easy conversion of texts to slugs. Using this component along with your v-models you can transform anything written into a slug.

Live Demo

Take a look at the example below.

Example

To start working with the Slugify component use the following command to install it.

npm install vue-suglify

OR

yarn add vue-suglify

Add it to your Js file

window.Vue = require('vue');

import VueSuglify from 'vue-suglify'

const app = new Vue({
el: '#app',
components: {
  VueSuglify
},
data: {
 title : '',
 slug : ''
},
});

A simple use is by using title and model name attributes:

<template>
  <div class="hello">
<input type="text" v-model="title" class="form-control">

<!-- Simple Demo using title and model name attributes -->
<vue-suglify name="title" model="slug"
classname="form-control"></vue-suglify>
  </div>
</template>

Other options include:

  • Disabling the input by passing the disabled attribute as boolean
  • The separator can change by passing sep attribute
  • Make the first letter to be UpperCase by using lowerCase
  • Add errors attribute as boolean and is-danger CSS class will be appended

You can also pass an object named extras where you replace a letter with something of your own. Below are 2 examples, one using the extras attr for creating a slug using only one letter, and the sep attr which separates words accordingly.

<template>
<div class="hello">
<input type="text" v-model="title" class="form-control">

<!-- You can now pass object named extras where you replace a letter with something of your own -->
<vue-suglify name="title" model="slug"
classname="form-control" :extras="{'s' : 'suglify'}"></vue-suglify>

<!-- Changing the separator (-) By Default -->
<vue-suglify name="title" model="slug"
classname="form-control" sep="---"></vue-suglify>
</div>
</template>

<script>
import VueSuglify from 'vue-suglify'

export default {
    components: { VueSuglify },
    data() {
        return {
            title : '',
            slug : ''
        }
    }
}
</script>

If you are interested for more or you have any bugs and suggestions, click here. That's it!