vue-auto

use Vue in a simpler way.

Usage no npm install needed!

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

README

vue-auto

use Vue in a simpler way.

vue-auto can help you inject all components automatically, It makes your project simpler, cleaner.


Features

  • No Import.

  • No Vue.component.

  • No component.name.

  • No Router.component.


Automation

  • Auto import Component:

    You created a component file:

    // hello.vue
    <template> <p>hello</p> <template>
    

    It can be used anywhere:

    <auto-hello>
    

  • Auto set router

    File pages/home.vue == router /home:

    // pages/home.vue
    <template> <p>home</p> <template>
    

    File pages/posts/[id].vue == router /posts/20:

    // pages/posts/[id].vue
    <template> 
      <p>This is a dynamic route, {{ $route.params.id }}</p> 
    <template>
    

It's easy.


Usage

  1. install: npm i vue-auto.

  2. create components/ and pages/ folder.

  3. import to your main.js:

import Vue from 'vue'
import { install } from 'vue-auto'

const router = install(Vue, { prefix: 'my' })
new Vue({
  router,
  render: h => h(app),
}).$mount('#app')

Any component will be automatically injected into the global, you can also customize component prefixe.


Guide

Please complete the init in step Usage first.

  • Components:

    • use my-{filename} in anywhere.
    • prefixe can be modified in options.prefix, default is auto.
    • any component can refer to each other.
  • Routers:

    • files under folder pages will automatically be routed.
    • get router /about == create file /pages/about.vue.
    • get router /posts/:id == create file /posts/[id].vue.
    • get router /pages/first == create file /posts/first.vue. (static routes take precedence over dynamic routes)

Options

Here are the options of install(vue, options)

name type description default example
prefix string custom component prefix auto my
autoRouter boolean auto inject router true -
mode string h5 router mode history -
base string router base process.env.BASE_URL -
routes array extra routes: RouteConfig [] -

Examples


LICENSE

MIT