TypeScript template?

[italomaia]

Any chance for an official typescript template?

[pendar747]

I've also got a vue typescript starter (seed) project based on quasar: https://github.com/pendar747/quasar-typescript-starter It has support for single file components and vue-class-component.

[luxueyan]

There is no official vue-cli template! why closed it.

[LinusBorg]

I don't know what you are talking about, this issue is open, it was never closed.

[fdeitelhoff]

@luxueyan Other issues (referenced) are closed. Not this one. :)

This issue is vital and fit.

[igogrek]

While there's no official template yet - you can use this PR https://github.com/vuejs-templates/webpack/pull/797 easily, just run:

vue init vuejs-templates/webpack#pull/797/head project-name

[misoguy]

If there is a plan on making an official typescript template, I'd be glad to contribute 😄

[ThePlastic]

When the template will be released, if I understand correctly, we will no longer have to use vue-class-components to take advantage of typescript's typing system. Is that correct?

[LinusBorg]

No, that's not correct. We already released new types with Vue 2.5.0 that make vue-class-component pretty much unnecessary.

A template for typescript will not change anything about that in a good or bad way, it will only make it easier to start b providing the necessry boilerplate code for a project.

See also:

• https://vuejs.org/v2/guide/typescript.html
• https://medium.com/the-vue-point/upcoming-typescript-changes-in-vue-2-5-e9bd7e2ecf08

[ThePlastic]

Thanks a lot, I had already read the post on medium.com but I missed the update of the guide's typescript page after Vue 2.5.0 release.

Anyway I can't wait to use this template :)

[prograhammer]

@LinusBorg How do you feel about requiring developers to use the extension .vue.ts for Vue SFCs in TypeScript projects (and the future TypeScript template)? It doesn't interfere with Vue-loader (just update the glob pattern) or Vetur (just update association in settings.json "files.associations": { "*.vue.ts": "vue" }). This helps with a whole slew of challenges. Thoughts?

[LinusBorg]

How do you feel about requiring developers to use the extension .vue.ts for Vue SFCs in TypeScript projects

I'm not sure how to enforce that, and ...

This helps with a whole slew of challenges.

I'm not aware of those challenges, so I'm not really sure what to think, to be honest.

[prograhammer]

@LinusBorg Nevermind now I finally got .vue files working in the TypeScript compiler. For example, you can see I've got linting working in all .vue files at the typechecker level in my extension for VSCode: TSLint Vue. Now I'm focused on a loader for Webpack.

[trekze]

prograhammer. Not sure if it's helpful but I posted a fully working starter kit earlier in this thread, that does webpack, typescript within .vue files, vuex, vuerouter, etc.

https://github.com/hmexx/vue_typescript_starter_kit

[Jacknq]

its sad that takes ages to bring official ts template when comunity is already using it

[LinusBorg]

Well, the community is already using it, that's great. Someone already seems to maintain it, that's great. That's what open source is about, rifht? I applaud the people investing their time, like we do ours.

I'm thankful that people stepped up to fill a void we lately weren't able to fill with our limited resources.

But "sad"? Sorry you feel that way, but I don't think we owe you anything.

Please don't waste your time complaining about stuff like this and do something valuable with it instead.

Thank you.

[Jacknq]

I have several repositories with typescript so as few guys here, i think it would be superb so that you guys select someone who is willing and able to maintain it and put it in cli. So that there is official support and anyone could see - hey those vuers they have bunch of most recent languages and templates prepared, the community is great, with great support. Creating something that everybody is happy about. Thank you that you keep us motivated.

[omidkrad]

Here's my suggestion. I think instead of creating a separate webpack-typescript template it's better to add typescript support to the existing webpack template and have the CLI tool to optionally include it. TypeScript can totally replace Babel, but they can also co-exist if that makes things easier for maintaining the template. If possible, externalize all parts of the build scripts that add TS support in a separate file. It only needs to allow .ts files in addition to .js files and allow lang="ts" in .vue files (use js by default). If anyone doesn't want to use TypeScript they simply write in JS (in config.json set allowJs: true). This I think gives us the best of both words and addresses needs of both sides. So if you agree, please make pull requests to vuejs-templates/webpack.

[Toilal]

I maintain a webpack template fork adding TypeScript and vue-class-component here, provided by some additional options to the official webpack template.

Having typescript as an option in the official webpack template is definitively the way to go, and would not require that much work. It's possible to use the metalsmith option in meta.js to rename all *.js files to *.ts when typescript option is choosen to avoid duplicating files only to add types.

[omidkrad]

Hi @Toilal, this is great, but that change is still too big for a merge. I'm not a VueJS moderator, but I think you can do few things if you want it to be considered as pull request:

• Make sure you are rebased on the latest from the original webpack template.
• The changes that come in PL should be exclusively for adding TS, so remove any improvements that are not directly related (even converting functions to lambdas or changing var to const, etc). If you want you can send them as separate PL.
• To keep the diffs minimal, I would only use .ts for the entry point which is main.ts and leave everything else as .js. Maybe can use .ts for other files in later PLs.
• If TS support can be externalized into a separate build file, that would help a lot in maintaining the template.

For now I think the important thing is to get the most minimal TS support accepted into the official webpack template, and we can make it better from there.

[Toilal]

For everybody who needs a TypeScript or a Library template, you should try again https://github.com/Toilal/vue-webpack-template. It's merged with current develop branch of webpack template, and now brings 3 new questions on top of it:

1) Project Type : App/Library. (When you choose Library, sources are splitted in 2 folders, src for the library and app for the demo/docs app. 2) Which language do you want to use? TypeScript (ts-loader + babel)/ES2015 (babel) 3) Use Class-Style Components (vue-class-component + vue-property-decorators)? Y/N

The template currently use dummy Single File Components with src attributes poiting to external html/css/ts/js files because TSLint doesn't support checking vue files, but I consider adding an option to really use Single File Components like in the official webpack template. For now, It's still possible to manually copy/paste the html/css/ts/js files into vue files.

For people who tested this fork months ago, It's now really closer to the official webpack template (it use vue-loader).

[AccessViolator]

if it's possible to get rid of babel when using typescript, that would be a "cleaner" implementation

[Toilal]

@AccessViolator I'm not sure it's a so good idea.

Babel is great at providing polyfills and other features, so in many case it's better to make TypeScript target es6, and still use babel on TypeScript output to ensure older browser compatibility.

[Skwai]

Babel is great at providing polyfills and other features, so in many case it's better to make TypeScript target es6, and still use babel on TypeScript output to ensure older browser compatibility.

Couldn't you just target ES5 in tsconfig and import babel-polyfill into main.js if you use ES6 features and want to support older browsers?

Maybe I'm oversimplifying things, but I've setup a few of my own typescript projects and ended up ditching babel transpilation as I saw no need to keep it assuming all your code is typescript.

[Skwai]

I also feel that whatever implementation is merged should (probably) use the vue-property-decorator library and scaffold the hello world example using decorators and class syntax as a good boilerplate for the project to start with.

[dbettin]

@Skwai Do you know if this is easy to add after installing this template?

Could I just install vue-property-decorator and start using it?

[Skwai]

@dbettin Worked for me as far as I can remember. Also installed vuex-class

[ericop]

@yyx990803 is having a TypeScript Template out of scope for the foreseeable future of Vue, or is there something cool about to drop from Vue CLI that will be an official solution for this?

Tons of use were enthralled after your 2.5 update blog, but when it came time to build a project we realized the great comfort of having the cli (and a template) to guide us along the way.

[Jacknq]

Thank you to the team and integrating typescript template in vue cli v3!

[yyx990803]

@ericop it's already supported in 3.0.

[ericop]

@yyx990803 Awesome, thanks!

[ThePlastic]

I tried v 3.0 and it gives you a lot of usefull option (first of all you can choose typescript and css preprocessors). Does this eliminate the need to use webpack? And if not, when this template will be available on webpack??

[rigor789]

@ThePlastic 3.0 is built around webpack, but it is abstracted away to keep it simple for the end-user. But you can configure it if you need to.

[ThePlastic]

@rigor789 That's the definition of cool

[teslor]

How to setup a project using typescript template in vue-cli 3.0? I see there is cli-plugin-typescript but how to use it to init a new project?

[can-cc]

@teslor vue create foo and select the "Manually select features"

[bromne]

Is there any way to change configuration corresponding to config/index.js in v2 (for example assetsSubDirectory) at a project created by v3?

[kronok]

@rigor789 It's abstracted away, but how would we customize the webpack configuration if we needed to?

[rigor789]

@kronok it's all written in the docs here: https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md 👍