Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/evryn/vue-registrar

☘️ A package that dynamically registers your components and vuex modules
https://github.com/evryn/vue-registrar

component register store vue vuejs vuex

Last synced: about 2 months ago
JSON representation

☘️ A package that dynamically registers your components and vuex modules

Awesome Lists containing this project

README

        

> **Warning**
> This repository is archived for read-only purpose and not maintained anymore. [Tree Shaking](https://webpack.js.org/guides/tree-shaking/) is better way to archive the primary goal of this package and we're not going to add it to the package since it's no longer maintained.



vue-registrar

Vue Registrar


A dynamic component registrar and Vuex module assembler









A Vue.js package that makes your code a lot cleaner and much more understandable.

## Quick Start
🔥 Let just get started!!

## What is this technically?
Vue Registrar is consisted of two features that:
* Registers all your common and frequently used components globally and ends the need for importing them manually;
* Assembles all your vuex modules in a nested manner.

👉 See documents and get started

## Why should I use it?
No more words! see yourself:

### Using Component Registrar
![vue-dynamic-component-registrar](./docs/assets/component-registrar-usage.png)

If you're familiar with following structure:
```vue
// hello-world.vue
...

import SomethingCommon from './path/to/it'
export default {
components: { SomethingCommon }
}

```
You may need this feature! By using that, you just need to consider your template:
```vue
// hello-world.vue
...
```

### Using Vuex Module Assembler
![vuex-dynamic-nested-module-assembler](./docs/assets/vuex-module-assembler-usage.png)

If you're using Vuex modules (especially in a nested or namespaced manner) like this:
```javascript
// store.js
import moduleAlphaState from './path/to/moduleAlpha/state'
import moduleAlphaActions from './path/to/moduleAlpha/actions'
import moduleBeta from './path/to/moduleBeta'

export default {
a: {
state: moduleAlphaState,
actions: moduleAlphaActions,
namespaced: true,
modules: {
nestedB: moduleBeta
}
}
}

```
You'll need this feature. By using it, you don't need to do anything else! just follow a simple directory structure:
```
vuex-modules/
└── a
   ├── actions.js
   ├── state.js
   └── b
   ├── actions.js
   ├── getters.js
   ├── mutations.js
   └── state.js
```

## Contribution
Any kind of help is appreciated! Feel free to report bugs, extend functionality and features. Pull Requests will be reviewed as soon as possible.

## License
Code is licensed under the [MIT License](LICENSE).

# See Also
* [ByteGate](https://bytegate.ir/) (our blog)
* [تبدیل PDF به ورد](http://delix.ir/) (our sponsored service)