Understanding Vue-cli and Single Vue Components

In this article, we'll learn how to create single Vue components while using Vue-cli & webpack. We'll cover the following in this article:

Topics to be covered
 

-Vue cli

-Utilizing bulma.io

-Installing webpack loaders

-Introduction to Single file vue components

-Props & slots inside vue templates

-Simple Event binding

Vue CLI

Open up your terminal & run the following command to install vue-cli in your machine. Make sure you've npm installed on your machine.

$ npm install –g vue-cli

Make a new directory in your /code directory

$ mkdir learning-vue-cli

OR Use Vue Init

Or simply initialize vue by typing the following command in your terminal

$ vue init <template_name> <directory_name>

For the <Template_name>,  you can find the list of templates at https://github.com/vuejs-templates

In our case, let’s use webpack-simple template

$ vue init webpack-simple learning-vue-cli

After initializing & configuring, run npm install to get all the dependencies

$ npm install

Start the server for the development environment

$ npm run dev

Utilizing Bulma.io

Install bulma in your project by typing the following command in your terminal

$ npm install bulma –save

Installing Webpack Loaders

There are a variety of webpack loaders to use in your project.

Let’s just pull in the most basic sass-loader

$ npm install sass-loader –save-dev

Introduction to Single file components

Global components works very well in small to medium-sized projects. But when it comes to scale-ability and re-usability, single file components comes into play with a .vue extension.

Sub-elements

Every vue single file component consists of the following three sub-elements inside to enhance productivity of your application

-Template

-Script

-Style

Create new vue components - DIY
 

Make a new file namely foobar.vue, and get any of the component template from bulma.io. Leave us a comment on the result & let us know if you get stuck at any point.

Props & slots inside vue templates

With VueJS in place, we have multiple options to make our content dynamic.

- Passing data with props

A prop is a custom attribute for passing information from parent components.

Props can be used inside template as:

<h1>{{title}}</h1>

Now In our script

//exporting it down to our main build

Export default {

Props : [‘title’]

}

- Content distribution with slots

When using components, it is often desired to compose them like this:

<app>

<app-header></app-header>

<app-sidebar></app-sidebar>

<app-footer></app-sidebar>

</app>

Things to note here are:

The <app> component will likely to have its own template and same goes for its child components.

Simple Event Binding

We need to make the delete button work as it supposed to do.

With vanilla JavaSript or Jquery, you’ll have to write couple of lines to make it work but with Vue JS, its simple enough.

In our script

Data() 
{

Return 
  {

Showing: true

  }

}

Whereas in the markup,

<button @click=”showing=false”>

Finally

Now in our main.js

Import ‘bulma’

Import Foobar from ‘./foobar.vue’

Vue.component(‘foobar, Foobar)

Now inside of your project’s markup. You can use

<foobar></foobar>

Questions, Improvements & Feedback

If you’ve any questions, leave us a comment below. We’re open for your suggestions and feedback as well. You can ask us on Twitter aswell.