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.

SharePoint

9 Comments Leave a comment

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

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

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

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 )

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.

%d bloggers like this: