Vue

Bootstrap 4 beta Starter Template for Vue.js

This is an HTML5 Bootstrap 4 Beta template with Bootstrap CDN links with SRI. Great start for developing Vue.js applications.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  </head>
  <body>
    <div id="app"></div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
  </body>
</html>

Progress bar with Vue.js

This example shows how to create a simple progress bar with a little Vue.js and Foundation CSS help.
Create a simple HTML template and attach minimized Foundation CSS file.

<!DOCTYPE html>
<html>
<head>
    <title>Progress Bar</title>
    <script src="https://npmcdn.com/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="foundation.min.css">
    <link rel="stylesheet" href="app.css">
</head>
<body>
<div id="app">
    <section class="row">
        <div class="small-12 columns">
            <div class="progressbar">
                <div class="progressbar text-center"
		  style="background-color: green; margin: 0; color: white;"
		  :style="{width: progress + '%'}">
		  {{ progress }} %
                </div>
            </div>
        </div>
    </section>
    <section class="row">
        <div class="small-12 columns text-center">
            <button id="attack" @click="increase">Increase</button>
            <button id="attack" @click="decrease">Decrease</button>
	</div>
    </section>   
</div>
<script src="app.js"></script>
</body>
</html>

Add custom CSS styles:

/* app.css */
.text-center {
    text-align: center;
}

.progressbar {
    width: 80%;
    height: 40px;
    background-color: #eee;
    margin: 1em auto;
    transition: width 500ms;
}

button {
    font-size: 20px;
    background-color: #eee;
    padding: 12px;
    box-shadow: 0 1px 1px black;
    margin: 10px;
}

Add some Vue.js code to provide business logic for the progress bar:

/* app.js */
new Vue({
  el: '#app',
  data: {
	progress: 50,
  },
  methods: {
	increase: function() {
	  if (this.progress < 100) {
	    this.progress += 1;
	  }
	},
	decrease: function() {
	  if (this.progress > 0) {	
	    this.progress -= 1;
	  }
	}	
  }
});