npm package: @revolugo/elements-vue
Description: Revolugo Elements UI library - Vue.js Wrapper
Latest version: 1.3.4
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Revolugo Elements Vue 2

**@revolugo/elements-vue** provides a set of **Vue.js 2** components wrapping the Official **[Revolugo Elements](https://elements.revolugo.com)**.

<br />

### Build your pixel-perfect accommodation booking experience

<br />

**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](https://booking-api.revolugo.com/v1/documentation)**.

**[Revolugo Booking API](https://booking-api.revolugo.com/v1/documentation)** is the official RESTful API from **[Revolugo](https://revolugo.com)** exposing all the necessary endpoints in order to perform each step required to make a complete accommodation booking flow based on **[Revolugo](https://revolugo.com)** 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](https://booking-api.revolugo.com/v1/documentation)** documentation in order to have a deeper understanding of **[Revolugo](https://revolugo.com)** booking flow : **[https://booking-api.revolugo.com/v1/documentation](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.

<br />

# Getting Started


## Installation

Using NPM:

```bash
  npm install -S @revolugo/elements-vue
```

Using Yarn:

```bash
  yarn add -S @revolugo/elements-vue
```

Using PNPM:

```bash
  pnpm add -P @revolugo/elements-vue
```

<br/>

## Basic Usage

#

You need an API Key. Reach out to us to get one: contact@revolugo.com

<br />

### Configure Vue to use the Components

<br />

Initialize the plugin in your `main.js`:

```js
  import Vue from 'vue'
  import RevolugoElementsPlugin from '@revolugo/elements-vue'
  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')
```

<br />

### Use it anywhere in your components

<br />

```html
<template>
  <revolugo-vue-hotel-offer-list
    address=""
    :adultCount="1"
    checkInDate="${dayjs().add(1, 'day').format('YYYY-MM-DD')}"
    checkOutDate="${dayjs().add(3, 'day').format('YYYY-MM-DD')}"
    :latitude="48.8508305"
    :longitude="2.2844643"
    :roomCount="1"
    sourceMarket="FR"
    :spacing="12"
    :hotelRoomOffersLimit="6"
  />
</template>

<script>
import { components } from '@revolugo/elements-vue'

const { RevolugoVueHotelOfferList } = components

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

<br />


### Plugin Configuration options

<br />


| Name                        | Type   | Requirement  | Default                                                                                            | Description                                                                                                                                                                                                                                                                 |
| --------------------------- | ------ | ------------ | -------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <code>apiEnvironment</code> | string | **Optional** | <code>LIVE</code>                                                                                  | The Revolugo environment to use. Valid values: <code>LIVE</code>, <code>SANDBOX</code>                                                                                                                                                                                      |
| <code>apiKey</code>         | string | **Required** | <code>undefined</code>                                                                             | Your Revolugo **Publishable API Key**. <br /> 🛑 <b> 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.</b> |
| <code>currency</code>       | string | **Required** | <code>undefined</code>                                                                             | The currency you need to display prices in.                                                                                                                                                                                                                                 |
| <code>installComponents</code>       | boolean | **Required** | <code>false</code>                                                                             | If you want to manually install components, e.g. <br /><code>import { RevolugoVueHotelOfferList } from '@revolugo/elements-vue'<br /><br /> Vue.component('RevolugoVueHotelOfferList', RevolugoVueHotelOfferList)</code> <br />then set installComponents to 'false'. If you want to automatically install all the components this property must be set to 'true'                                                                                                                                                                                                                                 |
| <code>lang</code>         | string | **Optional** | <code>en-US</code>                                                                                 | The language used in components. Valid values: <code>en-US</code>, <code>fr-FR</code>                                                                                                                                                                                       |
| <code>theme</code>          | object | **Optional** | <code>{<br /> primary: '#007fff',<br />secondary: '#64B5F6',<br />success: '#4CAF50'<br />}</code> | Color theme for the components. All keys are optional                                                                                                                                                                                                                       |