Allow Typescript in Quasar-starter-kit

[paritosh149]

Background: I have been using Quasar-Cli to build PWAs and hybrid Mobile apps. Recently, Vue-cli update has been released as v3.0.0-beta.1. It has a new command, "vue create my-project" which allows manual selection of features . One feature that I particularly found interesting is usage of Typescript in .vue/SFCs.

Feature Request: Allow Typescript in Quasar-starter-kit.

[rstoenescu]

It's a matter of adding the right loaders to Webpack. This can be achieved through /quasar.conf.js > build > extendWebpack(cfg).

Need some help from people using Typescript with Webpack. If I know what to add to webpack then I can make this an option when spawning project. I request help because I've never used Typescript and want to make sure I get this right.

[laurentpayot]

For CoffeeScript I use the following. It should be the same for Typescript:

      extendWebpack (cfg) {
        cfg.resolve.extensions.push('.coffee')
        // first rule is for Vue single file components
        cfg.module.rules[0].options.loaders.coffee = ['babel-loader', 'coffee-loader']
        cfg.module.rules.push({
          test: /\.coffee$/,
          loaders: ['babel-loader', 'coffee-loader'],
          include: [__dirname + '/src']
        })
      }

There is a trick with Vuex because the presence of store/index.js is hardcoded in https://github.com/quasarframework/quasar-cli/blob/dev/lib/quasar-config.js so you can't use store/index.coffee or store/index.ts. A quick workaround is to use the following store/index.js:

import store from './index.coffee'
export default store

Same for Typescript I guess.

PS: I've never used Typescript. I think there is no need for babel in TS.

[rstoenescu]

"I guess." is unfortunately not enough. I need someone actually using Typescript and knowing it inside-out. There's typescript json config object, type definitions and other stuff that need to be added. What I need is very specific and complete info on this.

Can you open up a Github ticket for cofeescript pls? I also need to know what problems you get by using it. Then I can add full support for it on the new CLI. Thanks!

[laurentpayot]

https://github.com/quasarframework/quasar-cli/issues/66 for CoffeeScript support

[ralphchristianeclipse]

@rstoenescu in typescript there is a tsconfig.json file and a tslint.json file which does the compilation process too and the configs for typescript. what it does is just add static typings on the files. and strips it off in compile time. adding the ts-loader on webpack will make it work when bundling and compiling with webpack. i was thinking of the code being transpiled from ts to es6 and compile it to the quasar build output

[rstoenescu]

All,

Can someone generate a project with current 0.15 CLI (and choose "yes" to everything, including the store)? Then I'd need you to convert all .js files in the src to be .ts files instead. Last step is to share that with me. Also, I'd need a tsconfig.json and tslint.json files and whatever other files needed for TS.

I'll then add Typescript support out of the box. Thank you!

[paritosh149]

While trying to work on above task, webpack config js is required to proceed. But, I do not see build folder (that contained webpack config files), anymore while using Quasar-CLI v0.15.7. However, that folder is referenced in quasar-config.js line number 9. How to continue setting up ts-loader in webpack config?

[rstoenescu]

I only need those files .js files transpiled to .ts. Don't worry about webpack config. I will take care of it.

[rstoenescu]

Feel free to connect with me on Discord to speed this up.

[gregorybleiker]

@paritosh149 are you working on this? I'd have a stab at it otherwise. In principle all js files are also ts files, but it would be nicer not to have the allowjs switch on in the tsconfig... Also, @rstoenescu you'd have to get rid of babel and only use typescript. Is that your plan? I am currently trying to port my 0.14.9 project (with typescript) to 0.15

[JDrechsler]

Hi guys, I used the latest vue-cli 3 with TS and implemented quasar there. Maybe it will be helpful for others. This version does not have babel anymore and is using the new class component design. I am not sure if it is the best way to import quasar but it is working fine for me. https://github.com/JDrechsler/Quasar-with-TS-using-vue-cli-3.git

[paritosh149]

@gregorybleiker, I did my part and handed over the files to @rstoenescu . Awaiting his response.

[galenus]

@rstoenescu Hi, I've managed to mess with a project created from starter kit in a way that it now works with TS, at least in dev mode. I don't know if it's still relevant given other efforts here, but you are welcome to check it.

[nahuel]

Hi @paritosh149 , do you have a repo available somewhere with your TS changes?

[paritosh149]

Hi @nahuel , I have created the repo at https://github.com/paritosh149/quasar-ts. This was created as suggested by @rstoenescu. It needs further work to consider it a viable template.

[Robula]

With Babel@7 and the @babel/preset-typescript preset we can transpile TypeScript to regular JS using babel-loader. This would also allow us to pipe regular JS files through Babel (babel-loader) using the standard @babel/preset-env potentially avoiding the maintenance of two separate templates.

[highco]

I tried to use the two repos created by @nahuel and @paritosh149 but switching to these setups breaks hot reloading for me. Quite often, the app restarts after a trivial change to a component. Am I missing something?

[paritosh149]

@highco Can you share your app as github repo for me to look into?

[highco]

I tried the one @galenus posted: https://github.com/galenus/quasar-seed-with-typescript

When I make a small change (like changing the toolbar title in default.vue, for example), the app restarts. The same change would hot reload when using the default template.

[paritosh149]

@highco, check https://github.com/JDrechsler/Quasar-with-TS-using-vue-cli-3/issues/1

[Robula]

This is unrelated to the quasar-cli however you can use TypeScript and Quasar today by using the standard @vue/cli which has just reached RC phase.

@vue/cli looks to be a lot more flexible than quasar-cli at this stage, the biggest difference I can see is that Electron/Cordova support does not come out of the box (use vue-cli-plugin-cordova and vue-cli-plugin-electron-builder for those).

The most notable advantages to using @vue/cli is that you get unit testing out the box and you are free to choose what CSS preprocessors, linter and unit testing framework you want to use and you can mix TS/JS together in your project.

1. yarn global add @vue/cli to install the Vue CLI globaly
2. vue create my-app to scaffold your app
3. vue add quasar to add Quasar support
4. Add missing type definitions to shims-vue.d.ts declare module 'quasar' declare module 'quasar-framework/*'
5. yarn serve to start the dev server

[murbanowicz]

Did anyone make any progress on that? It would be great to use TS with Quasar and not loose all great features like Electron/Cordova support out of the box.

[paritosh149]

@Robula , the steps stated above worked fine (in Typescript) except linting errors (semicolon missing) sputtered by tslint for App.vue from quasar template. There a way to allow statements ending without semicolon. Add "semicolon": [true, "never"] to tslint.json.

[paritosh149]

@murbanowicz , features like Electron and Cordova are not available in vue-cli. However, they do come with quasar-cli, but I havn't tried quasar-cli after completing above steps.

[mesqueeb]

I would also love Quasar-cli with a typescript option out of the box!

@Robula I'd like to try native vue/cli, but I'm so integrated in the Quasar ecosystem, I'm really scared to step outside. (kinda like Apple products lol) So my questions for you:

1. With vue/cli after vue add quasar to add Quasar support, will this make it possible to use all quasar components etc?
2. Won't there be differences in folder structure etc.?
3. What about things like the Quasar plugins, will they be loaded correctly?
4. What about the quasar.conf file, will I have to add this manually?
5. What about the .quasar folder which is crucial for Quasar cli to compile? Does vue add quasar add this as well?

Best regards!

[nklayman]

Right now, vue cli plugin Quasar just configures the theming and loading of the Quasar components. Quasar plugins are not supported, there is no Quasar.conf, and no .quasar folder as there is no support for multi-platform build (all components work though). However, I am currently working on a rewrite of the plugin to support all these missing features (mainly multi-platform build). I'm pretty busy right now, so it might be a while till it is production ready. While your waiting, you can continue to use quasar CLI unless you don't need the missing features.

[mesqueeb]

@nklayman Thanks for your educated and detailed answer! I would want to start using vue/cli to be able to use TypeScript. I'm currently only building SPA's with Quasar, so I think I'd be safe to try out vue/cli instead. I'll let you know how it goes.

One final worry I have with vue/cli is when Quasar releases new versions, would the upgrade version in a vue/cli generated project be the same as a quasar-cli project?

[Robula]

@mesqueeb You're better off creating a vue/cli project from scratch first as opposed to porting an existing quasar-cli project.

In answer to your questions;

1. Absolutely, @paritosh149 has already done the hard work with vue-cli-plugin-quasar.
2. That depends on the options you choose in the vue/cli, but generally most Vue projects follow a similar structure.
3. A "Quasar plugin" is exactly the same as a Vue plugin. vue/cli supports downloading and installing Vue plugins into your code. (See https://cli.vuejs.org/guide/plugins-and-presets.html)
4. quasar.conf.js won't work with the vue/cli, instead you use vue.config.js. However you will find that you won't need much of the configuration that's defined in quasar.conf. (See https://cli.vuejs.org/config)
5. The .quasar folder is automatically generated by the quasar-cli so naturally this won't be present in a vue/cli project

Hope this helps!

[nklayman]

@Robula Quasar's App Plugins are actually quite different from Vue-CLI plugins. Quasar plugin are used to modify the app instance (and related modules such as the state/route). Vue CLI 3 plugins, however, don't modify the user's app at all (other than injecting code), instead providing behind-the-scenes functionality such as modifying webpack configurations, adding testing support, or allowing the user to build for a different target (such as Electron).

[snowyu]

I've write a simple guide: Add the typescript supports to quasar framework.

Note: This guide applies to the project created by quasar-cli.