[Vuejs]-How to access Option API's data,computed property and methods in Composition API & vice versa in Vuejs?

by

5👍

✅

Composition API to Option API in Same Component

As @tauzN answered you can return anything from setup in Composition API and use in Options API. See @tauzN’s answer for code example

Option API to Composition API in Same Component

As Vue js official doc suggest,

Note that the setup() hook of Composition API is called before any Options API hooks, even beforeCreate(). link

So we can’t access data,computed property or methods from Composition API to Option API.

👤nur_riyad

2👍

You can return anything from setup in Composition API and use in Options API. Playground

<script>
import { ref } from 'vue'
export default {
  setup() {
    const compositionRef = ref("Composition")
    return {
      compositionRef
    }
  },
  data () {
    return {
      optionsRef: "Options"
    }
  },
  computed: {
    inOptionsFromComposition () {
      return this.compositionRef
    }
  }
}
</script>

<template>
  <h1>{{ compositionRef }}</h1>
  <h1>{{ optionsRef }}</h1>
  <h1>{{ inOptionsFromComposition }}</h1>
</template>
👤tauzN

Leave a comment