Getting Started

Getting Started

Generator

If you want to create an easy application that quickly provides JSCatalyst tools, the Yeoman generator can do just that. Install yo and the generator package generator-jscatalyst.

 $ npm install -g yo
 $ npm install -g generator-jscatalyst

Make a new directory and cd into it.

 $ mkdir myProject
 $ cd myProject

Run the generator.

  $ yo jscatalyst

Yeoman will ask you several questions before initializing your project. Answer these questions as you see fit. Be sure to run the following commands from you project directory after it is created:

$ npm install
$ npm run serve

---

Installation

If you want to include JSCatalyst into an existing Vue.js project install the following npm packages in your project:

  npm install --save jscatayst
  npm install --save vuex
  npm install --save vuetify

---

Store.js

If you already have a Vuex Store in your project, skip this section and see the Main.js section.

Create a store.js file at the top level of the src/ directory. Include the following code in store.js

import Vuex from "vuex";
import Vue from "vue";

Vue.use(Vuex);

export const store = new Vuex.Store({});

This instantiates a store to manage state within your project. This is essential to using JSCatalyst as some components require access to store to communicate with other JSCatalyst elements. The store will be an essential part of the Main.js section of this guide.

---

Main.js

Incorporate the following code into your main.js file:

import Vue from "vue";
import App from "./App.vue";
import Vuetify from "vuetify";
import { store } from "./store";

import "jscatalyst/dist/jscatalyst.min.css";
import { ThemePlugin } from "jscatalyst";

Vue.use(Vuetify);
Vue.use(ThemePlugin, {
  store,
  themes: ["Blue", "Pink", "Green", "Brown", "Red", "Grey"]
});

new Vue({
  el: "#app",
  store,
  render: h => h(App)
});

There are a few important elements of the main.js file of which you should taker note. First, be sure to import your store from the store.js (or equivalent) file in your project. Additionally, note that we imported two additional JSCatalyst features:

import "jscatalyst/dist/jscatalyst.min.css";
import { ThemePlugin } from "jscatalyst";

The .css file provides your project with the means to style JSCatalyst elements and properly render all of its charts and graphs. The ThemePlugin provides JSCatalyst components with the ability to change between dark and light rendering and alter the base color used in each graph. These colors are specified here:

Vue.use(ThemePlugin, {
  store,
  themes: ["Blue", "Pink", "Green", "Brown", "Red", "Grey"]
});

As with any standard Vue.js application, remember to include the store in your app Vue object:

new Vue({
  el: "#app",
  store,
  render: h => h(App)
});