Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dan-shields/nodecg-vue
Drop-in Vue UI components for use in a NodeCG dashboard panel
https://github.com/dan-shields/nodecg-vue
javascript nodecg npm-package vuejs
Last synced: 12 days ago
JSON representation
Drop-in Vue UI components for use in a NodeCG dashboard panel
- Host: GitHub
- URL: https://github.com/dan-shields/nodecg-vue
- Owner: Dan-Shields
- License: mit
- Created: 2019-02-06T01:51:55.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-02-11T15:38:14.000Z (almost 3 years ago)
- Last Synced: 2024-11-20T13:14:08.162Z (about 1 month ago)
- Topics: javascript, nodecg, npm-package, vuejs
- Language: JavaScript
- Homepage:
- Size: 194 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# NodeCG Vue
[](https://www.npmjs.com/package/nodecg-vue) [](https://github.com/Dan-Shields/nodecg-vue/blob/master/LICENSE)
### Drop-in Vue UI components for use in a NodeCG dashboard panel
Using [Vuetify](https://vuetifyjs.com) components as a base, this project is designed to make dashboard development quicker and less cluttered when using Vue, by abstracting away repeated boilerplate code. The idea (and some replicant targeting code) was taken from the Polymer component library, [NodeCGElements](https://github.com/NodeCGElements/nodecg-dashboard-elements). Thanks Lange.
| Component | Base Component | Status |
| ------------- | ------------- | ------------- |
| [nodecg-text](https://github.com/Dan-Shields/nodecg-vue/tree/master/src/components/nodecg-text) | [v-text-field](https://vuetifyjs.com/en/components/text-fields) | [](#) |
| [nodecg-toggle](https://github.com/Dan-Shields/nodecg-vue/tree/master/src/components/nodecg-toggle) | [v-button](https://vuetifyjs.com/en/components/buttons) | [](#) |
| nodecg-select | [v-select](https://vuetifyjs.com/en/components/selects) | [](#) |
| nodecg-combobox | [v-combobox](https://vuetifyjs.com/en/components/combobox) | [](#) |
| nodecg-list | [v-list](https://vuetifyjs.com/en/components/lists) | [](#) |
| nodecg-menu | [v-menu](https://vuetifyjs.com/en/components/menus) | [](#) |
| nodecg-time-picker | [v-time-picker](https://vuetifyjs.com/en/components/time-pickers) | [](#) |
## Install
1. `npm install nodecg-vue`
2. Setup your base component:
```javascript
import Vue from 'vue';
import Vuetify from 'vuetify';
import NodeCGVue from 'nodecg-vue';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);
Vue.use(NodeCGVue);
import MyComponent from './MyComponent.vue';
new Vue({
render: h => h(MyComponent)
}).$mount('#app');
```
## Usage
Examples and description for the components can be found in each component's README. Click the name of an element above to go there.
As each component is just an extended Vuetify component, all the props, slots and events that you would expect are available.
Every component has at least the following props added to interface with the replicant:
- *String*: **replicantName** - The name of the target replicant. ***Required***
- *String*: **replicantBundle** - The bundle namespace of the target replicant. If a NodeCG API context is available (`window.nodecg`), this defaults to the current bundle (`window.nodecg.bundleName`).
- *Object*: **replicantOpts** - The desired options to be passed to the Replicant upon declaration. See [the NodeCG docs](https://nodecg.com/NodeCG.html#Replicant) for more info on this. Defaults to an empty object. ***Cannot changed after component is mounted.***
## Contributing
The most needed thing at this stage is testing and feedback. If you encounter any bugs or have a feature request, an issue or PR would be much appreciated.