JSFiddle - React, Tailwind, and code Playground

by Heber Almeida

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-side-bar"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div id="app">
  <vue-side-bar :menus="links"></vue-side-bar>
  <br v-for="i in 60" />
</div>

JavaScript

new Vue({
	el: '#app',
  data: {
  	links: [
    	{ title: 'Google Search', url: 'http://www.google.com', target: '_black', icon: 'fa fa-google-plus'},
      { title: 'Yahoo Search', url: 'http://www.yahoo.com', target: '_black', icon: 'fa fa-yahoo'},
      { title: 'Facebook', url: 'http://www.facebook.com', target: '_black', icon: 'fa fa-facebook'},
      { title: 'Flickr', url: 'http://www.flickr.com', target: '_black', icon: 'fa fa-flickr'}
    ]
  }
})