BootstrapVue: config driven layout and dynamic view generating

Sometimes we need to have our application to be generic and can be flexbile to tailor for different custom requests. Here is the way I did to control the layout and views of application by using configuration file and BootstrapVue.

Architecture and Logic Flow:

The architecture:
There need to be different API(Space) seted up connecting to database. For each Space, a customized Configuration file is included and can be fetched from our appilcation. For each deployed application instance, it will have access to the certain Configuration file and the code will render layout and view based on the Configuration file.
The flow:
When application starts, it will detect if Configuration file gets loaded in. If yes, application will conduct calculation, extract and re-structure the information to the format which can be used by our HTML template; if no, applciation will stay in loading status.

Structure of Configuration File:

The design of the configuration file follows "key lookup" strategy to reflect hierachical order instead of "node-leaf" structure which can be hard to maintain.

When user select one tab, the code will get the corresponding key of this tab and use this key to look up in our tab dependency dictionary. If Object.hasOwnProperty(key), which mean that tab has sub-views that need to be displayed in the tool.

dict = {
	key1: { //... key1 tab display info},
	key2: {//... key2 tab display info}
	...
}
//As long as we can find the key saved in dictionay, we will know that there is next level views needed to be configured.
								

Bind data with HTML

//to config tabs:
 < b-tabs>
	 < b-tab>
		v-for='(tab, index) in ourTabArray'
		:key="tab.key"
		:title="tab.name">
	 < /b-tab>
 < /b-tabs>

//to config buttons
 < b-form-group>
	 < b-form-radio-group>
		v-model='selectedTab'
		:options="getOptions(tab.key)">
	 < /b-form-radio-group>
 < /b-form-group>

getOptions(key){
	return dict.key
}