How I married Vuetify with Typescript

I love working with VueJS. And because I’m a poor designer I use component libraries to stay as far away as possible from CSS. One I like to work with is Vuetify, a material design component library for Vue.

https://vuetifyjs.com/en/

A few months ago I redesigned component for our corporate app and used the combo VueJS/Vuetify to get a maintainable, sleek and functional result. I tried to use Typescript alongside, for the type safety and smart completion in VS code, without any success. I searched google and found gists and hacks to get Vuetify and Typescript to work together. I gave up and went with javascript to not lose time.

Fast forward to now, I naively tried to get both working together by following the install instructions (weird, right ?) … and it worked! Maybe I just learned how to read, or maybe something changed. All in all, here is how I married Vuetify and Typescript.

You will need nodeJS and npm installed (I used the 10.13.0 LTS version)

Install the latest Vue CLI globally:

npm install -g @vue/cli@latest

And use it to create you Vuetify+Typescript project:

vue create just_married

You’ll be asked if you want to use the default preset or if you want to manually select features. Choose to select manually features :

Then make sure to chose Typescript, you can add the Vuex store and Vue router too if you want.

Then I chose not to use class type components because it is said to be better supported : https://medium.com/haiiro-io/why-i-use-vue-class-component-472579a266b4

Use babel polyfills ? Sure :)

If you chose the Vue router you’ll be asked if you want to use the history mode in the router. The history mode allows to click the back and forward arrows of you browser and get to the previous/next page. If you say yes, you just have to make sure that you server returns the index.html on 404 errors, so that roots unknown to the back-end get a chance to being matched by the front-end router.

Then we’ll choose the TS linter :

Then I chose to lint on save, and to save the babel, lint, and other configs in separate files.

Then just let the CLI create your project.

Now get into your project directory because its time to add Vuetify to the mix (https://vuetifyjs.com/en/getting-started/quick-start#existing-applications) !

cd just_married
npm install vuetify --save

Go in src/main.ts and paste the following content right after the imports

import Vuetify from ‘vuetify’;
import ‘vuetify/dist/vuetify.min.css’;
Vue.use(Vuetify);

Vuetify should now be usable, let’s test this by adding a button and a dropdown. In src/components/HelloWorld.vue change the template to:

<template>
  <v-app>
    <v-content>
      <v-menu offset-y>
        <v-btn
          slot="activator"
          color="primary"
          dark
        >
          Dropdown
        </v-btn>
        <v-list>
          <v-list-tile>
            <v-list-tile-title>Choice 1</v-list-tile-title>
          </v-list-tile>
          <v-list-tile>
            <v-list-tile-title>Choice 1</v-list-tile-title>
          </v-list-tile>
        </v-list>
      </v-menu>
      
      <v-btn color="secondary">Click me!</v-btn>
    </v-content>
  </v-app>
</template>

And tadaa ! You get this, with a sweet sweet taste of Typescript!

screenshot of the modified Helloworld.vue component

And because you stuck with me until the end, I have a small treat for you. Next to your package.json create a vue.config.js (project configuration file for the Vue CLI) and paste the following code inside :

module.exports = {
  configureWebpack: {
    devServer: {
      open:true
    },
  }
}

From now on, when you start the dev server with npm run-script serve or yarn serve webpack will open your favourite browser to the right page.