Drop-in Vue UI components for use in a NodeCG dashboard panel
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
src v0.5.2 Feb 18, 2019
.gitignore Remove babel config Feb 17, 2019
LICENSE Create LICENSE Feb 17, 2019
README.md Update README.md Feb 18, 2019
package-lock.json Remove nodecg as devDep Feb 15, 2019
package.json v0.5.2 Feb 18, 2019


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 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. Thanks Lange.

Component Base Component Status
nodecg-text v-text-field Needs Testing
nodecg-toggle v-button Needs Testing
nodecg-select v-select Planned
nodecg-combobox v-combobox Planned
nodecg-list v-list Planned
nodecg-menu v-menu Planned
nodecg-time-picker v-time-picker Planned


  1. npm install nodecg-vue
  2. Setup your base component:
import Vue from 'vue';
import Vuetify from 'vuetify';
import NodeCGVue from 'nodecg-vue';

import 'vuetify/dist/vuetify.min.css';


import MyComponent from './MyComponent.vue';

new Vue({
	render: h => h(MyComponent)


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 for more info on this. Defaults to an empty object. Cannot changed after component is mounted.


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.