Revolugo Elements Vue3

@revolugo/elements-vue3 provides a set of Vue.js 3 components wrapping the Official Revolugo Elements.

Detailed documentation can be found at https://elements-vue3.revolugo.com/vue.

Build your pixel-perfect accommodation booking experience

Revolugo Elements is a complete and ready-to-use library of UI components providing everything you need to build a seamless accommodation booking experience for your customers. It brings together industry state-of-the-art building blocks to integrate accommodation products in your ticket selling/registering funnel .

Revolugo Elements Components are tightly connected to Revolugo Booking API.

Revolugo Booking API is the official RESTful API from Revolugo exposing all the necessary endpoints in order to perform each step required to make a complete accommodation booking flow based on Revolugo large accommodation inventory anywhere in the world, from price/availability checking to booking confirmation.

We strongly encourage users of Revolugo Elements to read the Revolugo Booking API documentation in order to have a deeper understanding of Revolugo booking flow : https://booking-api.revolugo.com/v1/documentation which we are going to discuss further in this documentation, within the scope of the use of Revolugo Elements library.

Getting Started

Installation

Using NPM:

  npm install -S @revolugo/elements-vue3

Using Yarn:

  yarn add -S @revolugo/elements-vue3

Using PNPM:

  pnpm add -P @revolugo/elements-vue3

Basic Usage

You need a set of Publishable/Secret API Keys credentials. Reach out to us to get one: contact@revolugo.com

Configure Vue to use the Components

Initialize the plugin in your main.js:

1import { createApp } from 'vue'
2import RevolugoElementsPlugin from '@revolugo/elements-vue3'
3import App from './App.vue'
4
5const app = createApp(App)
6
7app.use(RevolugoElementsPlugin, {
8  apiEnvironment: 'LIVE',
9  apiKey: [YOUR_API_KEY],
10  currency: 'EUR',
11  installComponents: false,
12  locale: 'fr-FR',
13  theme: { primary: '#009688' },
14})
15
16app.mount('#app')

Use it anywhere in your components

1<template>
2  <revolugo-vue-hotel-offer-list
3    address=""
4    :adultCount="1"
5    checkInDate="${dayjs().add(1, 'day').format('YYYY-MM-DD')}"
6    checkOutDate="${dayjs().add(3, 'day').format('YYYY-MM-DD')}"
7    :latitude="48.8508305"
8    :longitude="2.2844643"
9    :roomCount="1"
10    sourceMarket="FR"
11    :hotelRoomOffersLimit="6"
12  />
13</template>
14
15<script>
16  import { RevolugoVueHotelOfferList } from '@revolugo/elements-vue3'
17
18  export default {
19    name: 'App',
20    components: {
21      RevolugoVueHotelOfferList,
22    },
23  }
24</script>

Plugin Configuration options

Name	Type	Requirement	Default	Description
apiEnvironment	string	Optional	LIVE	The Revolugo environment to use. Valid values: LIVE, SANDBOX
apiKey	string	Required	undefined	Your Revolugo Publishable API Key. 🛑 Make sure to put your Publishable API key here. Do not put your Secret API key, it would be exposed publicly. Secret API key is supposed to be used exclusively for server-side calls.
currency	string	Required	undefined	The currency you need to display prices in.
installComponents	boolean	Required	false	If you want to manually install components, e.g. import { RevolugoVueHotelOfferList } from '@revolugo/elements-vue3' Vue.component('RevolugoVueHotelOfferList', RevolugoVueHotelOfferList) then set installComponents to 'false'. If you want to automatically install all the components this property must be set to 'true'
lang	string	Optional	en-US	The language used in components. Valid values: en-US, fr-FR
theme	object	Optional	{ primary: '#007fff', secondary: '#64B5F6', success: '#4CAF50' }	Color theme for the components. All keys are optional