Image for post
Image for post

New to Vue?


Install VueDevtools

Install VuePerformanceDevtool

Vue.config.performance = true;

Component Communication

<my-component :firstProp="someValue"></my-component>
...
export default {
methods: {
onClick() {
this.$emit('nameOfEvent', someValue);
}
}
}
<my-component :firstProp="someValue" @nameOfEvent=”doSomething”></my-component>

Use Vuex for state management

Code Splitting

const Loader = () => import(/* webpackChunkName: "aChunkName" */'../path/to/component.vue');

Shortcut component registration

import MyAwesomeComponent from './my-awesome-component.vue';...
components: {
'my-awesome-component': MyAwesomeComponent
}
...
components: {
MyAwesomeComponent,
MyAwesomeComponentTwo,
MyAwesomeComponentThree
}

Shortcut for registering components globally

import ComponentA from './component-a.vue';
import ComponentB from './component-b.vue';
import ComponentC from './component-c.vue';

Vue.component('component-a', ComponentA);
Vue.component('component-b', ComponentB);
Vue.component('component-c', ComponentC);
...
const ctors = {};

const components = {
ComponentA,
ComponentB,
ComponentC
};

//Attach component to vue globally - NOTE: Remember to define a name in your component...
Object.keys(components).forEach(function (key) {
const component_name = components[key].name;
if (component_name) {
ctors[component_name] = Vue.component(component_name, components[key]);
} else {
throw new Error('It seems you forgot go give your component a name...');
}
});

Avoid registering all components as global components

Validate your props

Routing

URL changes, but view doesn’t update

<router-view :key="$route.fullPath">
watch: {
"$route.params.somevalue": {
handler(somevalue) {
// do stuff
},
immediate: true
}
}

You are (almost) forced to have a root node.

<template>
<div> <!-- The root -->
<span></span>
<span></span>
</div>
</template>
<template>
<span></span>
<span></span>
</template>

Form Validation made easy

Get to know Vue’s lifecycle hooks.

Image for post
Image for post

Avoid manipulating the DOM directly

Working with data

Looping

<div v-for="item in items" v-bind:key="item.id">
<!-- content -->
</div>

Computed properties vs Methods

data:{
names: ["Leonardo", "Donatello", "Rafael", "Michaelangelo"]
},
computed:{
startsWithD(){
return this.names.filter(name => name.startsWith("D"))
}
}

<p v-for="(name, index) in startsWithD" :key="index">{{name}}</p>
data:{
names: ["Leonardo", "Donatello", "Rafael", "Michaelangelo"]
},
computed:{
startsWithD(){
return this.startWithCharacter("D")
},
startsWithL(){
return this.startWithCharacter("L")
}
},
methods:{
startWithCharacter(char){
return this.names.filter(name => name.startsWith(char))
}
}

Know the power of mixins

Know the power of filters

filters: {
formatDate: function (date) {
if(date) {
//format using date-fns
return format(
new Date(date),
'DD.MM.YYYY'
)
} else {
return '--';
}
}
}

Utilize the built in modifiers

Good structure!

Clean up after yourself.

created() {
refreshUserLoginTokenInterval(); //At created we start an interval to refresh
},
beforeDestroy () {
destroyUserLoginInterval(); //Before component is destroyed, we clean up
}

Add multiple classes to an element

//Add class red if isError is true
<div :class=”{'red': isError}”></div>
// Add to classes if two properties return true
<div :class="{'red': isError, 'text-bold': isActive }”></div>


Vue.js Developers

Helping web professionals up their skill and knowledge of…

Nicky Christensen

Written by

Frontend Tech Lead @ Enversion— VueJS Fanboy — In love with most frontend related stuf — nickychristensen.dk / https://twitter.com/nickycdk

Vue.js Developers

Helping web professionals up their skill and knowledge of Vue.js

Nicky Christensen

Written by

Frontend Tech Lead @ Enversion— VueJS Fanboy — In love with most frontend related stuf — nickychristensen.dk / https://twitter.com/nickycdk

Vue.js Developers

Helping web professionals up their skill and knowledge of Vue.js

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store