# How do I use a custom Vue component in the storefront?

This repo ([https://github.com/aerocargo/example-vue](https://github.com/aerocargo/example-vue)

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](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](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 %}

```