Vue 3 y Composition API con TypeScript basado en clases

En este tutorial vamos a ver lo sencillo que es crear un sencillo listado utilizando Vue 3 y Composition API con TypeScript, pero en este caso utilizando clases en lugar de objetos como hacemos normalmente con Vue. Instalar Axios con VueUse Lo primero que necesitamos hacer es instalar las dependencias que vamos a utilizar, en este caso utilizaremos Axios a través de VueUse.

npm i axios @vueuse/integrations --save

Consumir API JSONPlaceholder con Vue 3

Ahora vamos a crear un sencillo archivo con una función que sea capaz de consumir un endpoint de la API de JSONPlaceholder.

import { useAxios } from "@vueuse/integrations";

export async function fetchTodos() {
    const { data, finished } = await useAxios('https://jsonplaceholder.typicode.com/todos')
    console.log(finished)
    return data
}

Crear Composable con Vue 3 para gestionar Todos

Una vez tenemos una función que se encarga de obtener los datos de la API, vamos a crear un composable para poder interactuar más adelante desde nuestra clase.

import { reactive } from 'vue';
import { fetchTodos } from '@/api/todos';

interface Todo {
    id: number;
    userId: number;
    title: string;
    completed: boolean;
}

interface State {
    list: Todo[];
}

export function useTodos() {
    const state: State = reactive({
        list: [],
    });

    const fetch = () => {
        state.list = fetchTodos();
    }

    return {
        state,
        fetch,
    };
}

Crear componente TypeScript para listar los Todos

Para finalizar el ejemplo, vamos a crear un componente con Vue 3 y TypeScript utilizando clases.

import {Options, setup, Vue,} from 'vue-class-component';
import Template from './template.vue';
import {useTodos} from '@/use/useTodos';

@Options({
    mixins: [Template]
})
export default class TodoList extends Vue {
    api = setup(() => useTodos())

    async mounted() {
        await this.api.fetch();
    }
}

No olvides crear la template para renderizar los Todos, si tienes dudas revisa esta entrada.

<template>
  <h1>Todo List Vue 3 Composition API & TypeScript</h1>
  <div class="h-100 w-full flex items-center justify-center bg-teal-lightest font-sans">
    <div class="bg-white rounded shadow p-6 m-4 w-full lg:w-3/4 lg:max-w-lg">
      <div>
        <div class="flex mb-4 items-center" v-for="todo in api.state.list" :key="todo.id">
          <p class="w-full text-grey-darkest">{{ todo.title }}</p>
        </div>
      </div>
    </div>
  </div>
</template>