This article will show how you can integrate existing Vue components into your Vue Storefront project. For this example the component we will be adding will be an alternative quantity input.
In order to include a new component scoped to your own theme, in your terminal cd to your theme directory and run
npm install vue-numeric-input --save. There should now be a node_modules folder containing the npm package for our component.
For our use-case, we are looking to override all occurrences of the numeric input, therefore the file we are looking to override within our theme will be
Firstly, we need to import our new component and register it. To do this we need to add the following two lines:
With our new component available, we can now use this in our template. We can update the existing input element to be a
In the original component, Vue Storefront looks for input events to be emitted directly from the input itself. Our newly added component contains other markup and therefore in order for this to work correctly we need to manually emit these events in order for them to be picked up. To do this, we can simply use v-model to bind the quantity value to our new component and add a watcher for changes to the input value to emit an input event with its value.
Your component should now be working.