Vue Hotel Search Widget

A Vue.js component for hotel search functionality, converted from React.

Installation

npm install vue-hotel-search-widget

Usage

Basic Setup

First, make sure you have PrimeVue installed and configured in your Vue project:

npm install primevue

In your main.js or main.ts:

import { createApp } from 'vue'
import PrimeVue from 'primevue/config'
import Aura from '@primevue/themes/aura'
import 'primeicons/primeicons.css'

const app = createApp(App)
app.use(PrimeVue, {
  theme: {
    preset: Aura
  }
})
app.mount('#app')

Using the Component

<template>
  <HotelSearchWidget
    :config="{
      theme: {
        primary: '#1c6bff',
        secondary: '#00b3a4',
        primaryLight: '#e3f0ff'
      },
      redirectionDomain: 'phoenix.dev.futuretravelplatform.com',
      fontName: 'Montserrat, Segoe UI, system-ui, sans-serif'
    }"
    :minWidth="1240"
  />
</template>

<script setup>
import HotelSearchWidget from 'vue-hotel-search-widget'

// Component is ready to use!
</script>

Props

config (Object, optional)

Configuration object for the widget:

• theme (Object, optional):
  • primary (String): Primary color (default: #2c0a82)
  • secondary (String): Secondary color (default: #2c0a82)
  • primaryLight (String): Primary light color (default: #f3e2ff)
• redirectionDomain (String, optional): Domain for search redirection
• fontName (String, optional): Custom font family

minWidth (Number | String, optional)

Minimum width of the widget container.

Features

• ✅ Destination search with autocomplete
• ✅ Nationality selection
• ✅ Date range picker (check-in/check-out)
• ✅ Rooms and guests selection
• ✅ Advanced search options (star ratings, meal types)
• ✅ Around current location feature
• ✅ Fully customizable theme
• ✅ Responsive design

Development

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

# Build library
npm run build:lib

License

MIT