Updated to latest version of vue.js and converted to use @Component and @Props, etc.

[jdiehl]

Thanks for this great starter project.

In this pull request, I updated the project to work with an unmodified version of Vue by converting it to use @Component from vue-class-component and @Prop from vue-property-decorator. I also did some modifiationcs to make better use of Visual Studio Code's build-in compiler functions.

[jdiehl]

I didn't know, you could do that... That's awesome! Fixed.

[DanielRosenwasser]

Hey there, I think the goal we had with this starter (while it is a work-in-progress) is that we are trying to stick with plain-old Vue.

While I personally think decorators can be awesome, and appreciate the flexibility that Vue has in how you can use it, the way I've come to think about this is that a TypeScript Vue project shouldn't look drastically different from a canonical JavaScript Vue project. We actually put a lot of work into TypeScript 2.3 to accurately type libraries like Vue, Ember, and others so that decorators wouldn't have to be the way TypeScript users write Vue.

That said, I would love to hear your thoughts. I'm sure a lot of people aren't hung up on how they write Vue as long as they can write Vue.

[peterblazejewicz]

@jdiehl Do you mind updating README.md as well as part of this PR? It depicts the very use-case why custom build is used Thanks!

[sylvainpolletvillard]

@DanielRosenwasser One could argue that using .vue single file components is already different from a canonical JavaScript Vue project. But vue-loader and vue-class-component are both maintained by the core team and you can find them on the official vuejs.org docs.

In particular, Class-Style Vue Components with vue-class-component are on the official website under the TypeScript support section, so I think it is pretty clear that Vue encourages TypeScript users to use this style.

Note also the advantages about type inference that are explained in the docs.

[jdiehl]

@DanielRosenwasser I appreciate your efforts in keeping TypeScript projects as similar as possible to plain vanilla Vue projects and I am sure that this will help many experienced Vue programmers. However, I believe starter projects like this also have the opportunity (and maybe the responsibility) to teach programmers new and easier ways of building apps. Whether the @Component-approach falls under that category is not my decision to make.

[jdiehl]

@peterblazejewicz I'll be happy to work on the Readme but I think we should resolve the issue raised by Daniel first.

[octref]

Don't underestimate the cost of migration to decorators. One of the major factor in TS's popularity is its low migration cost. Just rename .js to .ts and you get better type check, IntelliSense, etc.

Now it's possible to do that migration by just changing <script> to <script lang="ts"> and wrapping the export object in Vue.extend. That's much better than rewriting your whole app with decorators.

Also, the updated type definition can also be used to enhance the editor support for existing Vue projects with js, and the only thing people have to do is to update their vue dependency.

I suggest that you to fork this project or create your own starter template for TypeScript + Vue.

[DanielRosenwasser]

@DanielRosenwasser One could argue that using .vue single file components is already different from a canonical JavaScript Vue project.

Well that's why I show an ordinary component and then showed a .vue file. I think it's fair to say that at this point, .vue files are pretty common at this point.

In fact, you can see there's a relatively small gap between vue and vue-loader npm downloads (a smaller margin than vuex and vue-router!). While that is not necessarily the most in-depth analysis, it gives a decent picture.

For what it's worth, I think that having a section about using classes with decorators in Vue would be really useful as well. We might talk about why one might use them over the current approach since there are caveats to the declaration files we've authored when members circularly reference each other.

[jdiehl]

I have updated the readme and fixed several consistency issues. If you do not want to merge this pull request, I would be happy to host it on my fork and would appreciate a link from your readme.

[cr0cK]

What's about the status of this PR?

It'd be great if this project could be updated with the latest changes of vue 2.5.

[jdiehl]

This pull request is about decorators. I noticed that the example has significantly changed from the time I created the pull request, so I updated my changes to reflect the current project. I also added the decorators example as an optional part, so everyone can choose how they want to work with Vue and Typescript.

[jdiehl]

@DanielRosenwasser: Thanks for the feedback. I hope the changes address all of your issues.

[DanielRosenwasser]

@jdiehl there seems to be a huge diff based on whitespace. I'm not sure if it's caused by a BOM, newlines, or something else.

Sorry to be a huge pain, but can you revert the whitespace changes and amend the commit?

[jdiehl]

@DanielRosenwasser Whatever happened there... It is fixed now.

I appreciate you double-checking everything - should have seen that one myself...

[DanielRosenwasser]

@jdiehl, I apologize; I meant to send out some changes that I guess got backed out on README.md as a PR, but accidentally committed directly to your branch. Let me know if the changes look good and I'll pull it in!

[jdiehl]

@DanielRosenwasser Looks good.

[DanielRosenwasser]

Thanks so much!!

[sylvainpolletvillard]

This is a huge DX improvement here, bravo !

[cr0cK]

Thank you guys!