Vue Core

This bundle includes the universal bootstrapper for Vue applications. In this version each bootstrap function is separated, and there is currently on the navigation with a standard configuration, not including marketing navigation, etc.).

Installing

Using npm:

npm install @bizjournals/vue-core

Using yarn:

yarn add @bizjournals/vue-core

Configuring your environment:

You will need to configure an NPM_TOKEN within your project to include these private modules. The best idea is to use an existing project as an example.

For simple setups the .gitlab-ci.yml file within this project as a guide to accessing project variables via the .npmrc file

Example

import Vue from "vue";

// Setup your own Vuex store before using any core helpers
import store from './store';

// import the core library
import core from "@bizjournals/vue-core";

// By default this will hook into an element with id 'navigation'
new Vue(core.nav({ store }));

// Setup your own environment
new Vue({
    el: '#app'
});

Folders

The root object for this core library contains properties that are called or accessed to build essential functionality with your Vue app without having to engineer the solutions yourself.

You may still access content within these libraries directly, and so the following folders contain contents you may refer to directly within your application.

Reference:

import Component from "@bizjournals/vue-core/lib/components/Component.vue";

Paths:

| Path | Description | |----------------|----------------------------------------------------------------| | lib/components | Single file Vue components (may have dependencies on stores) | | lib/directives | Vue directives | | lib/helpers | Helpers specific to Vue environments | | lib/mixins | Vue mixins |

Core API

The object core or as designated by your application contains methods or helpers to help configure your Vue environment.

Methods

The available methods provide configuration compilation to help you setup your application.

core#nav

Navigation

core.nav(Object);

Accepts:

The object passed to the navigation helper accepts the following parameters.

| Property | Type | Required | Description | |----------|-------------|----------|------------------------------------------------------| | el | String | No | Selector for element to hook Vue instance to | | store | Vuex.Store | Yes | The Vuex store you are using within your application |