Extending themes

Hi everyone,
I am going to use the official VSF theme , the default one. I need to make some customization in the .vue files. What is the recommended way to do so as an extension and to not change the themes itself so I can update it whenever a new changes (fix or improvement) has been made to it ?

the easiest way would be to create webpack aliases for components you want to override so the default path can be replaced by overwritten component in a new folder

Hey @khchine5,
I believe the best approach would be to:

  • copy theme to your own folder
  • change package.json in the theme-copy
  • update vue-storefront config to use your theme
  • restart vue-storefront instance (since you have just changed the config, this is required for the new theme to be used)

It will be later easy to compare your theme when the core theme changes (or easy to create patches as I described in my gist:

EDIT: as @FilipRakowski suggested, for smaller changes component overrides may be easier in some cases, so if that works for you, then this is the good way, too.

1 Like

Thanks @FilipRakowski for your replay.
Could you please explain more you idea ?
Do I need to edit this file to point to the new folder ?

It’s this one. https://github.com/DivanteLtd/vue-storefront/blob/master/core/build/webpack.base.config.ts

Under aliases you can put a new path for a theme component in default theme. By using aliases you are making absolutely 0 changes to default theme so upgrades can be painfully delivered. You should use theme webpack config to extend core one https://docs.vuestorefront.io/guide/core-themes/webpack.html

This method is suitable if you want to replace just a few components. For more complex changes just copy theme and rename it as @jan suggested.