app.setup function in plugins

[niklaswolf]

Can someone explain to me the following and why this is necessary in plugins? I saw it in some shopware-pwa nuxt-plugins and have to to this in my own plugins, too.

export default (context) => {
  const app = context.app
  const { setup } = app

  app.setup = function (...args) {
    let result = {}
    if (setup instanceof Function) {
      result = setup(...args) || {}
    }
    
    //CUSTOM CODE HERE

  return result;
 }

How is this related to shopware-pwa, vue2/3 and/or nuxt? Is it shopware-pwa specific or a more general approach?

[patzick]

it's more like Vue-related. Composables are supposed to work inside the setup method. When you want to do some additional stuff on every page and you want to use Nuxt plugin for that you would like to use global setup. But, you're not the only one probably and just overwriting the global setup you might break things. That's why first you're invoking the current setup method, you get the response from that, doing your own logic and return the combined result of that action.

So as a summary
You need to do this only if you're adding nuxt plugin and want to invoke some composables logic inside

[meeshoogendoorn]

@patzick Is it correct that this is not wortking anymore? I get the following error in combination with the new devTools.

TypeError: Cannot read properties of undefined (reading 'addTimelineEvent')
    at Object.log (composables.esm.js?58f0:2446)
    at on (composables.esm.js?58f0:1223)
    at app.setup (notifications.js?6341:22)
    at app.setup (kippie-events.js?28be:18)
    at app.setup (kippie-events.js?4fa7:18)
    at mergedSetupFn (vue-composition-api.esm.js?a6f4:2098)

[patzick]

hey @meeshoogendoorn, is this code in your custom plugin?
Id suggest to run it in new scope instead of setup method.

Example of plugin file:

export default async ({ app, route, req }) => {
  const scope = effectScope();
  extendScopeContext(scope, app);

  await scope.run(async () => {
    const { sharedRef } = useSharedState();
    const someSharedStateValue = sharedRef('my-custom-value');
    someSharedStateValue.value = await FETCH_SOMETHING_FROM_API()
  })
})

[K3vinF]

@patzick
I am working on https://github.com/K3vinF/shopware-pwa-gtm-events
However when the plugin is initialised I get an error client.js?06a0:102 Error: [composables][useDefaults]: applicationContext does not have shopwareDefaults!
I suspect this has something to do with the new scope the code is run in? But I am kind of stuck here. Any insights?

[K3vinF]

Hmmm... While doing some more debugging I get the feeling my error is caused by my typescript / siroc setup. Because when I put the code manually in /src/assets it does work correctly.