# Nuxt

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

## 1. Tell Vue the tags, and load the script

```ts
// 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](/widget/start#types-for-react-and-vue) `elements.d.ts` and `vue.d.ts` in the project.

## 2. A search on the home page

```vue
<!-- 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

```vue
<!-- 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](/widget/pages#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`.