Please follow my prerequisite blog to add the jQuery dependency on the master page. The below jQuery code will work with jQuery dependency.

Download the files from the Github repository and make sure the Vue.js dependency is added to the Master Page. The master page sample uploaded don’t have the Vue.js reference so please add it to the master page.

Step 1:

Upload the VueSample.js and VueFile.htm to the siteassets/scripts folder.

Step 2:

Using the SliderList.stp create the List in the SharePoint site. In my case I created the List with the name BootstrapSlider.

Step 3:

Create the Page called VueJS Sample.aspx in the site. I create under the site ms so the URL will be https:///ms/SitePages/VueJs%20Sample.aspx

In the page add the content editor webpart and add the link to the /siteassets/scripts/vuefile.htm. The htm file have the necessary html content to load the data, vueSample.js file have the java script code to call the REST api from List.

Click on the Get Items to load the date from the List. The Get Items code call the REST api from the List and load the data in the bootstrap table format.

$(document).ready(function () {

  var app = new Vue({
    el: '#appvue2',
    data: {
      message: 'Click the button to see feedbacks',
      feedbackList: [],
      sliderContents: []
    },
    methods: {
      getSliders: function () {
        this.message = "Calling the slider function...";
        var endPointUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbyTitle('BootstrapSlider')/items";
        var headers = {
          "accept": "application/json;odata=verbose"
        };
        $.ajax({
          url: endPointUrl,
          type: "GET",
          headers: headers,
          success: data => this.sliderContents = data.d.results
        }); // jquery ajax
        this.message = "Success";
        console.log(this.sliderContents);
      } // getSliders end
    } // methods end
  }); // vue end
}); // doc ready end