SharePoint Framework–building hello world client web part with Vue.js

What is Vue? One can say that’s just another js framework but that’s not true. Vue.js is a progressive framework for building user interfaces for web. Now days it’s not so popular as Angualr and React, but community growing extremely fast and some bloggers predict that Vue in 2017 will be as popular as Angular or even React. Main github repository has 42K stars on a moment of writing, for comparison angular 1 has 58K and angular 2 only 20K. For me Vue looks very very promising and it’s definitely good reason to take a look at this framework. In this post you will see how to create very basic client web part with Vue.js. Let’s get started.

Create new empty directory and run

yo @microsoft/sharepoint

In the end select “No Javascript Framework”.

When project scaffolding is ready, you need to update some parts of the configuration to make it work with Vue.

First of all, install vue from npm:

npm install vue --save

Open config/config.json and under “externals” add

"vue": "node_modules/vue/dist/vue.js"

By doing this you effectively load vue.js script on every page where your web part is running.

Open your web part .ts file and import in the top:

import * as Vue from 'vue';

Add new public variable inside your web part code:

public data: IHelloWorldWebPartProps;

Replace render method with one which uses Vue:

public render(): void {
    this.domElement.innerHTML = `
      <div id="app-${this.context.instanceId}">
        <h1>{{description}}</h1>
      </div>`;

    this.data = {
      description: this.properties.description,
    };

    new Vue({
      el: `#app-${this.context.instanceId}`,
      data: this.data
    });
  }

In the render method we are bootstrapping our web part with a new Vue instance. For target element we are selecting unique div holding web part’s id.

That’s it! Run

gulp serve

to see the result:

Source code you can find on github here - https://github.com/s-KaiNet/spfx-vue-hello-world 

In the next post I will show how to create more advanced web part with Vue using modern approaches and technics.