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.

SharePoint