Vue JS

// #1 Installation
//Install vue-2-boilerplate and run : https://github.com/petervmeijgaard/vue-2-boilerplate
npm i && npm run dev 

//To run development
npm run dev

// To build files after editing (dist)
npm run build

//If you use gulp to build, you may tweak the package.json, npm run build to combined gulp
 "scripts": {
    "dev": "node build/dev-server.js",
    "start": "npm run dev",
    "build": "gulp css && node build/build.js",


// #2 Import SCSS 
To import scss from app.vue; Add the following code into bottom part of app.vue 
<style lang="scss">
  @import "./css/main.scss";
</style>

// #3 Using Bootstrap
//Do not use all bootstrap materials i.e .js since were using virtual DOM of vue. 

//Method 1: Manual
//Download bootstrap CDN at https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

// Save bootstrap into scss/vendor/bootstrap/bootstrap.min.css

// in main.scss
//vendor
@import "../../node_modules/fotorama/fotorama";
@import "../../node_modules/vue-nav-tabs/dist/vue-tabs.min";
@import "vendor/bootstrap/bootstrap.min.css";

//Method 2: NPM package
//npm i bootstrap@3
//import bootstrap from node_modules into main.js (global registration area)
import 'bootstrap/dist/css/bootstrap.min.css'; 


// # Devtools
//Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools	


//https://vuejs-tips.github.io/cheatsheet/
<template>
 .....
 <alert>A book was created !!!</alert>
 
 //Create book form
 <form> .... </form>
 </template>

<script>
 import Alert from './Alert.vue';

export default{
    components:{
         'alert':Alert
    }
}
</script>

//Add subcomponent into component
export default {
  name: 'app',
  components: {
      Header,
      Footer,
    },
    data() {
      return {};
    }
}
1. Install gulp in directory : npm i gulp
2. Setup and configure gulp in your project directory.
3. Gulpfile.js - edit the build directory to static/ since its native path in Vue.

// folders
  folder = {
    src: 'src/',
    build: 'static/'
  }

4. Gulpfile.js - Edit the source of .scss path 
return gulp.src(folder.src + 'scss/main.scss')

5. App.vue - Remove the following style tags from src/App.vue (if you did so)
<style lang="scss">
  @import 'scss/main.scss';
</style>

6. Main.js - Remove load class from src/main.js ( if you did so)

7. Index.html - Add the class to <head> in your index.html 
<link rel="stylesheet" type="text/css" href="/static/css/main.css">

8. src/main.scss node_modules dependencies - gulp css task
Do not import the src with .vue method e.g @import "~vue-nav-tabs/themes/vue-tabs";
Instead use full path e.g @import "../../node_modules/vue-nav-tabs/dist/vue-tabs.min";

9. gulp css in shell, follow by npm run dev to view the changes.

10. Done.
|- src/
  |- router/ 
  |- scss/
  |- App.vue 
  |- main.js
      Vue.component('modal', {
        template: '#modal-template'
      })
  |- components/
    |- MainPanel.vue (show only trigger button)
       <template>
          <button class="btn btn-primary btn-block" id="show-modal" @click="showModal = true">Buy</button>
          <modal v-if="showModal" @close="showModal = false">
            <h3 slot="header">Header of modal</h3>
          </modal> 
       </template>

        <script>
        import Modal from './Modal.vue';

        export default {
            components: {
              Modal
          },

          data () {
            return {
              showModal: false
            }
          }
        }
        </script>
    |- Modal.vue (the modal component)
        <template>
          <div id="modal-template">
            <transition name="modal">
              <div class="modal-mask">
                <div class="modal-wrapper">
                  <div class="modal-container">

                    <div class="modal-header">
                      <slot name="header">
                        default header
                      </slot>
                    </div>

                    <div class="modal-body">
                      <slot name="body">
                        default body
                      </slot>
                    </div>

                    <div class="modal-footer">
                      <slot name="footer">
                        default footer
                        <button class="modal-default-button" @click="$emit('close')">
                          OK
                        </button>
                      </slot>
                    </div>
                  </div>
                </div>
              </div>
            </transition>
            
          </div>
        </template>

    <script>
    export default {

      data () {
        return {
        }
      }
    }
    </script>
      
|- dist/
  |- index.html
  |- static/
    |- css/
    |- fonts/
    |- images/
    |- js/

|- static/ (for gulp)
      |- css/
      |- fonts/
      |- images/
|- gulpfile.js
|- node_modules/
|- package.json

########################################################
//show more/less

//use type="html" to remove any HTML characters
<truncate clamp="+ Show more" :length="200" less=" - Show Less" :text="propertyData['property-detail']" type="html"></truncate>

<script>
import truncate from "vue-truncate-collapsed";

export default {
  components: {
    truncate: truncate
  }
 };
</script>

########################################################
//toggle 

<div class="col-md-12 border-bottom-1">
  <span class="value-lg">- RM25,620</span>
  <span v-on:click="toggleContent = !toggleContent" class="label">Costs</span>
  <div v-show="toggleContent"  class="content">cost expand goes here!!!!</div>
</div>

<script>
export default {
  data () {
    return {
      toggleContent: false,
      imgSrc: "https://lazacode.org/images/logo.jpg"
    }
  },
}
</script>


########################################################
//mobile menu expand

<div class="left">
  <div id="mobile-nav-toggle" 
    @click="isShow = !isShow">
  </div>

  <transition name="slide-fade">
    <div v-if="isShow" class="mobile-menu-wrapper">
      <span class="close" @click="isShow = !isShow"></span>
      <nav>
         <ul class="mobile-menu">
            <li><a href="/properties">Properties</a></li>
            <li class=""><a href="/invest">Auto-invest</a></li>
            <li class=""><a href="/how-it-works">How it Works</a></li>
            <li class=""><a href="/about-us">About Us</a></li>
         </ul>
      </nav>
    </div>
  </transition>

</div>

<script>

export default {
  name: 'hello',
  data () {
    return {
      showMobileMenu: false,
      isShow: false,
      inputTest: "",
      imgSrc: "http://gantry-1927.kxcdn.com/user/pages/02.blog/gantry-logo-competition/grav-logo.png",
    }
  } 
}

</script>


CategoryItemJSHTML
Event HandlingUse the binding and listeners to listen to DOM events.new Vue({
el: '#app',
data() {
return {
counter: 0
}
},
methods: {
increment() {
this.counter++;
}
}
});

{{ counter }}



Template Syntax
A Vue.js introduction for people who know just enough jQuery to get by
React.js Introduction For People Who Know Just Enough jQuery To Get By
Vue.js vs jQuery: Use Cases and Comparison with Examples