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?

tony19 · Accepted Answer · 2020-12-07 23:29:46Z

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, [email protected] 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 [email protected], setup() receives no arguments, including the context and props arguments from the setup() used in the Options API.

狼族小狈 · Accepted Answer · 2022-08-03 10:38:11Z

0

Use class to write setup, and support vue2 and vue3

<template>
    <p>{{ count.text }}</p>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { Setup, Hook } from 'vue-class-setup';

@Setup
class Count {
    public value = 0;
    public get text() {
        return String(this.value);
    }
    @Hook('mounted')
    public init() {
        this.value++;
    }
}

export default defineComponent({
    setup() {
        return {
            count: new Count()
        }
    }
})
</script>

https://github.com/fmfe/vue-class-setup

answered Aug 3, 2022 at 10:38

狼族小狈

1

Comments

troy · Accepted Answer · 2024-05-28 03:57:46Z

0

import ClassComponent from 'vue-class-component'
ClassComponent.registerHooks(['setup'])

Put this at the beginning of your project, then every thing will work as you expected

answered May 28, 2024 at 3:57

troy

4192 silver badges12 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Vue 2

Vue 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Vue 2

Vue 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related