alex-oleshkevich / vue-config

A static config plugin.

vue-configuration

A static config plugin.

Installation

Add package

yarn add vue-configuration

# or via npm:
npm i vue-configuration

Install plugin

import Vue from 'vue';
import VueConfig from 'vue-configuration';
import appConfig from './config.js';

// pass config object to the plugin
Vue.use(VueConfig, {
    config: appConfig
});

Usage

Access config values in any part of app using simple API:

this.$config.get('node');

Use dot-notation for keys:

this.$config.get('node.child.leaf');

Default values if value not set:

this.$config.get('node.child.leaf.empty', 'default');

Replace config:

this.$config.replace({ new: 'data' });

Test if path exists:

// obj = { a: 1 }
this.$config.has('a.b.c'); // false
this.$config.has('a'); // true

Get config object:

this.$config.all();

Example

config.js

export default {
    facebook: {
        apiToken: 'abc',
        clientSecret: 'topsecret'
    },
    allowRegistration: true
};

Get node:

this.$config.get('facebook');
// { apiToken: 'abc', clientSecret: 'topsecret' }

Read Facebook's API token in component:

this.$config.get('facebook.apiToken');
// 'abc'

Test if registration is open:

this.$config.get('allowRegistration');
// true

Test if login is available:

this.$config.get('allowLogin', false);
// oops, not defined! return "false" as default

vue-config's Issues

Error occurs when trying to get properties of undefined

reproduce:

config.get('undef.key', null, {});

TypeError: Cannot read property 'key' of undefined

there should be at least a has method to test a key OR stop on undefined parents returning default value.

how to access configuration without 'this'

Hello,

I am new to vuejs. "this" is not accessible in "beforeRouteEnter" function so I could not access configuration there. I can not find anything about it in documentation.

All examples in documentation use "this.$config". A sample showing how to access configuration when "this" was not available would be helpful.

thank you.