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
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
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
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 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
In this short post, I want to show you how to build the project for production. This involves hiding any development messages and warnings, and also minifying JavaScript. To make a build, simply run the below command, which is defined within the package.json file. npm run build When doing so, a production build of your… read more
Now that we have taken a look at the structure of the project, let’s talk more about the App.vue file. This file consists of a so-called single file component. We can see this on the file name, which has the vue extension. This is a convention for single file components. These files contain a template… read more
Alright, so now that we have set up our project, let’s actually see what it looks like. First, let’s open up the “package.json” file, which describes the project’s dependencies. { “name”: “sample-project”, “description”: “A Vue.js project”, “version”: “1.0.0”, “author”: “Bo Andersen “, “private”: true, “scripts”: { “dev”: “cross-env NODE_ENV=development webpack-dev-server –open –hot”, “build”: “cross-env NODE_ENV=production… read more
Now that we have introduced the Vue CLI and its templates, let’s now go ahead and install the tool. Node.js is required for installing Vue CLI, which you can get at nodejs.org. We won’t need it because we will be using Node.js itself, though, but because we will be using its package manager, NPM. If… read more
Vue CLI is a simple tool for scaffolding Vue.js applications, i.e. setting up a basic development environment and project structure. When doing so, one must choose a template, and there are currently five different ones to choose from. First we have a webpack template, which includes a full setup with webpack and includes things such… read more