Using ref/reactive outside of function breaks nuxt layout

[regenrek]

Hi!

I'm not sure if it's nuxt or Composition API related but I give it a try here.

Problem

When I lift some state object up outside of a composition function to create some shared state between components, it runs into an error when the component which is using the composition function is used in a nuxt layout.

• toggle.js

import { reactive, toRefs } from '@vue/composition-api'

const state = reactive({ // error
  active: false
})

export default function useToggle () {
  const toggle = () => {
    state.active = !state.active
  }

  return { ...toRefs(state), toggle }
}

• layouts/default.vue

<template>
  <div class="bg-Cbeige1">
    <ToggleButton />
    <nuxt />
  </div>
</template>
<script>
import ToggleButton from '~/components/nav/ToggleButton'

export default {
  components: {
    ToggleButton
  }
}
</script>

Codesandbox example

https://codesandbox.io/s/github/regenrek/vue-sidebar-menu-composition-api-example/tree/nuxt-composition-api-broken-with-layout-pl

Error

vue-composition-api.module.js?750b:36 Uncaught Error: [vue-composition-api] must call Vue.use(plugin) before using any function.

Why it happens

It seems that the composable function toggle.js runs before the @vue/composition-api plugin is initiated with Vue.use(). If you do the same inside for example pages/index.vue it works.

Workaround

• Avoid using ref/reactive outside a function
• Avoid using nuxt layouts and use it only on pages

I'm just curious why this happens...

The existing issues doesn't help me here:
#239
#181

[posva]

As the error suggests and you found out, the plugin must be installed before any other function is called. This is a limitation of the plugin that doesn't exist in Vue 3.

In practice, you need to ensure functions are called only inside of setup by delaying the execution of such functions with functions. Here is an example of a library that does such thing: https://github.com/posva/pinia#readme

[DmytroKurapin]

This worked for me (did it only for default layouts, no need for others):
Put the import of toggle composable into setup(){} hook of the component, something like this:
Burger.vue

...
// import useToggle from '~/composables/toggle' // <- removed line

export default defineComponent({
  setup () {
    const { useToggle } = require('~/composables/toggle'); // <--- added line
    const { active, toggle } = useToggle()

    return {
      active,
      toggle
    }
  }
})