Falling in Love with Vue.js

Simon Skoczylas

Senior Software Engineer

Karakun Developer Hub

https://dev.karakun.com

giftkugel

www.skoczylas.net

I ❤ React

Current state of

Web development

Let's compare

Maintainer

Google

Facebook

Vue Community

GitHub ⭐

63k

153k

169k

Components

✔

SSR

✔

State management

✔

Routing

✔

❌

✔

Form validation

✔

❌

Http Client

✔

❌

Language

Typescript

JavaScript

JavaScript / TypeScript

Templates

HTML

JSX

HTML / JSX

Reactive

✔

❌

✔

Mobile

NativeScript

ReactNative

NativeScript

CLI

✔

❌

✔

Testing

✔

❌

✔

Can be used as library

❌

✔

Enterprise ready setup

✔

❌

✔

Benchmark

+

=

Withtout installation

Without anything else!

With NPM


npm install vue

With CLI


npx @vue/cli create my-project

Complete project setup

DOM



    {{ message }}

JavaScript


const app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
})



    {{ count }}


const app = new Vue({
    el: '#app',
    data: {
        count: 10
    }
})

Building blocks

Vue instance

DOM (or Template for components)

Stylesheets

Vue instance

Every Vue application starts by creating a new Vue instance with the Vue function

When you create a Vue instance, you pass in an options object


const app = new Vue({ ... })

Detailed documentation: Vue API

Data


const app = new Vue({
    props: { ... },
    data: { ... },
    computed: { ... },
    methods: { ... },
    watch: { ... }
})

Lifecycle Hooks


const app = new Vue({
    beforeCreate: { ... },
    created: { ... },
    beforeMount: { ... },
    mounted: { ... },
    beforeUpdate: { ... },
    updated: { ... },
    beforeDestroy: { ... },
    destroyed: { ... },
    errorCaptured: { ... }
})

Components


const app = new Vue({
    name: { ... },
    template: { ... },
    components: { ... }
})

DOM


const app = new Vue({
    el: { ... },
    render: { ... },
    renderError: { ... }
})

Template



    {{ count }}

Mustache syntax

Directive


A
B
Not A/B

Directives

Data

v-bind (:), v-model

Events

v-on (@)

Control / Flow

v-if, v-else, v-else-if, v-for, v-show

Our first component


Vue.component('button-counter', {
    data: function () {
        return {
            count: 0
        }
    },
    template: ''
})


new Vue({ el: '#app'})

With properties


Vue.component('button-counter-text', {
    props: ['text'],
    data: function () {
        return {
            count: 0
        }
    },
    template: ''
})

With slots in templates

Slots are an addition to templates for Vue components and inspired by Web Components


Vue.component('button-counter-slot', {
    data: function () {
        return {
            count: 0
        }
    },
    template: ''
})



    Foo
    Bar

Foo

Bar

With events


Vue.component('button-counter-event', {
    ...,
    methods: {
        increase(): {
            this.$emit("increase", this.count);
        }
    }
})

Data flow for Vue components

Down to components (Properties)

Up from components (Events)

Single File Components

...

Bring back a bit of separation

Different languages and pre-processors

...

Magic happens during build process

Webpack ⇒ Vue-Loader

Creates separate files for Webpack on the fly

Plugin for IDE

Webpack based build

No need to "eject"

Can change every Webpack option

Build targets: App, Library, Web Components

Testing

Mocha + Chai, or Jest

Cypress

I ❤ Vue

Easy to learn and use

Good documentation 🥰

Open Source from the community to the community

Valid option for enterprise projects 💯, even legacy ones

Vue 3 is coming soon

Thank you for listening 🙌