# @c0nst4ntin/vue-component-importer

> A Vue.js plugin to globally import all vue components

Latest version **1.0.0** (published 2019-10-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @c0nst4ntin/vue-component-importer
pnpm add @c0nst4ntin/vue-component-importer
yarn add @c0nst4ntin/vue-component-importer
bun add @c0nst4ntin/vue-component-importer
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2019-10-26 |
| First published | 2019-10-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Constantin Ross |
| Maintainers | c0nst4ntin |

## Links

- npm: https://www.npmjs.com/package/@c0nst4ntin/vue-component-importer
- npm.io page: https://npm.io/package/@c0nst4ntin/vue-component-importer

## Recent versions

- 1.0.0 (latest) — 2019-10-26

## README

<h2 align="center">vue-component-importer</h2>

<p align="center">
  <a href="https://github.com/c0nst4ntin/vue-component-importer/blob/master/LICENSE.md">
    <img alt="License" src="https://img.shields.io/github/license/c0nst4ntin/vue-component-importer.svg">
  </a>
  <a href="https://img.shields.io/github/package-json/v/c0nst4ntin/vue-component-importer">
    <img src="https://img.shields.io/github/package-json/v/c0nst4ntin/vue-component-importer">
  </a>
  <a href="https://img.shields.io/npm/dm/vue-component-importer.svg">
    <img src="https://img.shields.io/npm/dm/vue-component-importer.svg">
</a>
</p>

<p align="center">
  <em>
  Globally import all Vue Components
  </em>
</p>

This Vue.js Plugin will import all your Vue.js Components from a certain directory, enabling you to build a fully modular frontend for your headless CMS.

## Getting Started

### Requirements
* Please make sure you have working Vue or Nuxt installation running.

### Installation

#### 1) Install the package using Node

```shell
$ npm i --save vue-component-importer
```

#### 2a) With Vue
In your `src/main.js` file also import the vue-component-importer
```js
import importComponents from 'vue-component-importer'
```

Before the creation of your Vue instance add the following code:
```js
let components = require.context('@/components', true, /[a-zA-Z]\w+\.(vue)$/)
importComponents(Vue, components)

```
The first parameter is the folder you want to import your components from. If you just want to include some components you can change the path to just use a subdirectory of components like `@/components/slices`

#### 2b) With Nuxt
Create a `plugins/componentimporter.js` file and add the following code:
```js
import Vue from 'vue'
import importComponents from 'vue-component-importer'

let components = require.context('@/components', true, /[a-zA-Z]\w+\.(vue)$/)
importComponents(Vue, components)

```
The first parameter is the folder you want to import your components from. If you just want to include some components you can change the path to just use a subdirectory of components like `@/components/slices`

Then in your `nuxt.config.js` add:
```js
plugins: [
    '~/plugins/componentimporter.js',
],
```

### How To Use
The first parameter is the folder you want to import your components from. If you just want to include some components you can change the path to just use a subdirectory of components like `@/components/slices`

As all components in the given directory are imported globally you must not list the components imported by the plugin in the `components: {} `field. The HTML tag is the same as the `name:` property of the component.

---
_Source: https://npm.io/package/@c0nst4ntin/vue-component-importer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._