This comment has been minimized.

Looks great, but wasn't able to run due to the same problem as in this thread #717.
Had to use node ..\@vue\cli\bin\vue create test-app, but yarn serve still gives me:'vue-cli-service' is not recognized as an internal or external command

Minor note for the code:App.vue has import like this import HelloWorld from './components/HelloWorld.vue';
But Home.vue has import HelloWorld from '@/components/HelloWorld.vue';
Which is inconsistent.
Also note that I couldn't tweak any of my IDE (WebStorm/VSCode) to properly understand @ alias.
There are some ways to ignore this as error, but it doesn't seem to work with refactorings (which is why I don't personally use it at all and still prefer longer ../../paths even for large projects).

This comment has been minimized.

I gotta say this is the first time I use Vue with TS (been using TS with Angular for a while). I read this guide and the official TS guide so most of what I'm about to say might be just my lack of experience.

I set up the project and everything is working. I still need to fully understand the way this plugin system is gonna work. It wasn't complicated to set up everything but I would have expected a tslint/tsconfig file out of the box and the addition of "@vue/cli-plugin-typescript": "3.0.0-alpha.1", to package.json. I guess I must be missing something (some command maybe to tell the project I wanna use TS).

Regarding TS itself, I understand Vue converts properties inside the data object into getters/setters so this might be kind of complicated to acomplish without modifying internal things but I would expect something like this to throw:

I mean, I'm typing data() but that's just for the initial rendering. Inside the created hook I'm assigning a number to a previously typed data property and it will work. Is there a workaround for that?

BTW, as I always say, awesome work.

This comment has been minimized.

@zeratulmdq
Good point, but until typings are improved for such cases the only good way to proceed is to use vue-class-component (there's an option already).
This way you can declare msg and people as class properties and error will be thrown.

This comment has been minimized.

edited

This is a really good base and seems really simpler to bring a custom feature into vue-cli.

Main difference from stable version is that no webpack configuration file is generated. I see two drawbacks for this choice :

It may break some editors features.

For example, IntellijIDEA can parse webpack configuration like webpack aliases. So in IntelliJ IDEA with default template (no typescript), when I write import HelloWorld from '@/components/HelloWorld.vue', it shows a warning and the module is not resolved in the editor (=> no completion, no navigation, etc ...). With TypeScript option, it works because it relies on tsconfig.jsoncompilerOptions.paths.

It may be hard for a end-user that is not involved in vue-cli project to add an additional webpack plugin/loader.

This comment has been minimized.

edited

@yyx990803 Will writing plugins that use webpack-chain the main way to tweak webpack config?
Since changes made to node_modules/vue-cli-service/webpack.config.js will be lost after reinstall deps...right?

Other than that, PWA + TS seems a pretty solid setup for me. Will use it for a toy project to see how it goes and give more feedback.

This comment has been minimized.

edited

I just gave a try to the new generator (alpha 7) with all options checked (including TypeScript). It runs smoothly and is zero-conf for opening the generated project in IntelliJ.

Class component option could be available without TypeScript too.

When disabling TypeScript, I have to configure the webpack configuration file in IntelliJ (node_modules/@vue/cli-service/webpack.config.js) for @ import alias to be recognized, but then all is OK. I think custom configuration placed in vue.config.js won't be available to IntelliJ.

Maybe the mutated webpack configuration could be written to a file so the effective final configuration can be loaded by tools/editors ?

This comment has been minimized.

edited

Looks awesome!

Would it be possible to have a choice between TSLint and ESLint, even when in TypeScript mode?

I much much prefer working with ESLint even on my TypeScript Vue projects (better VSCode support, eslint-plugin-vue doesn't have a TS equivalent, etc.). Tried it both ways and I've found life to just be a lot easier with ESLint at the moment.

It's a relatively straightforward integration - it means instead of adding tslint and tslint.json, keeping eslint as normal and adding the typescript-eslint-parser and eslint-plugin-typescript npm deps, then taking eslintOptions.js from cli-plugin-eslint and changing a few options:

This comment has been minimized.

TSLint currently doesn't support .vue files. It's unlikely that this feature will be added anytime soon as it requires a major rewrite. In addition the project seems to be abandoned by its owners. That's why I'm no longer working on it.

IIRC ESLint with typescript-eslint-parser has problems to provide correct type information because every file is checked in isolation.

edited

This comment has been minimized.

@prograhammer AFAIK, no. With the current setup, type checking is performed by fork-ts-checker-webpack-plugin in a separate thread, and we don't even enable type checker depending rules when using TSLint.

This comment has been minimized.

Ah, ok. Now I'm wondering why you wouldn't enable tslint in fork-ts-checker-webpack-plugin, but it looks like you need the ability to tslint fix files or run tslint separately from fork-ts-checker-webpack-plugin?

This comment has been minimized.

edited

@yyx990803fork-ts-checker-webpack-plugin can pass the program over (the program will read .vue files in a way that line/column positions are preserved) to tslint. You just enable the tslint flag in fork-ts-checker-webpack-plugin. What repo is generating the webpack config in this new Vue Cli setup?

This comment has been minimized.

@DanielRosenwasser currently TSLint is handled inside the TypeScript plugin itself and we are just using tslint:recommended. We don't really have a TSLint config at the moment. Maybe put it as a custom rule in a rulesDirectory for now?

This comment has been minimized.

I've just tried the typescript template and everything works perfect so far, except for one thing... How do I use typescript in the service worker file? I use this setting in the vue.config.js file to include the worker: