vue-automato

The vue-automato is a tool for creating plug-ins for automatic local registration of components and directives and more...

Installation

npm install vue-automato --save-dev
npm install headmad/vue-automato --save-dev

---

You can use it directly from the vue-project configuration file.
This example will automatically search for components whose tag starts on the "app-" and load them locally

// vue.config.js

const VueAutomato = require('vue-automato')

const autoloaderPlugin = new VueAutomato({
  match(tag, params, node, link) {
    let prefix = 'app-'

    if (!tag.kebabTag.startsWith(prefix)) return false

    let result = {}
    
    result.name = tag.camelTag
    result.src = `@/components/${tag.kebabTag}.vue`
    result.install = 'components'
    
    return result
  }
})

module.exports = {
  configureWebpack: {
    plugins: [ autoloaderPlugin ]
  }
}

Parameters

The argument takes an Object with one method - match, which in turn has arguments:

• tag
  Object. Contains next fields
  • tag.rawTag
    String. Original tag (for example: app-header-title)
  • tag.kebabTag
    String. Tag in kebab-case style (app-header-title)
  • tag.camelTag
    String. came-case style (AppHeaderTitle)
• params
  Object. Additional parameter including:
  • params.className
    Array. Classes specified in the class attribute
  • params.directives
    Array. The attributes of the tag specified with prefix "v-"
    [{ name, value, isBinded }, ...]
  • params.props
    Array. The attributes of the tag, except for directives and attributes class, style
    [{ name, arg, isDynamicArg, mods, value }, ...]
• node
  Object. The node of this tag is from the virtual tree
  • node.tag
    String. The name of the current tag
  • coming soon...
• link
  Object. Additional object that links all tags in a component
  • params.rootPath
    String. Full path to the root directory of the project
  • params.parentPath
    String. The path to the .vue file relative to the root directory

Returned value

The match method must return either false or an Array of Objects or an Object with fields:

• install
  String. Name of the property or method of the Vue-object of the current component (components, props, mixins...)
  *The value of the field will be replaced, so it is better to use the mixins property for merging
• name
  String. The name of the constant to assign to the code or plug-in file
• src
  String. Link to the file assigned to the constant from the name property
  *The file is to be used relative to the current component
• code
  String. JS-code to be assigned to the constant from the name property
  *The code property has a higher priority than src when both are specified

---

Example

If the match method returns the result:

return [
  {
    install: "components",
    name: "MyComponent",
    src: "@/components/my-component.vue"
  },{
    install: "data",
    name: "myProps",
    code: 'function() {return { size: "xl" }}'
  }
]

Will compile

// From this

export default {
  data() {
    return {
      some: "data"
    }
  }
}


// To this

import MyComponent from "@/components/my-component.vue"
export default {
  components: { MyComponent },
  data() {
    return {
     size: "xl"
    }
  }
}

And now ...