Components
In Single File Components (SFC), script tags must specify the ts language:
<script lang="ts"> // use TypeScript here </script> Template
<template> <div> Name: {{ fullName }} Message: {{ message }} </div> </template> Script
Vue 2.7 (default since Nuxt 2.16.0) use: import { defineComponent, PropType } from 'vue' interface User { firstName: string lastName: string } export default defineComponent({ name: 'YourComponent', props: { user: { type: Object as PropType<User>, required: true } }, data () { return { message: 'This is a message' } }, computed: { fullName (): string { return `${this.user.firstName} ${this.user.lastName}` } } }) Vue 2.6 use: import Vue, { PropOptions } from 'vue' interface User { firstName: string lastName: string } export default Vue.extend({ name: 'YourComponent', props: { user: { type: Object, required: true } as PropOptions<User> }, data () { return { message: 'This is a message' } }, computed: { fullName (): string { return `${this.user.firstName} ${this.user.lastName}` } } }) Using @vue/composition-api plugin
Plugin installation
plugins/composition-api.js
import Vue from 'vue' import VueCompositionApi from '@vue/composition-api' Vue.use(VueCompositionApi) nuxt.config.js
export default { plugins: ['@/plugins/composition-api'] } This plugin registration is mandatory to make setup function works in components.
import { defineComponent, computed, ref } from '@vue/composition-api' interface User { firstName: string lastName: string } export default defineComponent({ props: { user: { type: Object as () => User, required: true } }, setup ({ user }) { const fullName = computed(() => `${user.firstName} ${user.lastName}`) const message = ref('This is a message') return { fullName, message } } }) Using vue-class-component through vue-property-decorator
import { Vue, Component, Prop } from 'vue-property-decorator' interface User { firstName: string lastName: string } @Component export default class YourComponent extends Vue { @Prop({ type: Object, required: true }) readonly user!: User message: string = 'This is a message' get fullName (): string { return `${this.user.firstName} ${this.user.lastName}` } }