Understanding Vue-cli & Single Vue Components

Last Updated at : September 3, 2017 By - Usama Muneer | 1904

    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.

     

    blog user
    Usama Muneer

    A web enthusiastic, self-motivated & detail-oriented professional Full-Stack Web Developer from Karachi, Pakistan with experience in developing applications using JavaScript, WordPress & Laravel specifically. Loves to write on different web technologies with an equally useful skill to make some sense out of it.

    Related Posts

    In this article, we'll go through the process of adding up the Event Listener on a simple button and compare the methods form both Vanilla JavaScript & Vue JS.