VUE.JS DEVELOPMENT IN 2019

Vuex, Vue Router and Typescript

Bruce Cantarim

Digital Media Frontend Developer - Arctouch Brasil

What is

VUE.JS?

So...

What is Vue.js |

Well... it's a javascript framework. A progressive one.

The Basics

It was first released in 2014.

It's open source and MIT.

And it's used by huge companies.

What is Vue.js |

Who uses it?

What is Vue.js |

Fast growth

As of yesterday, 139k vs React's 130k stars on Github.

Powering ~400k websites, ~4k new sites per month.

It's getting smaller and faster soon.

The codebase is being rewritten in Typescript.

What is Vue.js |

What does it looks like?

<div id="app">
  {{ message }}
</div>

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

HTML

Where do I

START?

So...

Where do I start? |

Vue Mastery's Intro to Vue.js Free Course:

Links, links, links

www.vuemastery.com/courses/intro-to-vue-js/vue-instance

Vue's Official Getting Started Guide:

Vue's Official News Podcast:

vuejs.org/v2/guide

news.vuejs.org

Where do I start? |

A full system for rapid Vue.js development.

The Vue CLI

$ npm install -g @vue/cli

$ yarn global add @vue/cli

Where do I start? |

To create a new project, run:

Creating a Project

$ vue create project-name

$ cd project-name && vue ui
# or
$ cd project-name && yarn serve

then...

The Vue UI

Where do I start? |

Let's talk about

TYPESCRIPT

Let's talk about Typescript |

Well... it's a superset of Javascript.

What is it?

And it transpiles to Javascript.

It's all about OOP, static typing, mostly.

And VS Code integration is amazing with it.

Let's talk about Typescript |

It will prevent about 20% of the bugs in development.

Why it matters?

It lets you learn it progressively.

It improves the readability of the code.

3rd most loved language of Stackoverflow's 2019 survey.

var Greeter = (function () {
    function Greeter(message) {
        this.greeting = message;
    }

    Greeter.prototype.greet = function () {
        return “Hello, “ + this.greeting;
    };

    return Greeter; 
})();

Let's talk about Typescript |

A quick comparison

class Greeter {
    private greeting: string;

    constructor (private message: string) {
        this.greeting = message;
    }

    greet() {
        return `Hello, ${this.greeting}`;
    }
}

It's just Javascript with some

ADDITIONAL FEATURES

Don't be afraid...

Working with

COMPONENTS

Working with Components |

Vue Property Decorator:

The First Secret

github.com/kaorun343/vue-property-decorator

$ npm install -S vue-property-decorator

$ yarn add vue-property-decorator

export default {
  props: {
    propA: {
      type: Number
    },
    propB: {
      default: 'default value'
    },
    propC: {
      type: [String, Boolean]
    },
  }
}

import { Vue, Component, Prop } from 'vue-property-decorator'

@Component
export default class YourComponent extends Vue {
  @Prop(Number) readonly propA!: number
  @Prop({ default: 'default value' }) readonly propB!: string
  @Prop([String, Boolean]) readonly propC!: string | boolean
}

Vue Property Decorator

Working with Components |

There are 7 decorators and 1 function (Mixin):

@Emit

@Inject

@Model

Vue Property Decorator

Working with Components |

@Prop

@Provide

@Watch

@Component (vue-class-component)

Mixins (vue-class-component)

SPAs and the

VUE ROUTER

SPAs and the Vue Router |

The Vue Router is a part of the official ecosystem.

There's no secret here

It is amazing for your SPAs.

It's loaded with features, including transitions.

$ npm install -S vue-router

$ yarn add vue-router

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
  ],
});

<template>
  <div id="app">
    <router-view />
  </div>
</template>

...

router.ts

app.vue

SPAs and the Vue Router |

What does it looks like?

State management and

VUEX

State Management and Vuex |

Vuex is also a part of the official ecosystem.

Your Single Source of Truth

It's data store that can get, mutate and realize actions.

Makes it a breeze to pass values in your application.

$ npm install -S vuex

$ yarn add vuex

import Vue from 'vue';
import Vuex, { StoreOptions } from 'vuex';
import { RootState } from './types';
import { profile } from './profile/index';

Vue.use(Vuex);

const store: StoreOptions<RootState> = {
    state: {
        version: '1.0.0'
    },
    modules: {
        profile
    }
};

export default new Vuex.Store<RootState>(store);

store.ts

State Management and Vuex |

There's room for improvement

export interface RootState {
    version: string;
}

types.ts

import { Module } from 'vuex';
import { getters } from './getters';
import { actions } from './actions';
import { mutations } from './mutations';
import { ProfileState } from './types';
import { RootState } from '../types';

export const state: ProfileState = {
    user: undefined,
    error: false
};

const namespaced: boolean = true;

export const profile: Module<ProfileState, RootState> = {
    namespaced,
    state,
    getters,
    actions,
    mutations
};

profile/index.ts

codeburst.io/vuex-and-typescript-3427ba78cfa8

Reference:

We'll get

THERE

State Management and Vuex |

The second secret

Vuex Class:

github.com/ktsn/vuex-class

$ npm install -S vuex-class

$ yarn add vuex-class

import { Vue, Component } from 'vue-property-decorator';
import { State, Getter, Action, Mutation } from 'vuex-class';

@Component
export class MyComp extends Vue {
  @State('foo') stateFoo
  @Getter('foo') getterFoo
  @Action('foo') actionFoo
  @Mutation('foo') mutationFoo

  created () {
    this.stateFoo // -> store.state.foo
    this.getterFoo // -> store.getters.foo
    this.actionFoo({ value: true }) // -> store.dispatch('foo', { value: true })
    this.mutationFoo({ value: true }) // -> store.commit('foo', { value: true })
  }
}

State Management and Vuex |

Vuex Class

Now, let's go back to

THE STORE

State Management and Vuex |

The Third Secret

Vuex Module Decorators:

github.com/championswimmer/vuex-module-decorators

$ npm install -D vuex-module-decorators

$ yarn add -D vuex-module-decorators

import { VuexModule, Module, Mutation, Action } from 'vuex-module-decorators';

export interface CounterState {
    counter: number;
}

@Module
export default class Counter extends VuexModule implements CounterState {
    public counter = 0;

    @Action({ commit: 'increment' })
    public add1(): number {
        return 1;
    }
    
    @Mutation
    private increment(delta: number): void {
        this.counter += delta;
    }

    get getCounter(): number {
        return this.counter;
    }
}

counter.ts

State Management and Vuex |

Vuex Module Decorators

import Vue from 'vue';
import Vuex, { StoreOptions } from 'vuex';
import Counter from './counter';

Vue.use(Vuex);

export interface RootState {
    counter: Counter;
}

const store: StoreOptions<RootState> = {
  modules: {
    counter,
  },
};

export default new Vuex.Store<RootState>(store);

store.ts

Sass variables in

VUE

Sass variables in Vue |

You could use PostCss instead. But should you?

A few details first

This is applicable to vue-cli created projects.

The many style flavors of Vue.js

Why would you want global variables?

module.exports = {

  publicPath: './',

  css: {
    loaderOptions: {
      sass: {
        data: `@import '@/styles/variables.scss';`,
      },
    },
  },
};

vue.config.js

Sass variables in Vue |

Here's how to do it

Packing with

ELECTRON

Packing with Electron |

Electron is a way to package your project as an app.

What? Why?

It's gives you control over the version of Chromium.

You can use it to standartize your deliverables.

It supports a huge array of plataforms.

Packing with Electron |

Vue-CLI Plugin Electron Builder

The last secret

github.com/nklayman/vue-cli-plugin-electron-builder

$ npm install -S vue-cli-plugin-electron-builder

$ yarn add vue-cli-plugin-electron-builder

Packing with Electron |

Build Settings

THANK YOU.

We are hiring !

bruce@cantarim.com

linkedin.com/in/brucecantarim