Vue.js Framework

Vue.js Framework option allows to create a property pane control using Vue.jsframework.

New control is added to /src/propertyFields/<componentName> folder. Next files are added to the folder:

• IPropertyField<ComponentName>.ts - contains interfaces for the properties used in the control. Add you custom properties here.
• PropertyField<ComponentName>.ts- contains entry point class with render method and helper function to add the control to the property pane. Use this file to call rendering of your Vue.js component.
• IPropertyField<ComponentName>Host.ts - contains props interface for the Vue.js component.
• PropertyField<ComponentName>Host.vue - contains template, styles (scss) and code (TypeScript) of the Vue.js component. Use this file to add custom markup, modify component's logic or styles.

Additionally, the generator with "Vue.js" option selected does next things:

• Checks if needed Vue dependencies are installed and installs them if not.
• Modifies gulpfile to correctly process .vue files.
• Creates "shims" file to let TypeScript compiler know about .vue files.