title: Location Hooks description: Extending WooNuxt with the Location Hooks system (registering outlets and components).

Location Hooks

The Location Hooks system provides lightweight extension points throughout WooNuxt so you can inject UI and logic without overriding full pages or components.

Key points

Registering a hook

Create a hooks/ folder in your app or custom layer and export a registration function. Files are loaded during app startup.

// hooks/product.ts
import ProductTrustMessage from "~/components/ProductTrustMessage.vue";

export default () => {
  registerHook({
    name: "product.summary.afterPrice",
    id: "product-trust-message",
    component: ProductTrustMessage,
    priority: 10,
  });
};

Hook component

The registered component receives a ctx prop with location-specific data.

<script setup lang="ts">
defineProps<{
  ctx: {
    product?: { name?: string; salePrice?: string | null }
  }
}>();
</script>

<template>
  <div class="p-3 mt-4 text-sm border rounded-md">
    Free returns and secure checkout for {{ ctx.product?.name || "this product" }}.
  </div>
</template>

Conditional rendering & priority

You can provide a when predicate and priority to control rendering order and conditional display.

export default () => {
  registerHook({
    name: "product.summary.beforeTitle",
    id: "sale-notice",
    component: SaleNotice,
    priority: 5,
    when: ({ product }) => Boolean(product?.salePrice),
  });
};

Examples and deeper reference

See the code examples and API reference in the project docs. If you'd like, I can add a dedicated deep-dive page with more examples and API details.