Missing explanation for new module pattern/api introduced with v1.11.0


I updated our VSF to the latest develop branch containing the new module api and rewrite introduced with the current version 1.11.0. It was some trouble to figure out the new syntax and functionality of the – by the way very nice – new module pattern (or API).

After some research in the code I found the module package in packages/module/ which contains the registerModule() and extendStore() methods to provide my desired functionality.

I’m not sure if I didn’t found it in the documentation or it isn’t ready yet, but it would’ve been nice when this minor change would be better introduced. It is just mentioned in the upgrade-notes with one line.

Nevermind, after a short research I found the module boilerplate in /packages/cli/boilerplates/module which describes it quiet good how to add new modules or extend stores from now:

import { StorefrontModule } from '@vue-storefront/module'
import { coreHooks } from '@vue-storefront/core/hooks'
import { extendStore } from '@vue-storefront/core/helpers'
import { ExampleStore, ExtendProductStore } from './store'

export const ExampleModule: StorefrontModule = function (app, store, router, moduleConfig, appConfig) {
  // You can access config passed to registerModule via moduleConfig variable
  // This is how you register new Vuex modules
  store.registerModule('example', ExampleStore)
  // This is how you override properties of currently existing Vuex modules
  extendStore('product', ExtendProductStore)
  // This is how you can hook into various palces of the application
  coreHooks.afterAppInit(() => console.log('Do something when application is initialized!'))

So if you search for this, maybe it helped you until the documentation is updated :wink:

UPDATE: I’ve found this after reading the upgrade notes more carefully: