JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">
<div id='app'>
<ul>
<li v-for='item in menu' :key='item.id'>
<i :class=item.icon></i>
{{item.name}}
</li>
</ul>
</div>
CSS
li{
list-style-type: none;
}
JavaScript
fnew Vue({
el: '#app',
data: {
menu: [
{
id: 1,
name: 'menu 1',
icon: 'fab fa-500px',
},
{
id: 2,
name: 'menu 2',
icon: 'fab fa-accusoft'
},
{
id: 3,
name: 'menu 3',
icon: 'fab fa-affiliatetheme'
}
]
}
})