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

1. You need to add the `assetLinks` function to your modules service provider so that your modules assets are publicly linkable. An example module service provider can be found here:   
      
    [https://github.com/aerocargo/admin-example-vue/blob/master/src/ServiceProvider.php](https://github.com/aerocargo/admin-example-vue/blob/master/src/ServiceProvider.php)
2. You also 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:  
      
    [https://github.com/aerocargo/admin-example-vue/tree/master/resources/js](https://github.com/aerocargo/admin-example-vue/tree/master/resources/js)
3. You need to run `php artisan aero:link` in your terminal to link the assets.
4. You then need to register the javascript file using the `Aero\Components\Facades\Component` facade `import` method:  
      
    ```php
    \Aero\Components\Facades\Component::import('/modules/aerocargo/acme/components.js');
    ```
    
    <p class="callout info">This facade is provided by the `aerocommerce/components` module.</p>
5. Once you’ve got your files setup, have ran the link command and have built the javascript files (using npm: `npm run dev` or `npm run production`).

## Usage

### {% component %}  


The `component` tag will render the component in line with the `aero.ssr.enabled` config value, if `true` then the component will be server-side rendered:

```twig
{% component "product" with {count: 100} csr %}
<div>
    <example-component :count="count" />
</div>
{% endcomponent %}
```

<p class="callout info">Using `csr` means that the component will always be client-side rendered.   
Using `ssr` means the component will always be server-side rendered.</p>

### {% vue %}  


The `vue` tag will render the component client-side by default:

```twig
{% vue with {count: 100} ssr %}
<div>
    <example-component :count="count" />
    <another-example-component v-model="count" />
</div>
{% endvue %}
```

<p class="callout info">Using `ssr` means the component will be server-side rendered.  
</p>