This repo (https://github.com/aerocargo/example-vue) shows all of the code required to register your own Vue components for the Storefront.
You need to make your component .vue file(s) and your main .js file that will register all of the components. An example javascript structure can be found here in the repo (https://github.com/aerocargo/example-vue/tree/master/resources/js).
You then need to add the assetLinks function to your modules service provider so that your modules assets are publicly linkable. You then need to register the javascript file using the Aero\Components\Facades\Component facade import method. An example module service provider can be found here in the repo (https://github.com/aerocargo/example-vue/blob/master/src/ServiceProvider.php).
Once you’ve got your files setup you need to build the javascript files. You can do this using npm (npm run dev or npm run production). After this you will be able to use your custom Vue components as described below.
Usage
A custom component can be included in any code contained within the {% component
%} Twig tag offered by the aerocommerce/components package:
{% component "product" with {count: 100} %}
<div>
<example-component :count="count" />
</div>
{% endcomponent %}
To include in a Twig template file outside of the {% component %} tag, or on a page not utilizing the {% component %} tag:
{% vue %}
<example-component count="100" />
{% endvue %}
To share data between multiple sibling components you can declare the data within the opening Twig tag:
{% vue with {count: 100} %}
<div>
<example-component :count="count" />
<another-example-component v-model="count" />
</div>
{% endvue %}
As with Vue.js templates, you should ensure there is only one root element within the Twig tag.
By default, the {% vue %} Twig tag renders the Vue template on the client-side. To make use of server-side rendering, simply specify the ssr option at the end of the opening Twig tag:
{% vue ssr %}
// ...
{% endvue %}
// or
{% vue with {count: 100} ssr %}
// ...
{% endvue %}