Line up with the 'official' vue-js webpack template

[paulvanbladel]

Hi Matt,

I'm working on lining up your webpack ts template with the official webpack vue based template. Obviously, before thinking about a new template it's first important to have just a ts sample working :) That's why I am now in this repo.

So, I started first with this repo and then bringing in the webpack template stuff. I could get things working with typescript templates but failed on css, tests and asset loading. Then, I did the opposite, so started with a fresh webpack vue template and introduced ts . Same result: typescript works, but fail on css, tests and asset loading. I think we best continue on this last sample (which is not compatible of course with the structure of what is in this repo). So, could you maybe create a separate branch on which I can check in my first version? Maybe call it webpack-ts. Cheers paul.

[ducksoupdev]

Hi Paul, sure thing, will create a branch for you and let you know when done.

I am also working on significant changes to the template. The biggest of which is implementing mocha instead of jasmine as mocha supports async/await and it's Istanbul integration is better. I am coupling it with chai and will also add integration tests. I have also split the webpack config into base, dev, test, coverage and prod but I am not working on aligning with the official templates so it shouldn't overlap with what you're doing.

We are beginning a new project at work with Vue and some of these changes are a direct result of this.

[paulvanbladel]

Cool. Well so far only ts works in my sample, but it really resembles the 'standard' template. Probably too much :) When tweaking these webpack and other config files, it always reminds me that i never wrote a c compiler, because I didn't study for that. The web world is a strange world :)

[paulvanbladel]

btw, you probably know that the standard template has already mocha/chai on board

[ducksoupdev]

Yes the web is a strange world! I did know that the official template used mocha/chai so it will be good to align with that (although the main reason for the change was alignment of the test framework with that of the koa back end!)

[ducksoupdev]

I have created a branch named align-official-template based on the current master branch. I have also created a branch named feature-mocha that is based on the changes I have made to enable mocha unit tests and splitting the webpack config files. You may want to make your changes in the feature-mocha branch?

[paulvanbladel]

Matt, Do you know http://quasar-framework.org ? paul.

[ducksoupdev]

I've not seen it before but it looks good. Do you use it currently?

[paulvanbladel]

Not yet, but I like the fact that is really cross platform (phone, tablet, desktop). Check also this sample: https://github.com/quasarframework/quasar-play I have very poor graphical design/css skills, so for me it offers tremendous added value. It is in a way very complementary with your template because quasar lacks support for typescript and testing. Quasar has its own CLI and has basic support for "add new my-feature'. So, in short: quasar + ducksoup = nirvana :)

[paulvanbladel]

Regarding the official vue webpack template. To be honest, your setup is much lighter/leaner, I do not really understand why the official template needs a full blown expressJs webserver and why webback-dev-server is not sufficient.

[ducksoupdev]

I am using the template for a project at work and have now added the proxy for the dev server. Unless you have already done it, I can commit those changes in?

[paulvanbladel]

Sure, I'm not seeing how I could further add value currently. But I keep on my thinking caps :) cheers.

[paulvanbladel]

Just saw this: https://blog.kloud.com.au/2017/03/22/dependency-injection-in-vuejs-app-with-typescript/ quite interesting: using inversify.

[paulvanbladel]

Matt, My 2 cents for the vue typescript story. I started from the official template and introduced ts but without giving up the .vue files. So, I still have scoped Css and really a minimal amount of changes in the build setup stuff. See : https://github.com/paulvanbladel/vue-webpack-ts-simple Tests work as well, but I'm still surprised by a subtle difference when testing a component with or without a separate .ts file. (see the Hello and Bonjour tests)

[ducksoupdev]

Thanks Paul, it looks good. Are you planning on not using the .vue files and implementing it as pure Typescript and separate HTML?

Not sure if you use VSCode but I have created a small extension that provides snippets for Vue and Typescript - https://marketplace.visualstudio.com/items?itemName=ducksoupdev.Vue2

[paulvanbladel]

Wow, that extension is really great. Nice timesaver ! Thanks.

Well, i'm not sure about staying with .vue. Obviously, i would be happier if vuejs was designed upfront without these .vue files, but since we have them now, and a lot of goodness is built on top of it, well, I'm always afraid that in the end something will go wrong if I deviate from how things are initially designed, but that can be completely due to the my webpack ignorance. So far I see one big advantage of the .vue files and that is the scoped css. Another benefit is that you can mix one-page component and components with a 'backing' ts file. So, for really simple components with few processing, one-page component is fine and keeps the overall project structure lighter. With respect to the html part, I don't see any harm when the html stays in the .vue file (the vscode tooling like format is still working)

But I would be happy to hear your 'view' (excuse moi le mot) on this.

In case you plan to use quasar, I created also a typescript sample for quasar framework: https://github.com/paulvanbladel/quasar-ts.