vue-modules for OrbViz

This repo includes a variety of modules designed for reuse within OrbViz vue-based projects.

Modules

• BuilderNavbar
• Auth0Plugin
• ColorPicker
• TipTap

Usage

Refer to the individual module documentation for details, but in general:

import { componentName, pluginName, mixinName } from '@orbica/vue-modules'
import Vue from 'vue'

// Global install
Vue.use(pluginName)  // must be global?
Vue.mixin(mixinName)
Vue.component(componentName)

// Component install
export default {
    ...,
    mixins: [mixinName],
    components: {
        componentName,
    },
}

Also need to import bootstrap and bootstrap-vue css files explicitly

// main.ts (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Development

Refer to the SampleComponent readme for an example of the typical file structure.

There is an example Vue app which can be used for local development and testing of the components. When you create a new module, please add it to the example app in such a way that it still allows the previous examples to be used. It will probably be appropriate to add VueRouter at some point to help keep each module's example separate. npm run serve:example will start the example app.

Deployment

npm run build:library will create the production-ready built files, located at ./dist. Refer to the Vue CLI docs for information about the library build target

Deploy to NPM

• Once merged into master, run npm version <new version> locally.
• <new version> can be:
  • explicit version number
  • major, minor or patch to increment the version appropriately
  • one of the above prepended with pre to increment the version in anticipation of the future release and add -0 to indicate pre-release
  • prerelease to increment the pre-release number
• This will update the version number in the package.json then push to Git automatically
• Run git push --tags origin to push (all) tags to GitLab
• The gitlab-ci will then run the tests and deploy to NPM when they pass

Notes

• Run unit tests npm run test:unit
• Lints and fixes files npm run lint
• Customize configuration: This project was initialised using the Vue CLI. See Configuration Reference.