What is the best approach for developing an npm package containing multiple Vue directives? Should each directive have its own separate package, or should they

Question

What is the best approach for developing an npm package containing multiple Vue directives? Should each directive have its own separate package, or should they

While I have successfully created an npm package by exporting a single vue directive in the src/index.js file, I am now faced with the challenge of creating a package that allows for the use of multiple vue directives. Unfortunately, I have been unable to export two vue directives in the same index.js file.

export default Vue.directive('directive1', {
  inserted: function (el, binding, vnode) {
    el.addEventListener('mouseup', (e) => mouseup(e, el, _data))
    el.addEventListener('mousedown', (e) => mousedown(e, el, _data))
    el.addEventListener('mousemove', (e) => mousemove(e, el, _data))
    setDraggerOffset(el, _data)
  }
})

export default Vue.directive('directive2', {
  inserted: function (el, binding, vnode) {
    el.addEventListener('mouseup', (e) => mouseup(e, el, _data))
    el.addEventListener('mousedown', (e) => mousedown(e, el, _data))
    el.addEventListener('mousemove', (e) => mousemove(e, el, _data))
    setDraggerOffset(el, _data)
  }
})

javascript vue.js npm npm-publish vue-directives

Answer 1

Answer №1

If you are looking to export two defaults, keep in mind that using a default allows you to easily retrieve the value with a simple import statement like

import MyPack from 'path/to/package'

. Make sure to export constants and destructure when importing to ensure smooth functionality. For more information, check out this helpful resource here

In your package:

export const vD1 = Vue.directive('directive1', {
  ...
})

export const vD2 = Vue.directive('directive2', {
  ...
})

During your import process:

import { vD1, vD2 } from 'path/to/package';

Answer 2

If you are looking to export two defaults, keep in mind that using a default allows you to easily retrieve the value with a simple import statement like

import MyPack from 'path/to/package'

. Make sure to export constants and destructure when importing to ensure smooth functionality. For more information, check out this helpful resource here

In your package:

export const vD1 = Vue.directive('directive1', {
  ...
})

export const vD2 = Vue.directive('directive2', {
  ...
})

During your import process:

import { vD1, vD2 } from 'path/to/package';

Answer 3

Answer №2

Refer to the Vue Guide: Writing one plugin for guidance on developing directives and allowing users to activate specific directives using the 2nd parameter=options.

For example, consider the demo below (assuming exporting myDirectives and enabling only directive1):

let myDirectives = {}
let _defaultDirectives = ['directive1', 'directive2']
myDirectives.directive1 = {
  inserted: function (el, binding, vnode) {
    el.addEventListener('mouseup', (e) => mouseup(e, el, _data))
    el.addEventListener('mousedown', (e) => mousedown(e, el, _data))
    el.addEventListener('mousemove', (e) => mousemove(e, el, _data))
    console.log('directive1', `setDraggerOffset(el, _data)`)
  }
}

myDirectives.directive2 = {
  inserted: function (el, binding, vnode) {
    el.addEventListener('mouseup', (e) => mouseup(e, el, _data))
    el.addEventListener('mousedown', (e) => mousedown(e, el, _data))
    el.addEventListener('mousemove', (e) => mousemove(e, el, _data))
    console.log('directive2', `setDraggerOffset(el, _data)`)
  }
}

myDirectives.install = function (Vue, options) {
  let selectedDirectives = (options && options.directives) || _defaultDirectives
  selectedDirectives.forEach((directive) => 
    Vue.directive(directive, this[directive])
    // this[directive + 'Definition'] = Vue.directive(directive, this[directive])
  )
}

// export default myDirectives

// Vue.use(myDirectives) // default option is register both directive1 and directive 2
Vue.use(myDirectives, {directives: ['directive1'] }) // register directive1 only

// console.log('Definition', myDirectives.directive1Definition, myDirectives.directive2Definition)

new Vue({
  el: '#app'
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <span v-directive1></span>
  <span v-directive2></span>
</div>

Answer 4

Refer to the Vue Guide: Writing one plugin for guidance on developing directives and allowing users to activate specific directives using the 2nd parameter=options.

For example, consider the demo below (assuming exporting myDirectives and enabling only directive1):

let myDirectives = {}
let _defaultDirectives = ['directive1', 'directive2']
myDirectives.directive1 = {
  inserted: function (el, binding, vnode) {
    el.addEventListener('mouseup', (e) => mouseup(e, el, _data))
    el.addEventListener('mousedown', (e) => mousedown(e, el, _data))
    el.addEventListener('mousemove', (e) => mousemove(e, el, _data))
    console.log('directive1', `setDraggerOffset(el, _data)`)
  }
}

myDirectives.directive2 = {
  inserted: function (el, binding, vnode) {
    el.addEventListener('mouseup', (e) => mouseup(e, el, _data))
    el.addEventListener('mousedown', (e) => mousedown(e, el, _data))
    el.addEventListener('mousemove', (e) => mousemove(e, el, _data))
    console.log('directive2', `setDraggerOffset(el, _data)`)
  }
}

myDirectives.install = function (Vue, options) {
  let selectedDirectives = (options && options.directives) || _defaultDirectives
  selectedDirectives.forEach((directive) => 
    Vue.directive(directive, this[directive])
    // this[directive + 'Definition'] = Vue.directive(directive, this[directive])
  )
}

// export default myDirectives

// Vue.use(myDirectives) // default option is register both directive1 and directive 2
Vue.use(myDirectives, {directives: ['directive1'] }) // register directive1 only

// console.log('Definition', myDirectives.directive1Definition, myDirectives.directive2Definition)

new Vue({
  el: '#app'
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <span v-directive1></span>
  <span v-directive2></span>
</div>

What is the best approach for developing an npm package containing multiple Vue directives? Should each directive have its own separate package, or should they

Answer №1

Answer №2

Similar questions

transfer scope variable to scope function

Set up npm to run grunt

Automating Deployment: Deploying React App on Development Domain with Plesk Server

Display a list of dates within a specified range using the ng

Step by step guide on inserting a message (memo/sticky note) onto an HTML page

Unexplained disappearance of div element in Vue Router's Navbar

Clicking the React Todo Delete Button instantly clears out all tasks on the list

Navigating the rollout of a fresh new design

Having issues with my AngularJS application not updating as expected

What is the process for converting a string literal into raw JSON and then storing it?

Unlocking the nested v-for in Vuejs to access id and submit using axios

What is the reason for the initial DOM operation taking significantly longer than subsequent ones?

Data structures of advanced complexity within HTML data attributes

What a great method to execute a button click within the same button click using jQuery!

When clicking on the text areas, the Twitter-Bootstrap drop-down login automatically closes

Utilizing Vue's string-based class binding feature?

What is the process for deprecating an npm package that has been published to the GitHub package registry?

Difficulties arise when attempting to install nodejs on linux using the npm install nodejs command

Transmit and receive information between Javascript and Node.js through Express framework

Using HTTPS, you can access Flask from AJAX