# Custom logic

If you want to attach stateful logic as event handlers to your template elements, [petite-vue](https://github.com/vuejs/petite-vue) is a useful tool. petite-vue is an alternative distribution of Vue optimized for progressive enhancement. It provides the same template syntax and reactivity mental model as standard Vue. However, it is specifically optimized for "sprinkling" a small amount of interactions on an existing HTML page rendered by a server framework.

Some rules/constraints to consider:

* Leave the HTML rendering primarily to Velocity
* Maintain minimal state in the Vue context, enough to satisfy your use case
* Use a single Vue app context for the whole template
* Make sure that the recommendation template renders correctly without the Vue layer

These rules will guide you to use petite-vue within it's intended use cases, for Progressive Enhancement, and not like Vue, a SPA framework.

Some use cases where petite-vue is useful are listed below

## Event handlers to call external APIs and libraries

This example is stateless and show cases how functions can be exposed to template

```markup
<script type="module">
import { createApp } from "https://unpkg.com/petite-vue?module"

createApp({ 
  addToCart(productId) {
    // call platform specific add to cart API  
  }    
 }).mount("#$divId")
</script>
```

Usage from template

```
<span @click="addToCart('$product.productId')">Add to cart</span>
```

## Product selection for bundle creation and related total

In this case the selection state is kept in petite-vue and hooked into the template

```markup
<script type="module">
import { createApp } from "https://unpkg.com/petite-vue?module"

const prices = {
#foreach($product in $!products)
  "$product.productId": $product.price.asNumber(),
#end
}

createApp({  
  selected: [],
  toggle(id) {
    const idx = this.selected.indexOf(id)
    if (idx > -1) {
      this.selected.splice(idx, 1)
    } else {
      this.selected.push(id)
    }
  },
  get total() {
    return this.selected
      .map(id => prices[id] ?? 0)
      .reduce((acc, curr) => acc + curr, 0)
  }
}).mount("#$divId")
</script>
```

template usage

```
<div class="product-grid">
#foreach($product in $!products)
  <div class="product" @click="toggle("$product.productId")">
    ...
  </div>
#end
</div>

<div>Total: {{ total }}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.nosto.com/techdocs/implementing-nosto/template-customization/custom-logic.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.