Vue-juice NPM | npm.io

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

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")); },