vue-juice

Vue Juice is a beautiful user friendly package made up of a combination of very useful small directive, filters and other useful functions that will make your development faster and more easier

How To Use

At the beginning of installation I would like to inform you that this package is for vue 2.

First we need to install this packege using npm or yarn

npm i vue-juice

or

yarn add vue-juice

Finaly we need to use this package in app directory

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

import vueJuice from 'vue-juice'
Vue.use(vueJuice)

new Vue({
  render: h => h(App),
}).$mount('#app')

use case

As a directives

| Name | Binding Type | Value | Description | |------|--------------|-------|-------------| | v-at-sign, v-hash-sign | object | style: {},returnType: {tag: 'a', href: 'http://example.com'}| You can design any of the words in the paragraph that starts with @sign or #sign. | | v-linkup | object | style: {color: "green",},target: true | If there is a link in the paragraph, you can use it to style.| | v-see-more | object | limit: 10,style: {}, classList: ["your-custom-class"] | You can use it if your paragraph-the is too long and you want to add see more and see less btn that's time you can use it.| | v-focus | | | You can use it to focus your input field.| | v-pin | object | style: {position: "fixed",right: "300px",top: "0px"} | if you want to fixed or sticky any section that's time you can use it |

As a filters

| Name | Default | Options | Example | Description |------|---------|---------|---------|-----------| | strLimit | 100 | length | Hello, This is vue juice. It will provide you with a variety of functions that you can use to do you... | | reverse | | | dlrow olleh | | | capitalize | | | Hello world | | | uncapitalize | | | hello world | | | uppercase | | | HELLO WORLD | | | kebabCase | | | hello-world | | | snakeCase | | | hello_world | | | swapCase | | | hELlO wOrLD | | | titleCase | | | Typesetting Industry. Lorem Ipsum Has Been The Industry's | | | camelCase | | | helloWorld | | | chars | | | ['h',e',l',l',o','',W',o',r',l',d'] | | | words | | | ['hello', 'world'] | | | stripTags | | | Winter is cold | it's remove your html tag from string <span><i>Winter</i> is <b>cold</b></span> |

As a Prototype function

also you can use the all filters as a function in your app

Example:

mounted() { console.log( this.$strLimit("typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an") ); console.log(this.$reverse("hello world")); },

Wait Developer

Very fast I am coming up with more easy and useful functions

Customize configuration

See Configuration Reference.