Cookie Consent by Free Privacy Policy Generator Update cookies preferences

Integrating a Vue component with Vue Storefront

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.

Note: This assumes you have created a new theme within your project. If you’re unfamiliar with how to do this check out this article or see the Vue Storefront docs.

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 src/themes/{ yourtheme}/components/core/blocks/Form/BaseInputNumber.vue

Firstly, we need to import our new component and register it. To do this we need to add the following two lines:

code snippet
src/themes/develo/components/core/blocks/Form/BaseInputNumber.vue

With our new component available, we can now use this in our template. We can update the existing input element to be a component.

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.

code snippet
src/themes/develo/components/core/blocks/Form/BaseInputNumber.vue
code snippet
src/themes/develo/components/core/blocks/Form/BaseInputNumber.vue

Your component should now be working.


Need more help from experienced specialists?


...
Ian

share:

Ready to start your next project?

See how we can help you accelerate your business