Vue App with TypeScript + SystemJS

[kvigor]

I wanted to know what changes need to be made to my tsconfig and systemjs config if I'm using TypeScript + SystemJS and NOT "webpack + es2015 module loader"? As of now Vue is resolving for me with the below changes
import Vue from "../jspm_packages/npm/[email protected]/types/vue";
but it does resolve if I do
import { Vue } from "../jspm_packages/npm/[email protected]/types/vue"; I do not understand the nuance of when and when not to use the curly braces and why.

[alpham8]

@kvigor Do you have a working Vue + SystemJS + TypeScript setup? I would love to see it.
The curly braces in import statements are only for if you want to pick the parts that you want to import. If you want just all, it's also fine without curly braces.

[kvigor]

No. I was forced to use aspnetcore-Vue-starter which uses webpack. SystemJS had a package that worked with typescript but was abandoned hence our delima.

[alpham8]

After a lot more research, I found an helpful article. I am really thankful to this guy: https://westerndevs.com/javascript/How-to-Compile-TypeScript-into-a-Single-File-with-SystemJS-Modules-with-Gulp/
And his exmaple project repo here: https://github.com/davidwesst/ts-systemjs

I was able to change this to grunt with ease. That now totally integrates in my grunt work flow, really nice!

Only question left: Why I can import Vue in a class like this guy did, but not at top level without any wrapping class? There are no errors, but Vue doesn't get parsed, although it is in bundle.js