How to create an app with Vue.js

Computed properties

To make our component more complex, we will introduce a new feature of the Vue API called computed. This is usually referred to as 'computed properties', as its value is converted into a real property. In order to show how computed properties work, we are going to enhance our component to support a snippets view and full article view.

<template>
<div class="article">
<img src="./../assets/logo.png" />
<h1>{{ title }}</h1>
<p v-if="showingSnippets">{{ snippets }}</p>
<p v-else>{{ value }}</p>
<button v-on:click="toggleArticle">{{ buttonText }}</button>
<button v-on:click="likes++;">Likes: {{ likes }}</button>
</div>
</template>
<script>
export default {
props: {
title: String,
value: { type: String, required: true },
snippetsLength: { type: Number, required: false, default: 20 }
},
data() {
return { likes: 0, showingSnippets: true }; 
},
computed: {
snippets() {
const fullArticle = this.value;
const articleSnippets = fullArticle.substring(0, this. snippetsLength);
return `${articleSnippets}...`;},
buttonText() {
return this.showingSnippets ? "Show full article" : "Show snippets";}
},
methods: {
toggleArticle() {
this.showingSnippets = !this.showingSnippets; }
}};
</script>

This example is providing a new directive v-if and v-on, which will automatically show or hide components, using a private variable called showingSnippets. The value of snippets is computed on the fly and will change if any of the properties it uses (snippetsLength, fullArticle) changes.

MainComponent.vue

The next step involves a new component that is going to be the body of our application, used to emulate an API call and introduce us to a new directive v-for. The Vue API provides access to a comprehensive list of hooks to load and trigger events at the right time (in our case mounted). These are out of the scope for this tutorial but details can be found here. 

<template>
<div id="MainContent">
<articleContainer v-for="(item, index) in Posts" :key="index" v-bind="item" />
</div>
</template>
<script>
import articleContainer from "./article.vue";
import FakePosts from "../data/posts.js";
export default {
data: function() {
return { Posts: [] };
},
methods: {
fakeApiCall() {
//here we are emulating the possibility to load the value with an api
this.Posts = FakePosts;}
},
components: { articleContainer },
mounted() {
this.fakeApiCall();}
};
</script>

Build a mixin

Another powerful feature of Vue.js are the mixins. These are reusable JS methods that expand the features of a specific component. Mixins have access to most of the Vue API (properties, data, methods). They are usually stored in a mixins folder, created within the SRC directory and, as mixins are purely JS, saved with a .js extension.

At first, the power of this feature may not be obvious. However, as you get familiar with Vue and its API, mixins will start to take shape and support your application. I have seen this feature used to define input validation, internationalisation and provide product functionality, such as file uploader. 

The main difference between a normal component and a mixin is that the latter can be included and applied to any component. For example, you could add a file upload mixin to a button or an image and they will all have access to the new feature.

We are going to build an accessibility mixin. This will provide a toggleContrast method that can be applied to any of our component.

export default {
props: {
lightTextColour: { type: String, default: "#252525" },
lightBackgroundColour: { type: String, default: "#fff" },
darkTextColour: { type: String, default: "#fff" },
darkBackgroundColour: { type: String, default: "#252525" }
},
data() {
return { isLight: true };
},
methods: {
toggleHighContrast() {
this.isLight = !this.isLight;
if (this.isLight) {
this.$el.style.backgroundColor = this.lightBackgroundColour;
this.$el.style.color = this.lightTextColour;
} else {
this.$el.style.backgroundColor = this.darkBackgroundColour;
this.$el.style.color = this.darkTextColour; }
}}
};

Now our code is defined, we can include it in any components and use its methods and properties as if they were defined in the actual component. Mixins could be properties driven, enabling them to offer it as soon as they are included in the component, or they may need some action to take effect (eg. having to call a specific method).

To take full advantage of this feature, we need to make the following modification within our code:

<template>
<div class="article">
…
<button v-on:click="toggleHighContrast">Toggle High Contrast</button>
</div>
</template>

<script>
import Accessibility from "../mixins/Accessibility.js";
…
mixins: [Accessibility]
};
</script>

We can now toggle the contrast on the individual component using the new defined button. It is important to understand that even if no extra properties have been defined, our article component is actually able to accept lightTextColour, darkTextColour, lightBackgroundColour and darkBackgroundColour. These are defined within the accessibility mixin.

Our small prototype is now fully working and can be used as a reference for future projects.

This article was originally published in issue 316 of net, the world's best-selling magazine for web designers and developers. Buy issue 316 here or subscribe here.

Related articles:

• 9 of the best JavaScript frameworks
• Revealed: The latest JavaScript trends
• How to build a blogging site with Gatsby