How to use vue class component with composition api in Vue2 by typescript

Question

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { CustomerContext, getCustomerRepository } from '@/composables/customerRepository'

@Component
export default class CustomerList extends Vue {
  search = ''

  setup(): CustomerContext {
    const ctx = getCustomerRepository()
    return ctx
  }
}
</script>

In Vue 2, I want to use the Composition API with the class component style by TypeScript, but I'm not sure I have the correct syntax. Also, the setup() function did not get invoked automatically.

Can vue-class-component work with the Compostion API in TypeScript?

Answer 1

Vue 2

First, make sure you've installed the @vue/composition-api plugin for Vue 2:

// main.ts
import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'

Vue.use(VueCompositionApi)

Then define setup() as a @Component option (not as a class method):

// MyComponent.vue
@Component({
  setup(props, context) {
    //...
  }
})
export default class CustomerList extends Vue {
  //...
}

Vue 3

For Vue 3, vue-class-component@8.x exports a setup() API that you'd assign to a local variable:

<template>
  <div>counter: {{myContext.counter}}</div>
  <button @click="myContext.increment">Increment</button>
</template>

<script lang="ts">
import { Vue, setup } from 'vue-class-component'
import { ref } from 'vue'

export default class MyComponent extends Vue {
  myContext = setup(() => {
    const counter = ref(0)

    return {
      counter,
      increment() {
        counter.value++
      }
    }
  })
}
</script>

Note: As of vue-class-component@8.0.0-rc.1, setup() receives no arguments, including the context and props arguments from the setup() used in the Options API.