Integration of the golden-layout to Vue
npm i -S vue-golden-layout
Component 1Component 2Component 3
Note: each component who is not rendered in a stack will indeed be rendered in a golden-layout singleton stack.
A more complex exemple is in the project when git-cloned. In order to test, the static sample application can be compiled like this:
npm installnpm run demo
You can now browse
The example can also be found in the sources under the '/demo' folder
In case of incompatibility with bundlers,
vue-golden-layout can be bundeled by the sources.
The sources entry point is in
Don't forget in order to make it work
- Include a golden-layout theme CSS.
Available themes are
goldenlayout-base.css is already integrated to the library.
<gl-stack> can be represented in a tree - they respectively stand for a golden-layout row, column and stack.
Component are described by extension - namely, by giving their content using the data from the defining component.
TL;DR: The state is the model of the golden-layout object
golden-layout has a property and an event named
- The event is triggered when the state has changed (even deeply, like a deep watch).
- The property is used at mount to initialise the configuration. After that, any change will have no effect.
stateproperty can be a
Promise, then the golden-layout will be rendered only when the
Promisehas been resolved.
- The property
statecan be given minified or not
- The event
stategives indeed the minified version of the config, and the expanded version as a second argument.
- It is also the
- In order to reload a state, the Vue object structure must be reloaded identical too
Components events and properties
Straight forwards from golden-layout, refer to their doc
Contained objects' events
Straight forwards from golden-layout, refer to their doc
hasHeaders: booleanreorderEnabled: booleanselectionEnabled: booleanpopoutWholeStack: booleanblockedPopoutsThrowError: booleanclosePopoutsOnUnload: booleanshowPopoutIcon: booleanshowMaximiseIcon: booleanshowCloseIcon: booleanborderWidth: numberminItemHeight: numberminItemWidth: numberheaderHeight: numberdragProxyWidth: numberdragProxyHeight: number
(default: 5 = 5 seconds)
When the state change, an event is fired and provides the new state. Unfortunately, when something is poped-out, querying the state will raise an exception if the pop-out' golden-layout is not loaded. Hence, the first call to
GoldenLayout.toConfig() will for sure raise an exception.
The policy chosen here is to then wait a bit and try again. In order to avoid infinite exception+try-again, a time-out is still specified.
- Changing this value to higher will not postpone the event fireing, it will just allow more time for the pop-out to load before raising an exception
- This can be useful to increase in applications where the main page has some long loading process before displaying the golden-layout
Contained objects' properties
title: string: Used for tab title
tabId: string: Used ad the
gl-dstackto determine/set the active tab
Contained objects' methods
hide()respectively show and hide the element
focus()brings the element in front recursively, making sure all tabs are right for them to be visible (also brings the window in front if needed)
delete()delete the vue-object and the gl-object
nodePathis the unique path to this node from the golden-layout root (can change). The golden-layout object has a method
getSubChild(path: string)that returns this vue-object (useful between page reload)
Containers have an additional
color-group: boolean property defaulted to
A container for which this property is set to
true will see all his descendants have a color assigned to their tabs.
This is meant to be used when the same component can be used twice on different objects, to follow in the pop-outs which is the descendant of which.
Note: by default, routes that are
glCustomContainer have a
color-group set to
Some components have been programmed as an extension, even if they are not part of golden-layout proprio sensu.
Duplicatable stacks are stacks that should always remain in the main window as their content is modified programatically. These stacks, when poped-out, remain in the main screen while their content is poped-out.
Components defined in it that are not
reorder-enabled will stay in the stack in the main window.
The router is a
glContainer that aims to sublimate the
It let people manage their routes in tabs, open them in a split screen or even popped-out in another browser window on another physical display.
The main usage is
<gl-router />. Any options of
router-view still has to be implemented.
gl-router is a
A default content to render all routes can be provided as the
route slot template - with or without scope : if a scope is queried, it will be the route object.
If this content is provided, it should contain a
<main /> tag that will be filled with the loaded route component.
Note: the provided template will be ignored when maximised/popped-out.
All the components in the default slot will be added as tabs in the router.
Allows to specify a function that takes a route object in parameter and gives the string that will be used as tab title.
If none is specified, the default is to take
$route.meta.title - this means that routes have to be defined with a title in their meta-data.
Specify the URL to use when the user closes all the tabs (
"/" by default)
gl-routes are components displaying a route. They are meant to be used in a gl-router but only have to be used in a golden-layout container.
They can take a
name and/or a
path, and their
reorder-enabled properties are false by default. They can be forced a
title but their container'
titler will be used if not.
Note: all the elements inside them will have a
this.$route pointing to the given route, not the actual URL.
Users can define components who describe a part of the layout. In order to do this, instead of extending
Vue, the component has to extend
var comp = Vue;// becomesvar vgl =var comp = vglglCustomContainer;
The template' root must therefore be a proper golden-layout child (row, col, stack, ...)
These components can be used as route components.
Some golden-layout global component can be given before any instanciation (while declaring classes) by calling this function:
// registerGlobalComponent(name: string, comp: (gl: goldenLayout, container: any, state: any)=> void)
(container: any, state: any)=> void is the signature of a gloden-layout component and they are created per golden-layout instances
The main application component will be created in any pop-out that is opened. The
<golden-layout> node will generate an empty HTML content, so nothing in it will be rendered. Though, if needed, this value is
true when the component is generated in a pop-out which indicate that the component won't even be rendered and should take no action.
The elements with the
glComponent CSS class are the ones directly included in the
<div> controlled and sized by golden-layout and answers to this class to fit in the layout child container, that can be overridden
Golden-layout and Vue both have objects representing their internal state. A
glRow is associated with a
Each vue object has a
glObject property and, vice versa, each golden-layout object has a
vueObject property linking to each another.
Virtual vs actual tree
Vue objects (rows, components, stacks, ...) all have a
$parent that retrieve their Vue' parent. Also their children might be retrieved with
Though, the user might change the order of things and who contain what. To retrieve the golden-layout-wise hierarchy, we can use
glParent as well as
glChindren on the vue objects to retrieve vue objects.