nodecg-vue-ts-template

Template for NodeCG bundles that use Vue.js and TypeScript.

Technical Details

• Tested with Node.js v18 (as of writing, latest LTS properly tested with NodeCG).
• Extension uses TypeScript.
• Browser uses Vue.js (v3), with TypeScript for the scripting.
  • Includes the nodecg-vue-composable helper composable to help with using replicants; I advise you check it's README for more information.
  • Dashboard also includes Quasar, for easy styling of UI.
  • Builds using Vite, using the vite-plugin-nodecg plugin.
• Includes module alias support for both extension and browser.
• ESLint is included for extension/browser/typings.
  • Extends airbnb-typescript/base, alongside a few other recommended/essential packages.
  • Has some personal choices/override rules, but not many.
• I personally use Visual Studio Code with some appropriate extensions (Vue - Official for example), so have made sure it works well in that editor.
• The extension/browser files have some example code scattered about that should help in how to use things.

To use module aliases, you must change all the parts labelled with @nodecg-vue-ts-template; either substitute in your own bundle name, or something else you feel is appropriate. The main places these are in are:

• ./tsconfig.browser.json
• ./tsconfig.extension.json
• ./vite.config.mjs
• ./src/extension/index.ts

Package Commands

• autofix: Automatically fix any possible linting errors using ESLint.
• autofix:dashboard: See above, but only for dashboard based code.
• autofix:graphics: See above, but only for graphics based code.
• autofix:extension: See above, but only for extension based code.
• autofix:types: See above, but only for typings in the src/types directory.
• prebuild: Alias for clean, will automatically run before build if called.
• build: Build written code for use in production.
• build:browser: See above, but only for browser based code.
• build:extension: See above, but only for extension based code.
• clean: Clean up all built/watched files.
• clean:browser: See above, but only for browser based files.
• clean:extension: See above, but only for extension based files.
• lint: Finds any possible linting errors using ESLint, but does not fix them.
• lint:dashboard: See above, but only for dashboard based code.
• lint:graphics: See above, but only for graphics based code.
• lint:extension: See above, but only for extension based code.
• lint:types: See above, but only for typings in the src/types directory.
• schema-types: Create TypeScript typings for schemas/Configschema.json using nodecg-cli.
• start: Start NodeCG.
• watch: Build code and watch for changes, for use in development.
• watch:browser: See above, but only for browser based code.
• watch:extension: See above, but only for extension based code.

Differences between template v1 and v2...

• Upgraded Vue to v3 from v2.
• Uses Vite to build browser code instead of Webpack.
• Uses Quasar for material design styling help instead of Vuetify.
• No TypeScript decorators used in the browser code now as they aren't needed.
• Adds nodecg-vue-composable to help with using/modifying replicants in browser.
• No longer includes any Vue state plugins by default (as no longer needed for replicants), but you can add one if needed (I'd suggest pinia).
• Includes @vueuse/head, in the example code just used to help change the title of each page.
• Uses the nodecg-types package instead of directly referencing the installed NodeCG instance.

Differences between template v2 and v2.1...

• All updates needed for NodeCG v2, which isn't too many but is still some (mainly type related).
• Replaced third party NodeCG types with official library, @nodecg/types.
• Replaced @vueuse/head with @unhead/vue, due to the former's sunsetting.
• Lots of other minor things; check the GitHub differences here: TBD.