A Small Wrapper for Integrating Lodash to Vuejs

vue-lodash

A small wrapper for integrating lodash to Vuejs (Inspired by vue-axios plugin)

Install

npm install --save vue-lodash lodash

Usage

import Vue from 'vue'
import VueLodash from 'vue-lodash'
import lodash from 'lodash'

// name is optional
Vue.use(VueLodash, { name: 'custom' , lodash: lodash })

new Vue({
  el: '#app',
  methods: {
    test() {
      console.log(this.lodash.random(20))
      console.log(this._.random(20))
      console.log(this.custom.random(20))
    },
  }
})
console.log(Vue.lodash.random(20))
console.log(Vue._.random(20))
console.log(Vue.custom.random(20))

Typescript

Using custom name with typescript is currently unsupported without casting.

import Vue from 'vue'
import VueLodash from 'vue-lodash'
import lodash from 'lodash'

Vue.use(VueLodash, { name: 'custom', lodash: { map, random } })

new Vue({
  el: '#app',
  methods: {
    testLodash() {
      console.log(this.lodash.random(20))
      console.log(this._.random(20))
      console.log((this as any).custom.random(20))
    },
  }
})
console.log(Vue.lodash.random(20))
console.log(Vue._.random(20))
console.log((Vue as any).custom.random(20))

Tree shaking with lodash

Only import the packages you need, note that lodash tree shaking has to do import with path to module.

import Vue from 'vue'
import VueLodash from 'vue-lodash'
import random from 'lodash/random'
import map from 'lodash/map'

Vue.use(VueLodash, { name: 'custom', lodash: { map, random } })

Download Details:

Author: Ewocker

Source Code: https://github.com/Ewocker/vue-lodash

#vue #vuejs #javascript

What is GEEK

Buddha Community

Hire Dedicated VueJS Developers

Want to Hire VueJS Developer to develop an amazing app?

Hire Dedicated VueJS Developers on the contract (time/project) basis providing regular reporting about your app. We, at HourlyDeveloper.io, implement the right strategic approach to offer a wide spectrum of vue.js development services to suit your requirements at most competitive prices.

Consult with us:- https://bit.ly/2C5M6cz

#hire dedicated vuejs developers #vuejs developer #vuejs development company #vuejs development services #vuejs development #vuejs developer

A Small Wrapper for Integrating Lodash to Vuejs

vue-lodash

A small wrapper for integrating lodash to Vuejs (Inspired by vue-axios plugin)

Install

npm install --save vue-lodash lodash

Usage

import Vue from 'vue'
import VueLodash from 'vue-lodash'
import lodash from 'lodash'

// name is optional
Vue.use(VueLodash, { name: 'custom' , lodash: lodash })

new Vue({
  el: '#app',
  methods: {
    test() {
      console.log(this.lodash.random(20))
      console.log(this._.random(20))
      console.log(this.custom.random(20))
    },
  }
})
console.log(Vue.lodash.random(20))
console.log(Vue._.random(20))
console.log(Vue.custom.random(20))

Typescript

Using custom name with typescript is currently unsupported without casting.

import Vue from 'vue'
import VueLodash from 'vue-lodash'
import lodash from 'lodash'

Vue.use(VueLodash, { name: 'custom', lodash: { map, random } })

new Vue({
  el: '#app',
  methods: {
    testLodash() {
      console.log(this.lodash.random(20))
      console.log(this._.random(20))
      console.log((this as any).custom.random(20))
    },
  }
})
console.log(Vue.lodash.random(20))
console.log(Vue._.random(20))
console.log((Vue as any).custom.random(20))

Tree shaking with lodash

Only import the packages you need, note that lodash tree shaking has to do import with path to module.

import Vue from 'vue'
import VueLodash from 'vue-lodash'
import random from 'lodash/random'
import map from 'lodash/map'

Vue.use(VueLodash, { name: 'custom', lodash: { map, random } })

Download Details:

Author: Ewocker

Source Code: https://github.com/Ewocker/vue-lodash

#vue #vuejs #javascript

A Small Wrapper for integrating Colcade to Vuejs

Vue Colcade

Lightweight masonry layout thanks to Vuejs

A small wrapper for integrating Colcade to Vuejs.

Vue.js plugin accessible globally from any component to run multiple colcade grid instances. Let’s interact with differents grids throughout differents components. This plugin needs you to use the basic Colcade configuration usage.

Install

  npm install vue-colcade
  yarn add vue-colcade

Import vue-colcade.js in the main project file

  import Vue from 'vue';
  import VueColcade from 'vue-colcade';

  Vue.use(VueColcade);

Usage

In your Vue.js components, to create a new grid, simply use:

  this.$colcade.create({
      name: 'myGridName',  // name of colcade instance -> will be used as a reference for grid instance
      el: myGridElement,  // element that hosts the grid -> as mentioned in Colcade config
      config: {  // native Colcade configuration -> as mentioned in Colcade config
        columns: '.grid-col',
        items: '.grid-item',
      },
    });

That grid is accessible across all components by using the new global vue property: $colcade. So you can create as many grids as you want, referencing them by their name. Every future modifications thanks to vue-colcade must referred the name of the instance in order to affect it. As an exemple, if you create an instance with myGridName as name, you can update it with the following method: this.$colcade.update('myGridName').

Methods

vue-colcade offers following methods:

• create - this.$colcade.create({}) - Create a new instance of Colcade grid -> see usage above
• destroy - this.$colcade.destroy('myGridName') - Destroy an instance of Colcade grid
• update - this.$colcade.update('myGridName') - Update grid items (after changing order, removing items…)
• append - this.$colcade.myGridName.append(items) - Add items to the end of layout
• prepend - this.$colcade.myGridName.prepend(items) - Add items to the beginning of layout

As exemple, in order to destroy a grid, just call: this.$colcade.destroy('myGridName').

Then, if you need to update items values inside a colcade grid, you may call the following property in order to force Colcade to refresh itself: this.$colcade.update('myGridName').

And, all native colcade methods are still accessibles :

  this.$colcade.myGridName.append();
  this.$colcade.myGridName.prepend();
  this.$colcade.myGridName.destroy(); // be carefull, that doesn't destroy the myGridName instance but only the Colcade grid

By Alexis Colin, thanks to Colcade by David DeSandro

Download Details:

Author: alexiscolin

GitHub: https://github.com/alexiscolin/vue-colcade

#vuejs #javascript #vue-js #vue

A small wrapper for integrating SweetAlert to Vuejs

VueSwal

You can customize VueSwal to fit your needs.

Api sweetalert or Examples

Installation

npm

npm install vue-swal

yarn

yarn add vue-swal

Usage

Bundler (Webpack, Rollup)

import Vue from 'vue'
import VueSwal from 'vue-swal'

Vue.use(VueSwal)

Browser

<!-- Include after Vue -->
<!-- Local files -->
<script src="vue-swal/dist/vue-swal.js"></script>

<!-- From CDN -->
<script src="https://unpkg.com/vue-swal"></script>

Simply happens

export default {
  methods: {
    alert() {
      this.$swal('Hello word!')
    }
  }
}

Examples

Basic Example	Advanced Example

Using Nuxt.js

Using the plugin with nuxt is really very simple.

Add file plugins/vue-swal.js:

import Vue from 'vue'
import VueSwal from 'vue-swal'

Vue.use(VueSwal)

Then, we add the file inside the plugins key of nuxt.config.js:

module.exports = {
  plugins: ['~/plugins/vue-swal']
}

To learn more about the plugins configuration key, check out the plugins api.

The, vue-swal will be included in the app bundle, but because it’s a library, we want to include it in the vendor bundle for better caching.

We can update our nuxt.config.js to add vue-swal in the vendor bundle:

module.exports = {
  build: {
    vendor: ['vue-swal']
  },
  plugins: ['~/plugins/vue-swal']
}

Click here to see a complete example.

Download Details:

Author: anteriovieira

Source Code: https://github.com/anteriovieira/vue-swal

#vuejs #vue #javascript

A small wrapper for integrating axios to Vuejs

vue-axios

A small wrapper for integrating axios to Vuejs

How to install:

CommonJS:

npm install --save axios vue-axios

And in your entry file:

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

Script:

Just add 3 scripts in order: vue, axios and vue-axios to your document.

Usage:

This wrapper bind axios to Vue or this if you’re using single file component.

You can use axios like this:

Vue.axios.get(api).then((response) => {
  console.log(response.data)
})

this.axios.get(api).then((response) => {
  console.log(response.data)
})

this.$http.get(api).then((response) => {
  console.log(response.data)
})

Please kindly check full documention of axios too

Download Details:

Author: imcvampire

GitHub: https://github.com/imcvampire/vue-axios

#vuejs #vue #vue-js #javascript