Adding TypeScript Support to Quasar

Ryan Edge
Ryan Edge
Feb 5, 2017 · 4 min read

After spending 2 years with Polymer and another with Angular 2, I have recently started rediscovered my love for Vue.js.

Quasar is a very nice Ionic-like mobile framework for Vue, and since Angular 2 brainwashed me into using TypeScript, I decided to go thru the process of integrating it into a Quasar app. Here’s 11 simple steps to adding TypeScript support.

Step 1: Create app

Assuming that you’ve installed it, we are just going to follow the steps using Quasar CLI.

Step 2: Install TypeScript dependencies

We need a few dependencies to build our TypeScript project.

npm install --save-dev ts-loader typescript @types/node

We will also need the Vue.js class decorators for TypeScript/ES2015.

npm install --save vue-class-component

Step 3: Add your tsconfig.json file

Step 4: Update webpack.base.conf.js

The major thing that we’ve done here is swapped out the babel loader for the typescript one and adding ts to the extensions. Everything else can stay the same.

Step 5: Add a sfc.d.ts file to your src folder

This should look familiar to anyone who has seen Vue’s TypeScript example, but we have a couple additions. The first declare is so that the TypeScript compiler won’t barf when we load *.vue modules in our *.ts modules. The second declare is to make up for the lack of Quasar type declarations. The last declare statement is a global constant Quasar uses to assign your theme. It is injected at build time in the webpack config.

Step 6: Rename *.js modules to *.ts

Simple enough, we just rename all of the JavaScript files in our src directory as TypeScript files.

Step 7: Fix Vue Imports & Modules

Becomes

Also it’s important to note that we will do the same for all of our Quasar import statements.

Step 8: Update Vue components to use class decorator

Replace the script in Index.vue with the following

Also, replace the script in Error404.vue

The big difference here is we now use classes that are wrapped with the component decorator. This is very similar to Angular 2’s syntax. You can read more about why we do this here.

Step 9: Replace System loader in router.ts

I prefer to directly import my components but you can also use require here.

Step 10: Update main.ts

Step 11: Cleanup & Build Awesome!

That’s everything. We should now be able to run quasar dev to start our server, and we now have the tooling support of TypeScript. Any dependencies that we no longer need can be safely removed. Happy programming!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store