#LaravelPoznańMeetup #5 "Vue.js - zastosowanie i budowa komponentów"

1. Vue.js - Zastosowanie i budowa
komponentów

2. Amadeusz Kozłowski
Front End Developer
amadeuszkozlowski@gmail.com

3. #1 - Tree organized

4. #2 - Single - file component
<template>
<div v-if=”isActive”>
{{ message }}
</div>
</template>
<script>
export default {
props: [],
data() {
return {
isActive: ‘false’,
message:
‘lorem’,
}
},
methods: {
}
}
</script>
Vue.component('stepper-form',
require('./components/StepperForm.vue'));
const app = new Vue({
el: '#app'
});

5. #3 - Props
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<h3>My journey with Vue</h3>
<h3>Blogging with Vue</h3>

6. #3 - Props
Vue.component('blog-post', {
props: ['title'],
props: {
title: {
default: 'Lorem title',
type: String
}
},
template: '<h3>{{ title }}</h3>'
})
<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post></blog-post>
<h3>My journey with Vue</h3>
<h3>Blogging with Vue</h3>
<h3>Lorem title</h3>

7. #4 - v-for
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:title="post.title"
></blog-post>
v-bind: = :

8. #5 - Events
<button v-on:click="$emit('enlarge-text', 2)">
Enlarge text
</button>
<blog-post
...
v-on:enlarge-text="postFontSize += $event"
></blog-post>
v-on: = @

9. #6 - v-model
<input v-model="searchText">
does the same thing as:
<input
v-bind:value="searchText"
v-on:input="searchText = $event.target.value"
>

10. #7 - Slots
Vue.component('alert-box', {
template: `
<div class="demo-alert-
box">
<slot></slot>
</div>`
})
<alert-box>
Something bad happened.
</alert-box>
<div class="demo-alert-box">
Something bad happened.
</div>

11. #8 - Form Stepper

12. #9 - Blade + Design <div class="container py-8" id="app">
<div class="w-full">
<div class="border border-grey p-4 text-right mb-8 lg:mb-0">
<button class="btn btn--black mr-4 w-24">Powrót</button>
<button class="btn btn--green w-24">Dalej</button>
<button class="btn btn--red w-24">Wyślij</button>
</div>
<div class="flex flex-col lg:flex-row items-center w-full justify-between lg:py-8">
<ul class="steps flex items-center justify-center flex-col mb-8 lg:mb-0 h-screen/2">
<li class="step line done cursor-pointer"><span>1</span></li>
<li class="step line active"><span>2</span></li>
<li class="step pointer-events-none"><span>3</span></li>
</ul>
<div class="lg:mr-auto lg:ml-8">
<form action="/">
<div>
<h2 class="mb-4">Krok 1</h2>
<div class="grid grid-columns-1 grid-gap-8">
<label class="font-bold" for="name">Imię*
<input class="mt-2 w-full" type="text" name="name" id="name">
</label>
<label class="font-bold" for="second_name">Nazwisko*
<input class="mt-2 w-full" type="text" name="second_name"
id="second_name">
</label>
</div>
</div>
</form>
</div>
<div class="mb-8 lg:mb-0 lg:w-64 lg:ml-8">
<img src="{{ asset('images/Vue.jpg') }}" alt="">
</div>
</div>
</div>
</div>

13. #9 - Blade + Design <div class="container py-8" id="app">
<div class="w-full">
<div class="border border-grey p-4 text-right mb-8 lg:mb-0">
<button class="btn btn--black mr-4 w-24">Powrót</button>
<button class="btn btn--green w-24">Dalej</button>
<button class="btn btn--red w-24">Wyślij</button>
</div>
<div class="flex flex-col lg:flex-row items-center w-full justify-between lg:py-8">
<ul class="steps flex items-center justify-center flex-col mb-8 lg:mb-0 h-screen/2">
<li class="step line done cursor-pointer"><span>1</span></li>
<li class="step line active"><span>2</span></li>
<li class="step pointer-events-none"><span>3</span></li>
</ul>
<div class="lg:mr-auto lg:ml-8">
<form action="/">
<div>
<h2 class="mb-4">Krok 1</h2>
<div class="grid grid-columns-1 grid-gap-8">
<label class="font-bold" for="name">Imię*
<input class="mt-2 w-full" type="text" name="name" id="name">
</label>
<label class="font-bold" for="second_name">Nazwisko*
<input class="mt-2 w-full" type="text" name="second_name"
id="second_name">
</label>
</div>
</div>
</form>
</div>
<div class="mb-8 lg:mb-0 lg:w-64 lg:ml-8">
<img src="{{ asset('images/Vue.jpg') }}" alt="">
</div>
</div>
</div>
</div>

14. #9 - Blade + Design
<div class="border border-grey p-4 text-right mb-8 lg:mb-0">
<button class="btn btn--black mr-4 w-24">Powrót</button>
<button class="btn btn--green w-24">Dalej</button>
<button class="btn btn--red w-24">Wyślij</button>
</div>

15. #9 - Blade + Design
<ul class="steps flex items-center justify-center flex-col mb-8 lg:mb-0 h-screen/2">
<li class="step line done cursor-pointer"><span>1</span></li>
<li class="step line active"><span>2</span></li>
<li class="step pointer-events-none"><span>3</span></li>
</ul>

16. #9 - Blade + Design
<div class="lg:mr-auto lg:ml-8">
<form action="/">
<div>
<h2 class="mb-4">Krok 1</h2>
<div class="grid grid-columns-1 grid-gap-8">
<label class="font-bold" for="name">Imię*
<input class="mt-2 w-full" type="text"
name="name" id="name">
</label>
<label class="font-bold" for="second_name">Nazwisko*
<input class="mt-2 w-full" type="text"
name="second_name" id="second_name">
</label>
</div>
</div>
</form>
</div>

17. #10 Vue <- Blade <div class="container py-8" id="app">
<div class="w-full">
<div class="border border-grey p-4 text-right mb-8 lg:mb-0">
<button class="btn btn--black mr-4 w-24">Powrót</button>
<button class="btn btn--green w-24">Dalej</button>
<button class="btn btn--red w-24">Wyślij</button>
</div>
<div class="flex flex-col lg:flex-row items-center w-full justify-between lg:py-8">
<ul class="steps flex items-center justify-center flex-col mb-8 lg:mb-0 h-screen/2">
<li class="step line done cursor-pointer"><span>1</span></li>
<li class="step line active"><span>2</span></li>
<li class="step pointer-events-none"><span>3</span></li>
</ul>
<div class="lg:mr-auto lg:ml-8">
<form action="/">
<div>
<h2 class="mb-4">Krok 1</h2>
<div class="grid grid-columns-1 grid-gap-8">
<label class="font-bold" for="name">Imię*
<input class="mt-2 w-full" type="text" name="name" id="name">
</label>
<label class="font-bold" for="second_name">Nazwisko*
<input class="mt-2 w-full" type="text" name="second_name"
id="second_name">
</label>
</div>
</div>
</form>
</div>
<div class="mb-8 lg:mb-0 lg:w-64 lg:ml-8">
<img src="{{ asset('images/Vue.jpg') }}" alt="">
</div>
</div>
</div>
</div>
<div class="container py-8" id="app">
<stepper-parent>
<div class="lg:mr-auto lg:ml-8">
<form action="/">
<stepper-form :active="true">
@include('form.form1')
</stepper-form>
<stepper-form>
@include('form.form2')
</stepper-form>
<stepper-form>
@include('form.form3')
</stepper-form>
</form>
</div>
<div class="mb-8 lg:mb-0 lg:w-64 lg:ml-8">
<img src="{{ asset('images/Vue.jpg') }}" alt="">
</div>
</stepper-parent>
</div>

18. #11 Using slot
<template>
<div class="w-full">
<div class="border border-grey p-4 text-right mb-8 lg:mb-0"
<button class="btn btn--black mr-4 w-24">Powrót</butto
<button class="btn btn--green w-24">Dalej</button>
<button class="btn btn--red w-24">Wyślij</button>
</div>
<div class="flex flex-col lg:flex-row items-center w-full
justify-between lg:py-8">
<ul class="steps flex items-center justify-center flex-col m
lg:mb-0 h-screen/2">
<li class="step line done cursor-pointer"><span>1</sp
<li class="step line active"><span>2</span></li>
<li class="step pointer-events-none"><span>3</span>
</ul>
<slot></slot>
</div>
</div>
</template>
<div class="container py-8" id="app">
<stepper-parent>
<div class="lg:mr-auto lg:ml-8">
<form action="/">
<stepper-form :active="true">
@include('form.form1')
</stepper-form>
<stepper-form>
@include('form.form2')
</stepper-form>
<stepper-form>
@include('form.form3')
</stepper-form>
</form>
</div>
<div class="mb-8 lg:mb-0 lg:w-64 lg:ml-8">
<img src="{{ asset('images/Vue.jpg') }}" alt="">
</div>
</stepper-parent>
</div>

19. #12 - https://baianat.github.io/vee-validate/
VeeValidate
Input validation for Vue.js

20. #12 - https://baianat.github.io/vee-validate/
<h2 class="mb-4">Krok 1</h2>
<div class="grid grid-columns-1 grid-gap-8">
<label class="font-bold" for="name">Imię*
<input v-validate="'required'" class="mt-2 w-full" v-model="form.name" type="text"
name="name"
id="name">
<p v-show="errors.has('name')" class="text-green text-xs mt-2 md:absolute">@{{ errors.first('name') }}</p>
</label>
<label class="font-bold" for="second_name">Nazwisko*
<input v-validate="'required'" class="mt-2 w-full" v-model="form.secondName" type="text"
name="second_name"
id="second_name">
<p v-show="errors.has('second_name')"
class="text-green text-xs mt-2 md:absolute">@{{ errors.first('second_name') }}</p>
</label>
</div>

21. #13 - [stepper-form] init empty
<template>
<div>
<slot></slot>
</div>
</template>
<div class="container py-8" id="app">
<stepper-parent>
<div class="lg:mr-auto lg:ml-8">
<form action="/">
<stepper-form :active="true">
@include('form.form1')
</stepper-form>
<stepper-form>
@include('form.form2')
</stepper-form>
<stepper-form>
@include('form.form3')
</stepper-form>
</form>
</div>
<div class="mb-8 lg:mb-0 lg:w-64 lg:ml-8">
<img src="{{ asset('images/Vue.jpg') }}" alt="">
</div>
</stepper-parent>
</div>

22. #14 - [app.js] init components
require('./bootstrap');
window.Vue = require('vue');
Vue.component('stepper-parent', require('./components/StepperParent.vue'));
Vue.component('stepper-form', require('./components/StepperForm.vue'));
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);
const app = new Vue({
data: {
form: {},
},
el: '#app'
});

24. #15 - [stepper-form] displaying steps
<template>
<transition name="slide" mode="in-out">
<div v-if="isActive">
<slot></slot>
</div>
</transition>
</template>
<script>
export default {
props: {
active: {
default: false,
type: Boolean,
}
},

25. #15 - [stepper-form] displaying steps
data() {
return {
isActive: false,
}
},
methods: {
open() {
this.isActive = true;
},
close() {
this.isActive = false;
},
toggle() {
return this.isActive ? this.close() : this.open();
}
},
mounted() {
if (this.active) {
this.open();
}
}
}
</script>

26. #16 - Animations
<style>
.slide-enter-active, .slide-leave-active {
transition: all .5s;
}
.slide-enter, .slide-leave-to
{
opacity: 0;
height: 0;
transform: translateX(100px) scale(0.1) rotate(-15deg);
}
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to
{
opacity: 0;
}
</style>

28. #17 - [stepper-parent] init data
data() {
return {
totalSteps: 0,
actualStep: 1,
validated: 1,
}
},
mounted() {
this.totalSteps = this.$children.length;
}

29. #17 - [stepper-parent] init data

30. #17 - [stepper-parent] dynamic steps
<li v-for="step in totalSteps" :key="step"
class="step" @click="goToStep(step)"
:class="{ active: step === actualStep,
line: step < totalSteps,
'done cursor-pointer': step < actualStep || step <= validated,
'pointer-events-none': step > validated }">
<span>{{ step }}</span>
</li>
<ul class="steps flex items-center justify-center flex-col mb-8 lg:mb-0 h-screen/2">
<li class="step line done cursor-pointer"><span>1</span></li>
<li class="step line active"><span>2</span></li>
<li class="step pointer-events-none"><span>3</span></li>
</ul>

31. Aby odtworzyć film kliknij tutaj

32. #18 - [stepper-parent] dynamic buttons
<transition name="fade" mode="in-out">
<button v-show="actualStep !== 1"
class="btn btn--black mr-4 w-24"
@click="backStep">Powrót</button>
</transition>
<button :class="{'btn--green': actualStep < totalSteps,
'btn--red': actualStep === totalSteps,}"
class="btn w-24"
@click="nextButtonAction">
{{ actualStep < totalSteps ? 'Dalej' : 'Wyślij' }}
</button>

33. #19 - [stepper-parent] next prev logic
nextStep() {
this.goToStep(this.actualStep + 1);
if (this.actualStep > this.validated) {
this.validated++;
}
},
backStep() {
this.goToStep(this.actualStep - 1);
},
goToStep(step) {
this.$children[this.actualStep - 1].close();
this.actualStep = step;
let $this = this;
setTimeout(function () {
$this.$children[$this.actualStep - 1].open();
}, 500);
},

34. #19 - [stepper-parent] next prev logic
nextButtonAction() {
this.$parent.$validator.validate().then(result => {
if (!result) {
// invalid
return null;
}
else {
// valid
if (this.actualStep < this.totalSteps) {
return this.nextStep();
}
else {
return this.submit();
}
}
});
},
submit() {
alert(JSON.stringify(this.$parent.form, null, 4));
},

35. Aby odtworzyć film kliknij tutaj

36. Aby odtworzyć film kliknij tutaj

37. #20 - v-cloak
<stepper-parent>
<div class="lg:mr-auto lg:ml-8" v-cloak>
<form action="/">
<stepper-form :active="true">
@include('form.form1')
</stepper-form>
<stepper-form>
@include('form.form2')
</stepper-form>
<stepper-form>
@include('form.form3')
</stepper-form>
</form>
</div>
<div class="mb-8 lg:mb-0 lg:w-64 lg:ml-8">
<img src="{{ asset('images/Vue.jpg') }}" alt="">
</div>
</stepper-parent>
[v-cloak] {
display: none;
}

38. Aby odtworzyć film kliknij tutaj

39. Amadeusz Kozłowski
amadeuszkozlowski@gmail.com