Custom logic

If you want to attach stateful logic as event handlers to your template elements, 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

<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

<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 }}