loading...

How to use Vue Composition API using TypeScript - Part 3

manuelojeda profile image Manuel Ojeda ・2 min read

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.

Alt Text

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 ✌

Posted on by:

manuelojeda profile

Manuel Ojeda

@manuelojeda

Web Full Stack Dev. I love JavaScript and defender of TypeScript. Advocadte of Vue, and learner of React. PHP is my backend lord and Laravel his son.

Discussion

markdown guide
 

Great and simply digestible article, keep it up!