vue-autowire

Autowiring plugin for VueJS

Usage no npm install needed!

<script type="module">
  import vueAutowire from 'https://cdn.skypack.dev/vue-autowire';
</script>

README

vue-autowire

In development!

Build Status

Vue Autowire is a Vue plugin with conventions for automatically wiring different Vue assets:

  • components
  • views
  • directives
  • filters
  • mixins
  • routes

Quick usage on a Vue-CLI project

import Vue from 'vue'
import App from './App.vue'
import VueAutowire from 'vue-autowire'

// Use the default conventions
import defaultConventions from 'vue-autowire/src/conventions';
Vue.use(VueAutowire, defaultConventions)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Auto wire only certain assets, but with their default conventions

import componentsConventions from 'vue-autowire/src/conventions/components';
Vue.use(VueAutowire, componentsConventions)

Mix and match defaults and your custom conventions

import componentsConventions from 'vue-autowire/src/conventions/components';
Vue.use(VueAutowire, Object.assign(componentsConventions, {
  views: {
    // Provide your own views convention. For example:
    // register all .vue files (excluding .local.vue and .async.vue) inside the /views folder as regular components
    requireContext: require.context('./views', true, /\/(?:[^.]+|(?!\.local\.vue$)|(?!\.async\.vue$))\.vue$/),
    // register all .async.vue files inside the /views folder as dynamic components
    requireAsyncContext: require.context('./views', true, /\.async\.vue$/, 'lazy'),
  }
}))

Read through the docs at https://kaizendorks.github.io/vue-autowire/ for more information about the default conventions and how to create your own.