Automatically Import Your Vue Components

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 (will change in future for more custimization). 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/.

Download Details:

Author: FlorianWoelki

Source Code: https://github.com/FlorianWoelki/vue-auto-import

#vue #vuejs #javascript