Now it’s time to look at components, which are one of the most powerful features of Vue.js. Components let you encapsulate reusable code that is self-contained. We will be using components extensively throughout the rest of the series, so this is an important concept. For the first couple of posts, we will still be working… read more

I previously mentioned that with components, the data property must be a function and not an object as we are used to. I have opened up an example of a component which contains a button. <div id="app"> <counter></counter> </div> Vue.component(‘counter’, { template: ` <div> <button @click="counter++">{{ counter }}</button> </div> ` }); new Vue({ el: ‘#app’… read more

Now that we have created our first component, let’s talk a bit about global and local components. A global component is a component that can be used anywhere in an application, including within other components. On the other hand, a local component is a component that is not registered globally, and can therefore only be… read more

When registering components either locally or globally, you have a few options for how to name the tag name. In the examples from the previous posts, I have used kebab-case, which means all lowercased letters and words are separated by a dash. However, you can also use camelCase or PascalCase if you prefer. Consider the… read more

It’s time to open up a project like the one that we created in a previous post. In this post, I want to add a global component to the project, but first I will start out by cleaning the project up a little and remove some of the default stuff that was included with the… read more