How to use Vue Composition API using TypeScript - Part 3

#vue #typescript

As we saw in the previous part we settled our contract(interface) and builded a service to fetch our data, is this final part we are going to consume the service and display the information using the Composition API, let's begin!

Preparing Vue to use Composition API

In main.ts we need to add few lines to Vue to use the new API, for that just simple add these lines:

import Vue from 'vue'
import App from './App.vue'
import VueCompositionApi from '@vue/composition-api' // <-- Make the import

Vue.config.productionTip = false

Vue.use(VueCompositionApi) // <-- Tell Vue to use it

new Vue({
  render: h => h(App)
}).$mount('#app')

After that we are ready to use the API.

Making the display component

Now go to App.vue and tell the script section to use TypeScript adding lang="ts", import createComponent and ref from @vue/composition-api and our interface and service:

<script lang="ts">
  import { createComponent, ref } from '@vue/composition-api'
  import Character from './interfaces/Character'
  import CharacterService from './services/CharacterService'
  ...

With createComponent we are enabling TypeScript in the new API, and ref as out reactive manager, of course we can use reactive but I feel using ref makes the code cleaner.

To make use of the API we need to declare and use the createComponent we extracted from the API and establish the export default with the createComponent to make use of TypeScript. After that we can now use the setup method to prepare and fetch out data from the service, so we can now do this:

export default createComponent({
  setup () {
    const characterService = new CharacterService()
    const characters = ref<Character[]>([])

    const fetchData = async (): Promise<void> => {
      characters.value = await characterService.FetchCharacters()
    }
    fetchData()
    return {
      characters
    }
  }
})

As we can see to make a ref as a type just add <TypeHere> and your variable will be set as the desired type, make an async/await function to fetch our data, call it before the return and with this we can retrieve any information we need from an API, you can go to your Vue DevTool and check yourself we gathered the data.

As you can see, using the new API with TypeScript is pretty simple, some new advantages with the Composition API is we can have cleaner and modular code, adding TyepScript will gain the typing superpower. I am excited to use Vue 3 with all this advantages.

Before we finish I want to make and apologise for making a 3 Part post, I did it just to avoid the TL:DR type post, I hope this can be useful to you. Thanks for reading and see the next time making Vue apps ✌