Vue js Single File Components. Vue CLI. And example of how to build reusable components

Build on Vue
  1. script
  2. style
  1. begin the job without wasting time on configuring tools
  2. add different plugins
  3. and also create visual interface and manage it from admin panel and much more…
npm install -g @vue/cli//or yarnyarn global add @vue/cli
vue --version
vue create vue-app
Vue CLI v3.5.1
? Please pick a preset:
❯ default (babel, eslint)
Manually select features
  1. build — compress and build for production
  2. lint — analyze dangerous scripts and coding style
App running at:
- Local:   http://localhost:8080/
- Network: http://192.168.1.188:8080/
import Vue from 'vue'
import App from './App.vue'new Vue({
   render: h => h(App),
}).$mount('#app')
<template>

</template>

<script>
export default {
    name: "NewsHolder"
}
</script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
//news/index.js

import Vue from 'vue'
import NewsHolder from './NewsHolder';

Vue.component('news-holder', NewsHolder);
Vue.component('links-holder', require('./LinksHolder').default);
Vue.component('adds-holder', require('./AddsHolder').default);
  1. You can directly require component — Vue.component(registration_name, component_paht); (we must add .default after requiring component because of change showed in this link -https://github.com/vuejs/vue-loader/releases/tag/v13.0.0)
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false;//if no js file name occurs then it will look for index.js.
require('./components/news');

new Vue({
  render: h => h(App),
}).$mount('#app');
<div class="row">
   <div class="col-6">
       <my-button :click-function="showDate" b-class="btn-danger btn-sm" b-text="show year"></my-button>

   </div>
   <div class="col-6">
       <button type="button" class="btn btn-outline-primary btn-sm float-right" v-on:click="readNews(index + 1)">Read</button>
   </div>
</div>
showDate(){
    alert('Year is: ' + (new Date()).getFullYear())
}
//html changes in MyButton.vue
<button class="btn" :class="bClass" @click="clickFunction" :disabled="isDisabled">{{ bText }}</button>//props adding
isDisabled: {
    type: Boolean,
    default: false
}
<my-button :click-function="tourEnded" b-class="btn-success btn-sm ml-3" b-text="end tour" :is-disabled="!isTourEnded"></my-button>//and data
data() {
    return {
        isTourEnded : false
    }
}

What’s Next Level?

In this article I have showed that how effective it can be to use components and divide code into multiple logical parts. But Vue’s power is not all about these. While development process if you want to create Single Page Application (SPA) you will use Vue router. Then if emitting events and passing props through deep components will make you angry and you will look for a way to do more structured data organization. Here Vuex will come to help you which is state management library for Vue js. Later you will need to do form validation in front end section then you will use veevalidate library. And also if you need to do some complex operation like date picking you will use already created vue2-datepicker component in your site. Lastly if you want to create some logic that will be repeated major parts of your site then you will create reusable components for this purpose. As a result, you will be able to accomplish the development process in a more intuitive, evolving and self-contained form of each piece. So I advise you to learn Vue framework, its other products, and use its superior features to perform fast and efficient development process.

  1. Vuex state management — https://vuex.vuejs.org/guide/
  2. Vue routing — https://router.vuejs.org/
  3. Windows git bash installation — https://gitforwindows.org/
  4. Vue design — https://vuematerial.io/
  5. Ready project in this article — https://github.com/Abdulla1995/vue-news-page
  6. Get 50$ free credit on DigitalOcean with this link — https://m.do.co/c/7435f673bf2a

Vue.js Developers

Helping web professionals up their skill and knowledge of Vue.js

Abdulla Emchiyev

Written by

Learn, develop and impress others on what you do…

Vue.js Developers

Helping web professionals up their skill and knowledge of Vue.js