onMounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup().

[skique]

Version

2.7.2

Reproduction link

codesandbox.io

Steps to reproduce

package.json:

"vue": "^2.6.11",
"@vue/composition-api": "^1.4.4",

demo.tsx

import { defineComponent, onMounted } from "@vue/composition-api";

export default defineComponent({
    setup(){
        console.log('setup初始化')
        onMounted(()=> {
            console.log('进入了mounted')
        })
    },
    render() {
        return <div>test</div>
    }
})

What is expected?

it works

What is actually happening?

[Vue warn]: onMounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup().

---

after my project has builded，i got this errors

[skique]

solution：

lock the version of vue in package.json:

"vue": "2.6.11",
"vue-template-compiler": "2.6.11"

[posva]

You don't need composition api with Vue 2.7. See https://blog.vuejs.org/posts/vue-2-7-naruto.html

---

Please, next time consider using the forum, the Discord server or StackOverflow for questions first. But feel free to come back and open an issue if it turns out to be a bug 🙂

[mes-mojahed]

any solution??

[anthonypenna]

I get this warning too:

<script setup lang="ts">
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'

const breakpoints = useBreakpoints(breakpointsTailwind)
const lastBenefitIndex = computed(() => (breakpoints.greaterOrEqual('md').value ? 4 : 2))
</script>

[Vue warn]: onMounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement. 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

[jadonyan]

I get this warning too:

<script setup lang="ts">
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'

const breakpoints = useBreakpoints(breakpointsTailwind)
const lastBenefitIndex = computed(() => (breakpoints.greaterOrEqual('md').value ? 4 : 2))
</script>

[Vue warn]: onMounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement. 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

I get this warning with useWindowSize too, and I solved it by move useWindowSize to setup because Vue3's Composition API function should be used internally within the setup function.

1. import { useWindowSize } from '@vueuse/core'

export default {
setup() {
    const windowSize = useWindowSize();
    return { windowSize }
}

3. use this.windowSize.width.value in your methods/computed/...

[n4an]

I get this warning too:

<script setup lang="ts">
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'

const breakpoints = useBreakpoints(breakpointsTailwind)
const lastBenefitIndex = computed(() => (breakpoints.greaterOrEqual('md').value ? 4 : 2))
</script>

[Vue warn]: onMounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement. 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

The same shit when

<template>
<carousel
  :breakpoints="breakpoints" // itemsToShow can be used here, but I need to know items count for other purposes, and that count can't be extracted by ref from carousel options
  :items-to-show="itemsToShow"
  :mouse-drag="false"
  :touch-drag="false"
  ref="Carousel"
/>
</template>

<script lang="ts" setup>
  const itemsToShow = computed(() => breakpoints.smaller('lg') ? 1 : 3);
</script>

[Justineo]

Please make sure you don't have multiple vue module included in your project. (Run npm ls vue to check for this)

[n4an]

npm ls vue

I use Nuxt

├─┬ @hebilicious/authjs-nuxt@0.2.0-beta.5
│ └─┬ vue@3.3.4 overridden
│   └─┬ @vue/server-renderer@3.3.4
│     └── vue@3.3.4 deduped
├─┬ @nuxtjs/i18n@8.0.0-rc.2
│ ├─┬ @intlify/unplugin-vue-i18n@0.12.2
│ │ └─┬ vue-i18n@9.2.2
│ │   └── vue@3.3.4 deduped
│ ├─┬ vue-i18n-routing@0.13.1
│ │ ├─┬ @intlify/vue-router-bridge@0.8.0
│ │ │ └─┬ vue-demi@0.13.11
│ │ │   └── vue@3.3.4 deduped
│ │ ├─┬ vue-demi@0.13.11
│ │ │ └── vue@3.3.4 deduped
│ │ └── vue@3.3.4 deduped
│ └─┬ vue-i18n@9.3.0-beta.24
│   └── vue@3.3.4 deduped
├─┬ @vee-validate/nuxt@4.11.1
│ └─┬ vee-validate@4.11.1
│   └── vue@3.3.4 deduped
├─┬ @vueuse/nuxt@10.4.1
│ └─┬ vue-demi@0.14.5
│   └── vue@3.3.4 deduped
├─┬ nuxt@3.6.5
│ ├─┬ @nuxt/vite-builder@3.6.5
│ │ ├─┬ @vitejs/plugin-vue-jsx@3.0.1
│ │ │ └── vue@3.3.4 deduped
│ │ ├─┬ @vitejs/plugin-vue@4.2.3
│ │ │ └── vue@3.3.4 deduped
│ │ └── vue@3.3.4 deduped
│ ├─┬ @unhead/vue@1.2.2
│ │ └── vue@3.3.4 deduped
│ ├─┬ unplugin-vue-router@0.6.4
│ │ └─┬ @vue-macros/common@1.6.2
│ │   └── vue@3.3.4 deduped
│ ├─┬ vue-router@4.2.4
│ │ └── vue@3.3.4 deduped
│ └── vue@3.3.4 deduped
├─┬ nuxt3-leaflet@1.0.10
│ └─┬ @vue-leaflet/vue-leaflet@0.10.1
│   └── vue@3.3.4 deduped
├─┬ pinia@2.1.6
│ └── vue@3.3.4 deduped
├─┬ vue-email@0.5.15
│ └── vue@3.3.4 deduped
└─┬ vue3-carousel-nuxt@1.1.0
  └─┬ vue3-carousel@0.3.1
    └── vue@3.3.4 deduped

[lovkyndig]

I'm using Nuxt3 and got this error to day. I was able to find the reson:
I was using vueuse inside templates.
The way I fixed it was with changing useOnline().value with another variable online:
const online = useOnline().value

And then use the online-variable in the template.

[fasterv410]

It worked for me  😁

<script setup lang="ts">
import { breakpointsTailwind, useWindowSize } from '@vueuse/core'

const windowSize = useWindowSize()
const sm = computed<boolean>(() => windowSize.width.value > breakpointsTailwind.sm)
</script>

[andylou0102]

I still got this warning

<script setup lang="ts">

const { top } = useElementBounding(botSelectorWrapperRef)
const previewWrapperStyle = computed(() => ({
  position: 'absolute',
  zIndex: 10,
  top: `${rect.top.value}px`
}))
</script>

[Vue warn]: onMounted is called when there is no active component instance to be associated with. 
Lifecycle injection APIs can only be used during execution of setup().

package.json

"dependencies": {
  "vue": "^2.7.14"
}

[yc0123450]

有人解决这个问题吗？文档上写的把@vue/composition-api替换成vue就行，但还是同样有这个报错

[yc0123450]

如果是vue2.7出现这个问题，应该是项目中用到了@vue/composition-api，把这个库卸载，引入的地方都改为从vue引入，然后main.js里记得删除use。移除后可能会涉及到部分api不兼容，比如setup函数的参数，@vue/composition-api里可以从setup函数的参数获取router或store等对象，移除后需要通过从proxy里取$route、$store等对象，注意getCurrentInstance 只在setup里生效，
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()

[lovkyndig]

有人解决这个问题吗？文档上写的把@vue/composition-api替换成vue就行，但还是同样有这个报错

#12614 (comment)