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

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

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.

Using NPM:

  npm install -S @revolugo/elements-vue2

Using Yarn:

  yarn add -S @revolugo/elements-vue2

Using PNPM:

  pnpm add -P @revolugo/elements-vue2

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

Initialize the plugin in your main.js:

import Vue from 'vue'
import RevolugoElementsPlugin from '@revolugo/elements-vue2'
import App from './App.vue'

const pluginConfigurationOptions = {
  apiEnvironment: 'LIVE',
  apiKey: [YOUR_API_KEY],
  currency: 'EUR',
  installComponents: false,
  lang: 'fr-FR',
  theme: { primary: '#009688' },
}

Vue.use(RevolugoElementsPlugin, pluginConfigurationOptions)

new Vue({
  render(h) {
    return h(App)
  },
}).$mount('#app')

<template>
  <revolugo-vue-hotel-offer-list
    address=""
    :adult-count="1"
    check-in-date="2024-03-22"
    check-out-date="2024-03-24"
    latitude="48.8508305"
    longitude="2.2844643"
    room-count="1"
    source-market="FR"
  />
</template>

<script>
  import { RevolugoVueHotelOfferList } from '@revolugo/elements-vue2'

  export default {
    name: 'App',
    components: {
      RevolugoVueHotelOfferList,
    },
  }
</script>