Vue + Golden Layout

Developer
Jakob-e
Size
4,920 Kb
Views
133,584
  1. Vue + Golden Layout Previews
  2. Vue + Golden Layout HTML Codes
  3. Vue + Golden Layout CSS Codes
  4. Vue + Golden Layout JS Codes

How do I make an vue + golden layout?

First take on making Vue and Golden Layout work together. What is a vue + golden layout? How do you make a vue + golden layout? This script and codes were developed by Jakob-e on 08 September 2022, Thursday.

Vue + Golden Layout Previews
IQ Test

Vue + Golden Layout - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Vue + Golden Layout</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/golden-layout/1.5.7/css/goldenlayout-base.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/golden-layout/1.5.7/css/goldenlayout-dark-theme.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Golden Layout container -->
<div id="app"></div>
<!-- Golden Layout templates (outside container)-->
<template id="A"> <h1>{{ title }}</h1> <a href="https://www.golden-layout.com/" target="_blank">golden-layout.com</a><br> <button @click="resetLayout()">Reset Layout</button>
</template>
<template id="B"><input v-model="somevalue" /></template>
<template id="C"><p>{{ somevalue }}<p></template> <script src='http://cdnjs.cloudflare.com/ajax/libs/vue/2.2.2/vue.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/golden-layout/1.5.7/goldenlayout.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Vue + Golden Layout - Script Codes CSS Codes

html { box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit;
}
body { margin: 0;
}
[id="app"] { width: 100vw; height: 100vh; color: gold; font-family: sans-serif;
}
[id="A"], [id="B"], [id="C"] { padding: 1rem;
}
h1 { font-weight: 400;
}
a { color: orange;
}
input { margin: 1rem;
}
button { position: absolute; bottom: 1rem; right: 1rem;
}

Vue + Golden Layout - Script Codes JS Codes

// External JS
// Vue, jQuery and Golden Layout
//cdnjs.cloudflare.com/ajax/libs/vue/2.2.2/vue.min.js
//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
//cdnjs.cloudflare.com/ajax/libs/golden-layout/1.5.7/goldenlayout.min.js
"use strict";
//
// Shared Vue Instance Object
//
// As GL will break attempting to wrap it in a Vue instance
// we need to create an instance for each template
//
// To ensure all templates are linked we create a shared
// object to be used as config for each new Vue instance
//
var VueApp = { el: '#app', data: { title: 'Vue + Golden Layout', somevalue: 'Hello Vue :-)' }, methods: { resetLayout: function () { localStorage.removeItem('savedState'); window.location.reload(true); } }
};
//
// GL Config
//
var config = { settings: { hasHeaders: true, showPopoutIcon: false, showCloseIcon: false }, content: [{ type: 'column', content: [ { title: 'Template A', type: 'component', isClosable: false, componentName: 'template', componentState: { templateId: 'A' } }, { type: 'row', content: [ { title: 'Template B', type: 'component', isClosable: false, componentName: 'template', componentState: { templateId: 'B' } }, { title: 'Template C', type: 'component', isClosable: false, componentName: 'template', componentState: { templateId: 'C' } } ] } ] }]
};
//
// Load saved layout state from localstorage
// If we have a saved state use this as config
//
var savedState = localStorage.getItem('savedState');
config = savedState !== null ? JSON.parse(savedState) : config;
//
// Create new GL Layout
//
var layout = new GoldenLayout(config, $(VueApp.el));
// Register GL templates
// – add a Vue instance wrapper with the template id (A, B, C)
// – add the template content to the container
// – await DOM render (setTimeout)
// – change the id of the VueApp to match the template
// – Vueify it
layout.registerComponent('template', function (container, state) { var html = "<div id=\"" + state.templateId + "\">" + $('#' + state.templateId).html() + "</div>"; container.getElement().html(html); setTimeout(function () { VueApp.el = "#" + state.templateId; new Vue(VueApp); });
});
//
//	Save state in local storage
//
layout.on('stateChanged', function () { var state = JSON.stringify(layout.toConfig()); localStorage.setItem('savedState', state);
});
// Initialize GL
layout.init();
// Update GL on window resize
window.addEventListener('resize', function () { layout.updateSize(); });
Vue + Golden Layout - Script Codes
Vue + Golden Layout - Script Codes
Home Page Home
Developer Jakob-e
Username jakob-e
Uploaded September 08, 2022
Rating 4
Size 4,920 Kb
Views 133,584
Do you need developer help for Vue + Golden Layout?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jakob-e (jakob-e) Script Codes
Name
Video wallpaper and css filters
Profile Top
Angular Tab Menu
Snap to base-line
SCSS z-index
Responsive Font Sizing
Angular toggle password directive
Baseline, Scale and Element Queries
Angular Range Filter
SVG Path Circle
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!