Separar componente y template en Vue 3 y TypeScript

En esta entrada quiero compartir contigo la configuración que yo utilizo para separar componente y template en Vue 3 y TypeScript.

En el curso de Vue 2 y TypeScript ya vimos cómo trabajar con componente y template separados en diferentes archivos. En Vue 3 esto no ha cambiado, podemos seguir utilizando la misma configuración.

La idea es muy sencilla, si por ejemplo vamos a desarrollar un formulario para iniciar sesión, lo que haríamos sería crear un directorio Login dentro del directorio views, y dentro de este directorio, 2 archivos, component.ts y template.vue, veamos.

component.ts

import { Options, Vue } from 'vue-class-component';
import Template from "./template.vue"

@Options({
    mixins: [Template]
})
export default class Login extends Vue {

}

template.vue

<template>
  <h1>Login Form Template</h1>
</template>

Con esta sencilla configuración podemos utilizar archivos separados .ts y .vue para componente y template en Vue 3 y TypeScript.