0 comment

New extension to SPFx for VueJS: PnP/SPFx generator v1.2.0

I firmly believe that the Yeoman generator provided by Microsoft is a great tool. It serves all the capabilities to create new web parts, extensions and customisations in the future. With the current support of ReactJS, Knockout and bare-bone HTML version, you have three great possibilities.

This PnP/SPFx generator project goes beyond these possibilities and supports enhanced functionalities. A way to add additional capabilities in the future not even for new frameworks and libraries on the market. It also helps organisations to defined their development standards.

Some of these libraries are under the Pattern and Practices umbrella (pnpjs, reusable controls, reusable property pane). If you decided to use them in all your projects, you could configure them manually, or you can create a new project that already includes these capabilities.

The PnP/SPFx generator comes into play. It does NOT replace the SPFx yeoman generators aka @microsoft/SharePoint in enhances your experience and capabilities. The Microsoft SPFx generator “Yo @microsoft/generator” is the boilerplate where you and we are cooking on.

The new release v1.2.0

The current release of ‘yo @pnp/spfx’ includes the following frameworks and tools.

VueJS – New in this release
VueJS is a framework, like ReactJS, that allowed you to write user interfaces. While in ReactJS forces you to write everything in JavaScript/Typescript. This framework allows the separation of concerns. You can write everything in a single file that has defined sections such as,<template> for the HTML markup of your component and at least a <script>block for the logic of the control. Besides a <style>block can contain the style definition too.

Their website also has a comparison with other frameworks in more detail.


Handlebars provide the power necessary to let you build semantic templates effectively with no frustration and can provide even complex templates to represent your data from SharePoint.

Knockout, ReactJS, No Framework

These options call the latest version of the ‘yo @microsoft/SharePoint’ generator. Unlike the other options, they rely on the Microsoft released generator and do not replace it.

All generators include the following libraries: * jQuery* pnpjs– The SharePoint Patterns and Practices Reusable Client-side Libraries * sp-dev-fx-property-controls– Reusable SPFx property pane controls * ReactJSsp-dev-fx-controls-react– Reusable React controls for SPFx solutions. Like the name suggests this option is only valid in ReactJS projects.

Convinced and give it a try you can install this new release with:

npm install @pnp/generator-spfx

If you like to contribute, you find the project on Github or check out our documentation.

This project is not a replacement for the Microsoft generator it is an extension to the generator.