/harness-vue-starter-template

Primary LanguageJavaScriptMIT LicenseMIT

Harness-Vue Starter Template

This repository contains the official starter template for building new Vue 3 applications using RTI Center for Data Science's Harness-Vue and Harness-Vue-Bootstrap libraries.

Dev Setup

Run npm install to install dependencies. Run npm run dev to start the hot-reload dev server.

What's Included

This starter template includes the following:

  • A Vue 3 application created with create-vue using vite
  • Preconfigured with eslint and prettier
    • npm run lint to run linting and fix issues
    • eslint configuration located at .eslintrc.cjs
    • prettier configuration located at .prettierrc.json
  • Preconfigured testing with vitest
    • npm run test for a single run, npm run test:watch to rerun tests on code change
    • an example test is located at tests/test.spec.js
  • Sass support with a preconfigured style entry point located at src/styles/main.scss
  • Harness-Vue preinstalled, including the options API global mixin
  • Harness-Vue-Bootstrap preinstalled including the component library plugin to globally register all components
  • An example Harness-Vue page definition located at src/harness-pages/examplePage using Harness-Vue-Bootstrap form controls
  • An example page component using Harness-Vue-Bootstrap layouts at src/components/examplePage.vue
  • An example chart component using the composition API and the Harness-Vue composable
  • Documentation on CI/CD best practices and examples located under ci-examples
  • Documentation on and examples of dockerized and/or static site deployment located under deployment

Removing Vue Router

If you'd like to run this application without vue-router (for apps that only require a single harness page and want easier integration), do the following:

  • npm remove vue-router to remove the dependency
  • in main.js, remove vue-router from the app and from harness
    • remove the line that reads import router from "./router";
    • remove the line that reads app.use(router);
    • change the line that reads app.use(harnessPlugin, { pinia, router, pages }); to app.use(harnessPlugin, { pinia, pages });
  • change the contents of App.vue to the following:
<script setup>
import { useHarnessComposable } from "@rtidatascience/harness-vue";
import { onBeforeMount } from "vue";
const harness = useHarnessComposable();
onBeforeMount(() => {
  harness.loadData();
});
</script>
<template>
  <div id="app">
    <component :is="harness.getPageDefinition.pageComponent" />
  </div>
</template>

This uses the page component specified by your harness-vue page definition, and runs loadData before mount similar to how it is run in a router navigation guard in apps that use vue-router.