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") | |
| }) | |
| } | |
| } | |
| }) |
