This sample demonstrates how to use SPFx web part with Vue.js and single file components without splitting code and styles between separate files. This approach uses common Vue "all-in-one" style.
This sample is more like POC and has some drawbacks\issues, which might be addressed in the future. For now I still think safer approach is using separate
.scss or whatever) files when building SPFx web parts with Vue, like demonstrated here
Minimal path to awesome:
- Clone the repo
- Latests version of Typescript doesn't work (2.2.2). This package use 2.2.0 which is working. The reason is that TS since 2.2.2 version included
whatwg-fetchinto the core definitions, SPFx from the other side uses
@types/whatwg-fetch, as a result multiple "duplicate identifier" errors. SPFx uses it's own version of TS (2.1.6 currently) and in general it's good to use the same version for you build. But, as said, 2.2.0 also works
- build approximately 2-2.5x times slower in comparison to "normal" approach. Difficult to use watchers
- many changes to build pipeline, SPFx's
typescripttask is disabled and replaced with webpack's
ts-loader. May be that's not so bad, but who knows..
- there are some issues with source maps - difficult to identify the right file with source code
- general issues with
.vuefiles - intellisense, real time type checking, etc.
Brief overview of changes
- Almost all changes are about
gulpfile.jsand build pipeline.
- TS code, html template, styles are in
tsconfig.json- add "
include" option to explicitly provide source folder (otherwise
cannot redeclare variable, etc. errors)
build.typescript.enabled = false;
- in bundle name replace
config.entry['to-do.bundle'] = config.entry['to-do.bundle'].replace('ToDoWebPart.js', 'ToDoWebPart.ts');
- add extensions to resolve option:
extensions: ['', '.ts', '.js']
- update copy static assets task to include
.tsas well as other files:
['vue', 'scss', 'ts', 'js']
- Some values in
gulpfile.jshardcoded and code can be improved