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.
