This plugin failed to work as a functional Nuxt plugin

[stevefan1999-personal]

Synopsis

Only if you put the plugin installation on a global scope the schema introspection could work. This is very annoying because for some reason without schema introspection there will be no fetch/customQuery action attached to the store.

Example

Create a nuxt plugin vuex-orm.ts in plugins/vuex-orm.ts:

export default async function ({ store, app, ...rest }): Promise<void> {
  const apolloClient = app.apolloProvider.defaultClient
  
  VuexORM.install(database)(store)
  VuexORM.use(VuexORMGraphQL, {
    ...createOption({ url: BASE_URL }),
    apolloClient,
    debug: process.server && process.env.NODE_ENV !== 'production'
  })
}

Attach the plugin to the Nuxt config. Now, if you load up the Vue debugger, you will see that the ORM actions aren't there...very strange indeed.

Related

#134 (Probably)

[stevefan1999-personal]

I have found the root cause: you have populated the ORM modules & fields & friends before plugin instantiation. Then the state of the mutators/actions had became read-only.

[mahapo]

@stevefan1999-personal What was the solution for your issue?

I have the same issue with this

import VuexORM, { Database } from "@vuex-orm/core"
import VuexORMGraphQL from "@vuex-orm/plugin-graphql"
import {provide, onGlobalSetup, defineNuxtPlugin } from "@nuxtjs/composition-api"
import { DefaultApolloClient } from "@vue/apollo-composable"
export default defineNuxtPlugin(({ app, store }) => {
  onGlobalSetup(() => {
    const database = new Database()
    const apolloClient = app?.apolloProvider?.defaultClient
    VuexORM.use(VuexORMGraphQL, {
      apolloClient,
      database,
      debug: process.env.NODE_ENV !== "production",
    })
    VuexORM.install(database)(store)
    provide(DefaultApolloClient, apolloClient)
  })
})