vue-prefix-loader

The plugin vue-prefix-loader allows you to specify the directory from which you want to load the components, depending on the prefixes in the tag name.

// vue.config.js
const vuePrefixLoader = require('vue-prefix-loader')
const gridLoader = require('./plugins/grid-loader.js')

module.exports = {
  configureWebpack: {
    plugins: [
      vuePrefixLoader({
        'l-': '@/lib/layout/',
        'b-': '@/lib/blocks/',
        'g-': gridLoader
      })
    ]
  }
}

Also, as a path you can specify a function that should return false or an object from the returned value of vue-automato plugin

{
  name: 'PrefixNameOfComponent',
  src: '@/path/to/name-of-component.vue'
}

The sample code of the handler function:

// grid-loader.js

module.exports = function(tag, params, node, link) {

    let source = `@/lib/grids/${tag.kebabTag}.vue`
    return {
      name: tag.camelTag,
      src: source
    }

}

Parameters

• 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)
  • tag.prefix
    String. A prefix of current tag (app-)
• 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
  • link.rootPath
    String. Full path to the root directory of the project
  • link.parentPath
    String. The path to the .vue file relative to the root directory
  • link.prefixes
    Object. A list of prefixes in the plugin
  • link.defaultHandler
    Function. Prefix handler whose values are specified by a string