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

vue

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
blogVue1

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.
blogVue2

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.

vueBlog3

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.

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s