Using Vuejs in SharePoint
In the past few weeks, I have been fascinated with how easy VUE.js is to learn and to use. Not only is it easy to use but it easily integrates with SharePoint. For those of you not familiar with VUEJS, it is a JavaScript framework that makes development much fun and efficient. Out of all the frameworks (angular, react, etc), I found vuejs to be straightforward without the complexities of a lot of frameworks.
In this blog post, I will show you how to do something very simple, which is to render SharePoint list data onto a page using VUEJS. But first, lets understand the foundation of how VUEJS works. First, you must have a reference to the vue library in your page, like so
To start, we will create an instance of VUE. “Every Vue application starts by creating a new Vue instance with the Vue function.” For us to link data to our view, we must add properties to our data object. The data property will contain the data that will be displayed in our html, in this case message. There are many types of properties we can add to our vue instance such as “method”, “created”, but we will go over that later and probably in future blog posts. Here’s an example of creating an instance of VUE.
Here’s a link to JSBIN with the code above https://jsbin.com/safapen/edit?html,output
Change the message in the data property of the Vue instance and watch how reactive the HTML is.
Now that we have that out of the way. How do we get this to work in SharePoint?
I have a list called ‘siteAdmins’ with 4 columns (‘Email‘, ‘First Name‘, ‘Last Name‘, and ‘Phone‘).
Here’s the html code with explanation of what’s happening
In the code above, the following line loops through the ‘user’ array and builds the rows to our table as it populates the cells with data from our list.
We use the ‘v-for‘ directive to achieve the looping.
Here’s the js code with my VUE instance with some detail.
In the image above, I have a generateData function that’s not really doing anything. I kept it in there just to show that you can have any number of functions within the data method that you can call upon. Here’s the results showing the rendered data from my list and the effects of v-for and v-if directive.
Rendering the data in an html table is just an option. You could have also used DIV’s.
Here’s the jsbin that shows the same code but the data is coming from https://jsonplaceholder.typicode.com. This site is a “REST service that you can use whenever you need some fake data.” Here’s the fake data.
In a future blog post, I will show how to create a dataTable that’s much prettier and has functionality.
Great post. I began test VueJS use in sharepoint.
It would be fantastic learn more about it.
Use vue instead of xslt changes in forms, views, spservices…etc
Thanks Dani!
Thank you so much it works perfectly!
But do you know how to retrieve data from a column which is a “checkboxes (allow multiple selections)” type?
When I try it I have a string like below :
{ “__metadata”: { “type”: “Collection(Edm.String)” }, “results”: [ “duties”, “classification” ] }
I would like to have “duties classification” instead.
Cheers!
Hi Luc,
If you are using vue to loop through the array of objects you retrieved from your list in html, you still use the dot notation and since the ‘results’ is an array, you can use the array join() or toString() methods to convert it to a string. For example,
{{ array.ColumnName.results.join() or {{ array.ColumnName.results.toString()
Hope that makes sense and I’m glad you like my post. If you are really into using VUEjs and SharePoint, check out my YouTube channel on the same topic. https://www.youtube.com/playlist?list=PLANUU-2z408evvNJ-aegpFuUXRVR1fxMq
In the coming weeks, I will be showing how to use Vuetify and Vuelidate with SharePoint.
Great Presentation @ the VBBeach SPS.
Could you share the code from your demo?
Hi Ben, I’m glad you attended and you enjoyed it. I have provided the location of the github repo containing the files from the session.
BTW, I was able to get my Region cascade to work, my cascade function was outside the methods property. Still having issues with the search box. It appears when I select a region but the search feature is not working.
Thank you for your help. I look forward to creating cool stuff with Vue.
You’re welcome!