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

JQuery loader & amazing animations

Displaying only the records that are associated with the user using Laravel's relationships

Using JavaScript to detect the Facebook like button on a webpage

Issue with AngularJS expression not functioning as expected in Chrome for setting input type to "file"

React encountered an error: Unable to destructure the property 'id' of '_ref' as it has been defined

Definitions that are displayed dynamically when hovering over a particular element

Troubleshooting: Unable to preview Facebook Page plugin

AngularJS - Filter out items from ng-repeat that match specific string criteria

Leveraging the arguments object within function declarations

"Exploring the Power of TypeScript Types with the .bind Method

HTML embedded content is not appearing on the React webpage

Sticky header in React data grid

Vue SSR combines the express server with the vue app, allowing the application to be launched directly from the build dist directory, which can then be transferred to a hosting server for

Sending text from a Tinymce textarea using Laravel 4.2

Extending a Typescript class from another file

Effects of incorporating unnecessary packages on Vue.js performance

Choose the option for overseeing safaris

Custom pagination for next/previous links in Django REST framework

JavaScript: Automatically retrieving the if else function

verdaccio Encountered Issue: 413 Payload Exceeds Limit - PUT request data size is too large