https://github.com/nerdocs/vue-extensions
Simple, but versatile Vue.js extension system
https://github.com/nerdocs/vue-extensions
extensions hook plugin vue
Last synced: 10 months ago
JSON representation
Simple, but versatile Vue.js extension system
- Host: GitHub
- URL: https://github.com/nerdocs/vue-extensions
- Owner: nerdocs
- Created: 2019-12-14T23:34:31.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-09-17T13:23:01.000Z (over 1 year ago)
- Last Synced: 2024-09-17T16:39:52.053Z (over 1 year ago)
- Topics: extensions, hook, plugin, vue
- Language: JavaScript
- Size: 2.54 MB
- Stars: 10
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# vue-extensions
This library is a Vue plugin providing a custom element which acts as extension point, with a named "hook". Plugins of your application then can provide "extension" components for this extensionpoint which are automatically found and rendered replacing the extensionpoint.
This is intended wherever you need to have a "list" of different looking components at one place each provided by a plugin.
If you just need a list of the same component, just with different data, don't use `vue-extensions` just use a `v-for` directive.
## Install
The easiest way to install this library in your project is to use the corresponding Vue CLI plugin [extensions](https://github.com/nerdocs/vue-cli-plugin-extensions). It will do all magic for you:
```bash
# vue add extensions
```
This adds everything you need automatically to your project. Just make sure that `runtimeCompiler: true` is enabled in `vue.config.js` - to use template strings in Vue.
If you choose to install everything manually, see [Manual install](manual-install.md).
## Extensions
Extensions are modules that export a default object with a `hooks` property, which is an array of objects, pointing to Vue components (with metadata). This seems complicated, but an example makes it much clearer:
```javascript
// extensions/FooExtension/index.js
import AComponent from './components/acomponent.vue'
import {FooElement, BazElement} from './components/othercomponents.vue'
export default {
hooks: {
"my-list.element": [{ component: AComponent }],
"mycompany.hooks.ui.item": [
{ component: FooElement, weight: 2 },
{ component: BazElement, weight: 3 }
]
},
routes: [{
path: '/foo',
component: () => import('layouts/MyLayout.vue'),
children: [
{ path: '', component: () => import('./pages/fooIndex.vue') }
]
}]
}
```
### Hooks
Hooks are strings that define an entry point for your extension components
Each hook points to an array of objects which declare:
* **component**: the Vue component to render.
* **weight**: order of the component in a list. The higher the component's weight, the further it "sinks" down (or right) in the list.
One module can provide components for more than one hooks.
### Extension points
There is an `` tag in your project available now:
```html
Extensionpoints for "my-list-element" in a list:
Extensionpoints for "mycompany.hooks.ui.item"
```
The *vue-extensions* plugin renders the hooked elements replacing the element, one after another. It's up to you what the extensions are rendering: One extension can render a simple `
- element. But there are no constraints, you are free to choose.
## Further usage
The extensions.js file (or how you choose to name it) is intended to be created automatically by a script of your choice - If you want to see a project that uses this, see my Django app [GDAPS](https://gdaps.readthedocs.io), which is a Django plugin system that can use Vue as frontend.
## Development
You have an idea, improvement, found a bug? Don't hesitate to contact me. PRs and bug fixes are welcome.
## License
`vue-extensions` is licensed under the [MIT](https://opensource.org/licenses/mit-license.php) license
#### Compiles and minifies library for production
```
npm run build
```
#### Runs your tests
Currently there are no tests (yet), because of three important causes:
* I'm lazy
* tests are not necessary here
* I'm lazy - did I say that already?
```
npm run test
```
#### Lints and fixes files
```
npm run lint
```