Extending a default vue storefront component
Hello everyone,
I'm currently working on a project with Vue Storefront and I'd like to extend one of the default components. Could someone please help me on the best approach to achieve this?
I've gone through the documentation, but didnt saw a explanation or some code snippets that demonstrate how to extend a default Vue Storefront component effectively. I want to make sure I'm following the right practices for seamless development.
Any help or pointers would be greatly appreciated.
6 Replies
Hey @anjana_71429
I'm not exactly sure what do you mean by extending components?
Hi @skirianov
Apologies if my question wasn't clear. When I mentioned 'extending components,' I was referring to changing default components in Vue Storefront to fit our project's requirements. It's about finding a efficient way to build on what Vue Storefront provides, without having to start everything from scratch.
I've been looking into this because there are some complexities we need to address. For example if I edit one of Vue Storefront's Vue components and they introduce a new feature to that same component in a future version, it could create an issue . Also if I customize a component and create my own version of it, the references to that component need to be updated to point to my customized version instead of the default one. I might have to manually update the import paths in various places.
Your thoughts and pointers would be a great help.
Hi @anjana_71429 π , if I understand you correctly, you want to extend components without sacrificing the ability to later upgrade them when Vue Storefront makes updates to the original repo, is that correct?
Hi @.rohrig Yes thats what I need
Okay, π With SFUI1 and SFUI2 the approaches are different. . . .
SFUI 1:
if you're using yarn or pnpm I'd try to check out yarn patch (https://yarnpkg.com/cli/patch) or pnpm patch (https://pnpm.io/cli/patch) features that allow to to create "patches" for the files from the package.
SFUI2:
with SFUI2 for base components the customization route is to wrap them with your own component and customize from the outsize - base components should be fully customizable.
yarn patch | Yarn
Prepare a package for patching.
pnpm patch | pnpm
Prepare a package for patching (inspired by a similar command in Yarn).
Hi @.rohrig Thank you for your reply
the question is SFUI and VSF components are diffrent right? I am looking for a way to extend VSF components and extend its functionility.