Extend user module

Hello all,
I’m new to VSF
Can anyone help me with how to extend user module. I want to call custom api for magento2 and process the response.

Thankyou

Hey, welcome in the community!

Please take a look at this doc:
https://docs.vuestorefront.io/guide/modules/introduction.html#extending-and-overriding-vue-storefront-modules

To override any of the User module parts just create a new module with the same key (in that case user) with everything you want to override (for example if you include Vuex with action login it will override default login action etc) and wrap this module into extendModule function that you can find imported in src/modules/index.ts. Example can be found on the doc I just linked.

In case of any troubles just write in this thread :wink:

Thank you!

I followed the documentation , created a new module with the below code on index.ts

import { User } from ‘@vue-storefront/core/modules/user’
import { extendModule, VueStorefrontModule } from ‘@vue-storefront/core/lib/module’;
// 1. Preparation of new VSMConfig
const extendUserVuex = {
actions: {
load () {
console.info(‘hey’)
}
}
}
const extendUserAfterRegistration = function (VSF) {
console.info(‘Hello, im extended now!’)
}
export const KEY = ‘user’
export const userExtend = {
key: KEY,
afterRegistration: extendUserAfterRegistration,
store: { modules: [{ key: KEY, module: extendUserVuex }] },
}
// 2. After passing the object to extendModule function it will be merged with Cart module during registration
extendModule(userExtend)
export const registerModules: VueStorefrontModule[] = [User]

Here I’m getting this below error:
TS2739: Type ‘{ key: string; afterRegistration: (VSF: any) => void; store: { modules: { key: string; module: { actions: { load(): void; }; }; }[]; }; }’ is missing the following properties from type ‘VueStorefrontModule’: _isRegistered, _c, _extendModule, config, register

Did you used the uncommented example in modules/index.ts?

const extendCartVuex = {
  actions: {
    load () {
      Logger.info('New load function')()
    }
  }
 }

 const cartExtend = {
  key: 'cart',
  afterRegistration: function(isServer, config) {
    Logger.info('New afterRegistration hook')()
  },
  store: { modules: [{ key: 'cart', module: extendCartVuex }] },
 }

 extendModule(cartExtend)

I wasn’t able to reproduce your issue. Sometimes TS throws errors like this without a reason and they disappear once you restart your dev server.

Hi,
Thank you

Do we need to register the extended module in modules/index.ts?
I’m getting this error .

TypeError: Cannot read property ‘modules’ of undefined
at mergeStores (core/lib/module/helpers.ts:21:16)
at VueStorefrontModule.module.exports…/core/lib/module/index.ts.VueStorefrontModule._extendModule (core/lib/module/index.ts:67:38)
at server-bundle.js:1542:27
at Array.forEach ()
at VueStorefrontModule.module.exports…/core/lib/module/index.ts.VueStorefrontModule.register (core/lib/module/index.ts:91:23)
at server-bundle.js:1471:45
at Array.forEach ()
at registerModules (core/lib/module/index.ts:18:10)
at server-bundle.js:271:109
at step (node_modules/tslib/tslib.es6.js:97:0)

Hello,
I am trying to override
" /var/frontend/core/modules/wishlist/mixins/wishlistMountedMixin.js " How can i override this file into into src/modules ?