@flowy/vue-auto-import v1.1.0

Vue Auto Import

Easily import all your project's components automatically in your Vue 3 or Vue 2 project.

Introduction

vue-auto-import is a easy to use Vue plugin that uses Webpack internally to import components in your project. It works with Vue 3 and 2.

Usage

Install

$ npm install --save @flowy/vue-auto-import
# or
$ yarn add @flowy/vue-auto-import

Vue 3

In main.ts/main.js:

import { createApp } from 'vue';
import autoImport from 'vue-auto-import';
import App from './App.vue';

createApp(App)
  .use(autoImport)
  .mount('#app');

The components in your components directory will be automatically imported in PascalCase (you can change this to e.g. kebab-case or camelCase - see below).

You can customize your import rule by specifying the mode:

import { createApp } from 'vue';
import autoImport from 'vue-auto-import';
import App from './App.vue';

autoImport.options.mode = 'kebab-case';

createApp(App)
  .use(autoImport)
  .mount('#app');

Your components will automatically import and you can use them by using the kebab-case.

Now, there is no need to import your components:

<template>
  <HelloWorld />
</template>

Run example project

$ git clone https://github.com/FlorianWoelki/vue-auto-import.git
$ cd vue-auto-import/dev
$ yarn && yarn serve
# or
$ npm install && npm run serve

Then you can see the working demo in http://localhost:8080/.