SharePoint 2013

Vuetify Expansion Panel in SharePoint

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:

<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<link rel="stylesheet" href=",300,400,500,700,900|Material+Icons" />
<link rel="stylesheet" href="" />
<div id="app">
<v-app id="inspire">
<v-expansion-panel inset focusable>
<v-expansion-panel-content lazy
v-for="(item,i) in expansion"
<template v-slot:header>
<script type="text/javascript" src="/sites/demos/mdemos/webpart/expansion/expansionPanel.js"></script>
view raw expansion.html hosted with ❤ by GitHub
new Vue({
data: {
expansion: []
created: function(){
methods: {
getListData: function(){
var endPointUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbyTitle('expansion list')/items";
var vm = this;
vm.expansion =;
console.log("Always executes")
view raw expansion.js hosted with ❤ by GitHub

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.