Is it possible to define lifecycle methods in Vue 3 while using the <script setup> syntax?

Question

I have defined a SFC similar to the one below

<script setup>
const msg = 'Hello World!'
const props = defineProps({....})
.....
function onMounted() {
    console.log('the component is now mounted')
}
</script>

<template>
    <p>{{ msg }}</p>
</template>

The onMounted function is not executing at all.

I wasn't able to find anything in the Vue documentation. Is it even possible to declare lifecycle hooks like this?

v3.vuejs.org/api/composition-api.html#lifecycle-hooks

Michal Levý
– Michal Levý

2021-10-18 12:51:20 +00:00
Commented Oct 18, 2021 at 12:51 — Michal Levý
– Michal Levý, Commented Oct 18, 2021 at 12:51

Thomas · Accepted Answer · 2021-10-18 12:51:49Z

23

SFC with the setup script is using the CompositionAPI, so you also have to define the livecycle hooks the same way:

import { onMounted } from 'vue'
onMounted(() => {
    console.log('mounted!')
})

https://v3.vuejs.org/api/composition-api.html#lifecycle-hooks

answered Oct 18, 2021 at 12:51

Thomas

7,2905 gold badges37 silver badges79 bronze badges

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

Collectives™ on Stack Overflow

Is it possible to define lifecycle methods in Vue 3 while using the <script setup> syntax?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related