How do I use a custom Vue component in the storefront?
This repo (https://github.com/aerocargo/example-vue
You need to make your component .vuefile(s) and your main .jsfile 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 assetLinksfunction 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\Componentfacade importmethod. 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 devor 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/componentspackage:
{% 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 %}
{% 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 %}