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.