Create a gist now

Instantly share code, notes, and snippets.

@laracasts /Alert.vue Secret
Last active Jun 1, 2017

What would you like to do?
"Alert Component From Scratch" source.
<template>
<div class="Alert Alert--{{ type | capitalize }}"
v-show="show"
transition="fade"
>
<slot></slot>
<span class="Alert__close"
v-show="important"
@click="show = false"
>
x
</span>
</div>
</template>
<script>
export default {
props: {
type: { default: 'info' },
timeout: { default: 3000 },
important: {
type: Boolean,
default: false
}
},
data() {
return { show: true };
},
ready() {
if (! this.important) {
setTimeout(
() => this.show = false,
this.timeout
)
}
}
}
</script>
<style>
.Alert {
padding: 10px;
position: relative;
}
.Alert--Info {
background: #e3e3e3;
}
.Alert--Success {
background: green;
color: white;
}
.Alert__close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
.fade-transition {
transition: opacity .4s ease;
}
.fade-leave {
opacity: 0;
}
</style>
var elixir = require('laravel-elixir');
require('laravel-elixir-vueify');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/
elixir(function(mix) {
mix.browserify('main.js');
});
import Vue from 'Vue';
import Alert from './components/Alert.vue';
new Vue({
el: 'body',
components: { Alert }
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment