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
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.
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.