Maybe bug in createGlobalState with using vue-router

store.ts

import {createGlobalState, useStorage} from '@vueuse/core'

export const useState = createGlobalState(() => {
    return useStorage('user', {
        user: null
    })
})

main.ts

createApp(App)
    .use(router)
    .mount('#app')

app.vue

import {useRouter} from 'vue-router'
import {useState} from '~/store'

const state = useState()
const router = useRouter()

console.log(router)
console.log(state.value)

The browser throws the warn “[Vue warn]: inject() can only be used inside setup() or functional components. at <App>” and router undefined in console.

But if in main.ts added line .provide('state', useState()) then warn gone…

[antfu]

To use router globally, I would recommend to do:

// router.ts

export const router = createRouter()

// main.ts

import { router } from './router'

createApp().use(router).mount()

// whatever

import { router } from '../router'

const route = router.currentRoute

createGlobalState is only provided as a workaround for now. To have full support of it, we will need https://github.com/vuejs/rfcs/pull/212, which likely be Vue 3.2

[wheatjs]

As a workaround you can declare const router = useRouter() before const state = useState().

I’m thinking the issue comes from withScope here https://github.com/vueuse/vueuse/blob/main/packages/core/createGlobalState/index.ts#L4

Perhaps it has something to do with createApp portion, not sure tbh though.