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

Then install webpack-merge module as developer dependency from npm:

npm install webpack-merge --save-dev

Vue 2.5 introduced new typings and new recommended import model for code using ES-style imports (import Vue from “vue”). That’s why we need to tell webpack how to find our vue.js file and how resolve it correctly using ES style. Open gulpfile.js and put

const merge = require('webpack-merge');

after line const build = require(‘@microsoft/sp-build-web’);

Before build.initialize(gulp); insert below lines:

build.configureWebpack.setConfig({
    additionalConfiguration: function (config) {
        var vueConfig = {
            resolve: {
                alias: {
                    'vue$': 'vue/dist/vue.esm.js'
                }
            }
        };

        return merge(config, vueConfig);
    }
});

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

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