spfx-vue-sfc-one-file
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 .ts
and .css
(.scss
or whatever) files when building SPFx web parts with Vue, like demonstrated here
Minimal path to awesome:
- Clone the repo
npm i
gulp serve
Issues
- 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-fetch
into 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
typescript
task is disabled and replaced with webpack'sts-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
.vue
files - intellisense, real time type checking, etc.
Brief overview of changes
- Almost all changes are about
gulpfile.js
and build pipeline. - TS code, html template, styles are in
.vue
file. tsconfig.json
- add "include
" option to explicitly provide source folder (otherwiseduplicate identifier
,cannot redeclare variable
, etc. errors)gulpfile.js
:- disable
typescript
task -build.typescript.enabled = false;
- in bundle name replace
.js
with.ts
-config.entry['to-do.bundle'] = config.entry['to-do.bundle'].replace('ToDoWebPart.js', 'ToDoWebPart.ts');
- add extensions to resolve option:
extensions: ['', '.ts', '.js']
- configure
ts-loader
andvue-loader
- update copy static assets task to include
.ts
as well as other files:['vue', 'scss', 'ts', 'js']
- disable
- Some values in
gulpfile.js
hardcoded and code can be improved