Vuestrap | App Config Support

Common foundation app UI, logic, and config setups for Vuestack client apps (Vue + Vue-Router + Vuex).

WIP

Not ready for public use until version 0.1.0 - Syntax and logic are in frequent flux.

Table of Contents

• Introduction
• Prerequisites
• How to Use
• Namespace
• Options
• Models
• Store
• Router
• For Developers
• License

Introduction

What is a Vuestrap?

A Vuestrap is a Vue plugin designed to bootstrap Vue apps with robust, fully-operational application layers.

The plugins strap themselves across the full horizontal stack of the Vue anatomy: adding router logic, state management handling, application logic, data models, and components, allowing you to rapidly compose powerful Vue application boilerplates.

App Config Support

[TBC - More Details]

Prerequisites

The App Config Support plugin requires:

• Vue2 (github.com/vuejs/vue)
• Vuex (github.com/vuejs/vuex)

How to Use

Install

$ npm install vuestrap-app-config-support --save

Bootstrap Your Vue App

import Vue from 'vue';
import store from './store'; // your vuex store instance
import router from './router'; // your vue-router instance
import AppConfigSupport from 'vuestrap-app-config-support';

Vue.use(AppConfigSupport, {
  store,
  router,
});

Namespace

The default namespace for the App Config Support store API is: app.

However, you can set your preferred namespace when bootstrapping, using the namespace option.

Options

The following options are available when bootstrapping the app.

| Name | Required? | Description | | ---------------- | --------- | ----------- | | store | Yes | The Vuex instance. | | router | No | The Vue-Router instance. | | namespace | No | The namespace to use with the store API. By default, the namespace is app. |

[TBC]

Models

| Model | Description | | -------- | ----------- | | TBD | |

[TBC]

Store

Getters

| Getter | Returns | Description | Example | | ------ | --------| ----------- | ------- | | pluginName | String | The plugin name/identifier. This value cannot be changed. | this.$store.getters['app/pluginName'] | | name | String | The application display name. | this.$store.getters['app/name'] | | alias | String | The application alias. A programmable alias for third-party configurations. | this.$store.getters['app/alias'] | | version | String | The application version for in-app display. | this.$store.getters['app/version'] | | settings | String | Core application settings, that cannot be modified by the user. | this.$store.getters['app/settings'] |

Actions

All actions are Promises, but not all actions are asynchronous.

| Name | Parameters | Returns | Description | Example | | ----------- | ---------- | --------- | ----------- | ------- | | setName | name | (void) | TBC | this.$store.dispatch('app/setName') | | setAlias | alias | (void) | TBC | this.$store.dispatch('app/setAlias') | | setVersion | version | (void) | TBC | this.$store.dispatch('app/setVersion') | | setSettings | name | (void) | TBC | this.$store.dispatch('app/setSettings') |

Router

[TBD]

For Developers

Dev Run

To provide a fully working Vue app environment to test and develop the plugin, a simple Vue application will build (the plugin & the app bundle) and serve when running:

$ npm run dev

By default, the development app environment will hot-reload changes and will run on localhost:3302.

You can change the configuration for the development environment via test/simulator/config.js.

Dev Lint

The plugin uses ESLint for source code linting. The linting will run automatically on git commit.

$ npm run lint

Dev Test

The plugin uses Mocha for the testing framework, and Chai and Chai-HTTP for its assertions.

$ npm run test

Dev Build

The plugin is automatically built on npm publish. But, you can manually build the plugin using:

$ npm run build-plugin

License

MIT

|M| manicprone