Using Vue.js in SharePoint Framework Applications. Part III: Yeoman Generator with Vue Support

UPDATE: the generator has been included into @pnp/spfx generator. Please use this one for the latest version.

This is the third post about SharePoint Framework and Vue.js. In this post I want to announce a Yeoman generator for SPFx web part with Vue.js support.

List of posts:
  1. Whats and Whys
  2. Default SPFx web part using Vue.js
  3. Yeoman generator with Vue support (this post)
  4. Web Part Property Pane Control
  5. Use React Components inside Vue.js Solution
So, in the previous post we went through all the needed configurations to add Vue.js support to SharePoint Framework project and to implement simple web part using Vue Single File Component.
And not it feels natural that it would be great to have automatic way of creating SPFx projects with Vue.js support.
That's why I've created a Yeoman generator that does all the stuff automatically.
The generator in called vuespfx and available as NPM package.
To use it just install the package to your machine:
npm i -g generator-vuespfx
And then use it in the same way as @microsoft/generator-sharepoint:
yo vuespfx
This will
  • create SPFx solution with a client-side web part,
  • add all needed dependencies for Vue.js,
  • create Vue.js Single File Component (SFC) with default web part markup
  • add SFC component to the web part's code
Currently the generator supports web parts only. But I'll update it to add Extensions support as well.
If you want to contribute, feel free. Go to https://github.com/AJIXuMuK/generator-vuespfx fork it and create pull requests.
Please, leave your feedback regarding the generator!

That's it!
Have fun and stay tuned!


  1. Great job, thank you very much for this.

  2. Support for Extentions would be nice.

  3. This is wonderful. Thanks for your work! One thing I noticed was that Vue development tool extension unfortunately does not recognize the code is written in Vue. So I can not use the debug extension (I am using @pnp/spfx)

    1. Thanks for the comment! What do you mean under Vue dev tool and code written in Vue?
      Code (the actual logic) is still written in TypeScript. Vue is just an "engine"...

  4. Ah, yes. What I meant was when I hit F12 inside Chrome browser, I did not See Vue extension tab in this setup.

    1. The project is loading minified version of Vue.js. So the dev tools are not enabled.
      And node environment is "production".

      So, you can try to play with it to make the dev tools work and add a PR to the repo! It would be great!