How to use options API along with Composition API in vue3?

Question

vue3 + vite2

Very simple code as below.
Expect: when click on button, change reactive msg variable.
it works expectly when development(vite), after build production(vite build) and deploy, it seem cannot work, click method cannot access reactive msg variable.
From vuejs document, options API can work along with composition API.

<template>
  <h1>{{ msg }}</h1>
  <button @click="click">Click</button>
</template>

<script setup>
  const msg = ref('hello')      
</script>

<script>
  import { ref } from 'vue'
  export default {   
    methods: {
      click() {
        this.msg = 'ok'     
      },
    },
  }
</script>

Nikola Pavicevic · Accepted Answer · 2023-05-04 18:16:08Z

10

You can combine options and composition api if you return values, methods from setup function:

const { ref } = Vue
const app = Vue.createApp({
  setup() {
    const msg = ref('hello')
    const changeMsg = () => {
      return 'again'
    }
    return { msg, changeMsg }
  },
  data() {
    return {
      otherMsg: this.changeMsg()
    }
  },
  methods: {
    click() {
      this.msg = 'ok'     
    },
  },
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <h1>{{ msg }}</h1>
  <h1>{{ otherMsg }}</h1>
  <button @click="click">Click</button>
</div>

edited May 4, 2023 at 18:16

answered Mar 30, 2022 at 6:57

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

connexo Over a year ago

So basically whatever the setup function returns acts like what we used to return in data() in Vue 2.x?

AndreKR Over a year ago

@connexo Not just data() you also have to return methods from setup() or use <script setup> in Single File Components.

mga Over a year ago

how can you call click() from the setup section?

Nikola Pavicevic Over a year ago

@mga hey mate, You can not , it is one way road, so You can only use data function properties, computed , methods from options api, not other way around

Collectives™ on Stack Overflow

How to use options API along with Composition API in vue3?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related