Skip to content

Instantly share code, notes, and snippets.

@laracasts

laracasts/index.html Secret

Last active June 9, 2021 15:55
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save laracasts/882183c239cc746dbd344ab0406858de to your computer and use it in GitHub Desktop.
Save laracasts/882183c239cc746dbd344ab0406858de to your computer and use it in GitHub Desktop.
Download ZIP
vuecasts.com - "Named Slots in a Nutshell" source code.
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.css">
</head>
<body>
<div id="root" class="container">
<modal>
<template slot="header">
My Title
</template>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore cum, delectus quas possimus sint quisquam et, quam quia omnis, autem quae ipsa qui ex earum facilis sequi quidem mollitia culpa?
<template slot="footer">
<a class="button is-primary">Save changes</a>
<a class="button">Cancel</a>
</template>
</modal>
</div>
<script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
Raw
main.js
Vue.component('modal', {
template: `
<div class="modal is-active">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">
<slot name="header"></slot>
</p>
<button class="delete"></button>
</header>
<section class="modal-card-body">
<slot></slot>
</section>
<footer class="modal-card-foot">
<slot name="footer">
<a class="button is-primary">Okay</a>
</slot>
</footer>
</div>
</div>
`
})
new Vue({
el: '#root',
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment