Skip to content

Instantly share code, notes, and snippets.

@padcom

padcom/index.html

Last active May 1, 2020 08:11
Show Gist options
  • Save padcom/cd8092d6032a88f1f2b9022d6d3a68ba to your computer and use it in GitHub Desktop.
Save padcom/cd8092d6032a88f1f2b9022d6d3a68ba to your computer and use it in GitHub Desktop.
Download ZIP
Vue.js example showing the use of default slot and named slots
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Application layout</title>
<script src="https://unpkg.com/vue"></script>
<style>
html, body {
margin: 0;
padding: 0;
}
.app-layout {
display: grid;
width: 100vw;
grid-template-areas:
"header"
"sidebar"
"content"
"footer";
grid-template-rows: 50px 100px 1fr 30px;
grid-template-columns: 1fr;
}
.header {
grid-area: header;
background-color: #ecebb6;
}
.sidebar {
grid-area: sidebar;
background-color: #c8e6f3;
}
.content {
grid-area: content;
background-color: white;
padding: 10px;
}
.footer {
grid-area: footer;
background-color: #d3c7d4;
}
@media screen and (min-width: 500px) {
.app-layout {
height: 100vh;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
grid-template-rows: 50px 1fr 30px;
grid-template-columns: 200px 1fr;
}
.content {
overflow: auto;
}
}
@media screen and (min-width: 1200px) {
.app-layout {
height: 100vh;
grid-template-areas:
". header header ."
". sidebar content ."
". footer footer .";
grid-template-rows: 50px 1fr 30px;
grid-template-columns: 1fr 200px 1000px 1fr;
}
.content {
overflow: auto;
}
}
</style>
</head>
<body>
<div id="app">
<app-layout>
<template slot="header">
I am in the header
</template>
<template #footer>
I am in the footer
</template>
<p>{{ message }}</p>
<p>{{ message }}</p>
<p>{{ message }}</p>
<p>{{ message }}</p>
<p>{{ message }}</p>
<p>{{ message }}</p>
<p>{{ message }}</p>
<p>{{ message }}</p>
<p>{{ message }}</p>
<p>{{ message }}</p>
<p>{{ message }}</p>
<p>{{ message }}</p>
<p>{{ message }}</p>
<p>{{ message }}</p>
<p>{{ message }}</p>
</app-layout>
</div>
<template id="app-layout">
<div class="app-layout">
<header class="header">
<slot name="header">Header</slot>
</header>
<aside class="sidebar">
<slot name="sidebar">Sidebar</slot>
</aside>
<main class="content">
<slot>Content</slot>
</main>
<footer class="footer">
<slot name="footer">Footer</slot>
</footer>
</div>
</template>
<script>
Vue.component('app-layout', {
template: '#app-layout'
})
new Vue({
el: '#app',
data: {
message: 'Hello'
}
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment