Common foundation app UI, logic, and config setups for Vuestack client apps (Vue + Vue-Router + Vuex).
Not ready for public use until version 0.1.0 - Syntax and logic are in frequent flux.
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.
[TBC - More Details]
The App Config Support plugin requires:
- Vue2 (github.com/vuejs/vue)
- Vuex (github.com/vuejs/vuex)
$ npm install vuestrap-app-config-support --saveimport 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,
});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.
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]
| Model | Description |
|---|---|
| TBD |
[TBC]
| 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'] |
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') |
[TBD]
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 devBy 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.
The plugin uses ESLint for source code linting. The linting will run automatically on git commit.
$ npm run lintThe plugin uses Mocha for the testing framework, and Chai and Chai-HTTP for its assertions.
$ npm run testThe plugin is automatically built on npm publish. But, you can manually build the plugin using:
$ npm run build-plugin|M| manicprone