No description, website, or topics provided.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
src
.babelrc
.gitignore
package.json
readme.md
webpack.config.js

readme.md

Slugify VueJs

A Vue component that slugify your v-model inputs We make a little changement so you can handle the input with your own stuff.

Demo

Demo

Installation :

npm install vue-suglify

Getting Started

In your script entry point:

window.Vue = require("vue");

import VueSuglify from "vue-suglify";

//Vue.component("suglify", VueSuglify); If you want a global Component

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

Usage

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" class="form-control">

<suglify :slugify="title" :slug.sync="titleSlug">
        <input slot-scope="{inputBidding}" v-bind="inputBidding"
               type="text" class="form-control" placeholder="Slug ...">
</suglify>

 </div>

 <script>
 const app = new Vue({
    el: '#app',
    components: {
          VueSuglify
    },
    data: {
         title : '',
         titleSlug : ''
    },
});
</script>

The separator can be change by passing sep attribute by default is -

<suglify :slugify="title" :slug.sync="titleSlug" sep="---">
        <input slot-scope="{inputBidding}" v-bind="inputBidding"
               type="text" class="form-control" placeholder="Slug ...">
</suglify>

If You want the first letter to be UpperCase you can use lowerCase

<suglify :slugify="title" :slug.sync="titleSlug" :lowerCase="false">
        <input slot-scope="{inputBidding}" v-bind="inputBidding"
               type="text" class="form-control" placeholder="Slug ...">
</suglify>

Limit the number letters using limit by default is 100

<suglify :slugify="title" :slug.sync="titleSlug" :limit="30">
        <input slot-scope="{inputBidding}" v-bind="inputBidding"
               type="text" class="form-control" placeholder="Slug ...">
</suglify>

You can now pass object named extras where you replace a letter with something of your choice

In this example we remplace letter s with letter Suglify

<suglify :slugify="title" :slug.sync="titleSlug" :extras="{'s' : 'Suglify'}">
        <input slot-scope="{inputBidding}" v-bind="inputBidding"
               type="text" class="form-control" placeholder="Slug ...">
</suglify>

Contributing

You are more than welcome to contribute to this repo with anything you think is useful. fixes are more than welcome.