Nuxt

A Nuxt site, with the widget's elements in Vue templates.

1. Tell Vue the tags, and load the script

Code
// nuxt.config.ts
export default defineNuxtConfig({
  vue: {
    compilerOptions: {
      // The widget's tags are custom elements, not Vue components.
      isCustomElement: (tag) => tag.startsWith("mellow-"),
    },
  },
  app: {
    head: {
      script: [{ type: "module", src: "https://mllw.is/widget/1/mellow.js" }],
    },
  },
});

In a Vue site with no Nuxt, set the same isCustomElement in the Vue plugin's template options in Vite: vue({ template: { compilerOptions: { isCustomElement } } }).

For type checks with vue-tsc, save the type files elements.d.ts and vue.d.ts in the project.

2. A search on the home page

Code
<!-- app/pages/index.vue -->
<template>
  <main>
    <h1>Your Rental</h1>
    <mellow-search rental="your-rental" auth="pk_live_…" action="/book" layout="row" />
  </main>
</template>

3. The booking page

Code
<!-- app/pages/book.vue -->
<script setup lang="ts">
function booked(event: CustomEvent<{ id: string; reference: number }>) {
  console.log("Booked", event.detail.reference);
}
</script>

<template>
  <main>
    <h1>Book a camper</h1>
    <mellow-booking rental="your-rental" auth="pk_live_…" @mellow-booked="booked" />
  </main>
</template>

auth holds the browser key. Vue keeps key for itself, so the widget reads its key from auth. @mellow-booked listens for the event as any DOM event. The search sends the customer to /book with a full page load, as action says.

For one page for each step with Nuxt's router, follow Your own router: keep <mellow-booking> in a layout that every booking page shares, call navigateTo() in the mellow-step listener, and call store.locate() after each move.

Tried: on 2026-10-20, with Nuxt 4.6 and Vue 3.5 on localhost, against a local Mellow with the test key: the search on the home page, then /book from the car types to "Test booking", with @mellow-booked, and both elements in Nuxt's server render. Not tried here: one page for each step with Nuxt's router, and vue-tsc.