I have had the pleasure of doing a lot with the VUE.js framework and I have created tons of videos on using Vue.js with SharePoint. I recently created a video on using Vuetify with SharePoint. Vuetify is a ‘Material Design Component Framework’ made for VUE. Check out the UI components. There are a plethora of components that can be leveraged and used in SharePoint. Here’s a video on using the ‘Expansion Panel‘ I created recently. Below is the code used in the video:
<head> | |
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script> | |
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> | |
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> | |
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script> | |
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" /> | |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" /> | |
</head> | |
<body> | |
<div id="app"> | |
<v-app id="inspire"> | |
<v-expansion-panel inset focusable> | |
<v-expansion-panel-content lazy | |
v-for="(item,i) in expansion" | |
:key="i" | |
> | |
<template v-slot:header> | |
<div>{{item.Title}}</div> | |
</template> | |
<v-card> | |
<v-card-text>{{item.Details}}</v-card-text> | |
</v-card> | |
</v-expansion-panel-content> | |
</v-expansion-panel> | |
</v-app> | |
</div> | |
<script type="text/javascript" src="/sites/demos/mdemos/webpart/expansion/expansionPanel.js"></script> |
new Vue({ | |
el:"#app", | |
data: { | |
expansion: [] | |
}, | |
created: function(){ | |
this.getListData(); | |
}, | |
methods: { | |
getListData: function(){ | |
var endPointUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbyTitle('expansion list')/items"; | |
var vm = this; | |
axios.get(endPointUrl).then(function(response){ | |
vm.expansion = response.data.value; | |
}) | |
.catch(function(error){ | |
console.log(error); | |
}) | |
.then(function(){ | |
console.log("Always executes") | |
}) | |
} | |
} | |
}) |