---
title: Hotel Booking Form
product: Form Library
description: This ready-to-use hotel booking form with a free code example for JavaScript demonstrates the limitless capabilities of our robust and feature-rich SurveyJS Creator. It includes multiple form appearance customization features, all set up in the Theme Editor. You can embed the form in your app as-is or take it a step further with our free form editing tool.
framework: Vue 3
source: https://surveyjs.io/form-library/examples/hotel-booking-form-template-free/vue3js
index: https://surveyjs.io/form-library/examples/overview.md
---

# Hotel Booking Form (Vue 3)

<!-- cut -->

A hotel booking form allows guests to make a reservation at a hotel. Hotel booking forms typically include fields for information related to the guest's stay: name, contact details, identification documents, reservation details, payment information, etc. This demo shows a ready-to-use hotel booking form, which was created and designed using SurveyJS Survey Creator with integrated Theme Editor. The following sections highlight key aspects of the form implementation.

## Enable Panelless View

Form fields can be framed by panels or displayed without them. This demo uses the panelless view. To enable it in Theme Editor, switch the **General** > **Question appearance** editor to "Without Panels". This editor is mapped to the [`isPanelless`](https://surveyjs.io/form-library/documentation/api-reference/itheme#isPanelless) property in the theme JSON configuration (see the `theme.js` file).

<img src="/Content/Images/examples/featured-demos/panelless-question-appearance.png" alt="Specify panelless question appearance in SurveyJS Theme Editor" width="100%">

## Add a Background Image

The hotel booking form in this demo has a distinct background image. With Theme Editor by SurveyJS, you can add background images to your forms with ease. Open the **Themes** tab in Survey Creator and switch to the **Background** category. Editors under the **Background image** title enable you to add a background image and configure its every aspect.

<img src="/Content/Images/examples/featured-demos/background-image.png" alt="Configure a background image in SurveyJS Theme Editor" width="100%">

These editors are mapped to the following theme JSON schema properties, which you can find in the `theme.js` file:

- [`backgroundImage`](https://surveyjs.io/form-library/documentation/api-reference/itheme#backgroundImage): `string`          
An image to display as form background. This property accepts a hyperlink or a data URL.

- [`backgroundImageFit`](https://surveyjs.io/form-library/documentation/api-reference/itheme#backgroundImageFit): `"auto"` | `"contain"` | `"cover"`            
A string value that specifies how to resize the background image to fit it into its container. Refer to the description of the [`background-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#values) CSS property values on MDN for detailed information on the possible values.

- [`backgroundImageAttachment`](https://surveyjs.io/form-library/documentation/api-reference/itheme#backgroundImageAttachment): `"fixed"` | `"scroll"`          
A string value that specifies whether the background image is fixed in its position (as in this demo) or scrolled along with the survey.

- [`backgroundOpacity`](https://surveyjs.io/form-library/documentation/api-reference/itheme#backgroundOpacity): `number`      
A value from 0 to 1 that specifies how transparent the background image should be: 0 makes the image completely transparent, and 1 makes it opaque. In Theme Editor, the opacity values are mapped to a scale from 0% to 100%.

## Configure the Form Header

The header of your form typically contains a form title, short description, and a logo of your company. To specify title and description texts, open the Designer tab and enter them in the **Survey title** and **Survey description** editors in the **General** category.

<img src="/Content/Images/examples/featured-demos/survey-title-and-description.png" alt="Specify survey title and description in SurveyJS Survey Creator" width="100%">

To configure a logo, use editors in the **Logo in the Survey Header** category.

<img src="/Content/Images/examples/featured-demos/logo-settings.png" alt="Specify logo in SurveyJS Survey Creator" width="100%">

These editors are mapped to the following survey JSON properties:

- [`title`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#title)
- [`description`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#description)
- [`logo`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#logo)
- [`logoWidth`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#logoWidth)
- [`logoHeight`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#logoHeight)
- [`logoFit`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#logoFit)

To configure the appearance of the form header, open the Themes tab and use editors in the **Header** category. Ensure that the **View** switch is set to "Advanced". All editors in the Header category, except font editors and View, are mapped to corresponding [`header`](https://surveyjs.io/form-library/documentation/api-reference/iheader) object properties in the theme JSON schema (see the `theme.js` file).

<img src="/Content/Images/examples/featured-demos/header-settings.png" alt="Configure form header in SurveyJS Theme Editor" width="100%">

## Use Placeholders for Form Field Titles

If you want to design more compact and neat-looking forms, you can hide form field titles and display title texts as input field placeholders. To implement this layout in your form, follow the steps below:

1. Open the Designer tab.
2. Select a question on the design surface.
3. In the Property Grid, switch to the **General** category.
4. Find and unselect the **Show the title and description** checkbox.
5. Enter the form field title in the **Placeholder text within input field** editor.

<img src="/Content/Images/examples/featured-demos/use-placeholders-instead-of-titles.png" alt="Set input field placeholder in SurveyJS Survey Creator" width="100%">

In the survey JSON schema, these editors are mapped to a question's [`titleLocation`](https://surveyjs.io/form-library/documentation/api-reference/text-entry-question-model#titleLocation) and [`placeholder`](https://surveyjs.io/form-library/documentation/api-reference/text-entry-question-model#placeholder) properties.

## Files

### `public/index.html`

```html
<div id="app" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; height:100%"></div>
```

### `src/App.vue`

```html
<template>
    <SurveyComponent :model="survey" />
</template>
<script setup lang="ts">
    import { Model } from "survey-core";
    import { SurveyComponent } from "survey-vue3-ui";
    import "survey-core/survey-core.min.css";
    import { themeJson } from "./theme";
    import "./index.css";
    import { json } from "./json";

    const survey = new Model(json);
    survey.applyTheme(themeJson);
    survey.onComplete.add((sender, options) => {
        console.log(JSON.stringify(sender.data, null, 3));
    });
</script>
```

### `src/index.css`

```css
/* You can add your custom CSS here. */
```

### `src/json.ts`

```ts
export const json = {
 "title": "HOTEL BY THE SEA",
 "description": "1901 Thornridge Cir. Shiloh, Hawaii 81063 +1 (808) 555-0111",
 "logo": "https://api.surveyjs.io/private/Surveys/files?name=cd99ec15-4054-4e75-8e42-9edff605a5d4",
 "logoWidth": "auto",
 "logoHeight": "80",
 "completedHtml": "<div style=\"max-width:688px;text-align:center;margin: 16px auto;\">\n\n<div style=\"padding:0 24px;\">\n<h4>Thank you for choosing us.</h4>\n<br>\n<p>Dear {firstname-for-complete-page}, we're thrilled to have you on board and excited to be a part of your upcoming journey. Your reservation is confirmed, and we can't wait to make your travel experience exceptional.</p>\n</div>\n\n</div>\n",
 "pages": [
  {
   "name": "page1",
   "elements": [
    {
     "type": "text",
     "name": "check-in-date",
     "width": "37%",
     "minWidth": "256px",
     "titleLocation": "hidden",
     "description": "Check-in",
     "descriptionLocation": "underInput",
     "defaultValueExpression": "today()",
     "validators": [
      {
       "type": "expression",
       "text": "Check-in date cannot precede today's date.",
       "expression": "{check-in-date} >= today()"
      }
     ],
     "inputType": "date",
     "placeholder": "Check-in"
    },
    {
     "type": "text",
     "name": "check-out-date",
     "width": "37%",
     "minWidth": "256px",
     "startWithNewLine": false,
     "titleLocation": "hidden",
     "description": "Check-out",
     "descriptionLocation": "underInput",
     "defaultValueExpression": "today(1)",
     "validators": [
      {
       "type": "expression",
       "text": "Invalid date range: check-out date cannot precede check-in date.",
       "expression": "getDate({check-out-date}) >= getDate({check-in-date})"
      }
     ],
     "inputType": "date",
     "placeholder": "Check-out"
    },
    {
     "type": "dropdown",
     "name": "number-of-guests",
     "width": "26%",
     "minWidth": "192px",
     "startWithNewLine": false,
     "titleLocation": "hidden",
     "choices": [ 1, 2, 3, 4, 5, 6, 7, 8, 9,
      { "value": "10", "text": "10+" }
     ],
     "placeholder": "# of guests",
     "allowClear": false
    },
    {
     "type": "dropdown",
     "name": "room-type",
     "useDisplayValuesInDynamicTexts": false,
     "width": "74%",
     "minWidth": "256px",
     "titleLocation": "hidden",
     "choices": [
      {
       "value": "queen",
       "text": "Queen Room"
      },
      {
       "value": "king",
       "text": "King Room"
      },
      {
       "value": "deluxe-king",
       "text": "Deluxe King Room"
      },
      {
       "value": "superior-king",
       "text": "Superior King Room"
      }
     ],
     "placeholder": "Room type",
     "allowClear": false
    },
    {
     "type": "checkbox",
     "name": "non-smoking",
     "width": "26%",
     "minWidth": "192px",
     "startWithNewLine": false,
     "titleLocation": "hidden",
     "choices": [
      {
       "value": "true",
       "text": "Non-smoking"
      }
     ]
    },
    {
     "type": "image",
     "name": "king-room-image",
     "visibleIf": "{room-type} = 'king'",
     "width": "37%",
     "minWidth": "192px",
     "imageLink": "https://api.surveyjs.io/private/Surveys/files?name=31ba1c67-201e-458e-b30b-86b45ba25f40",
     "imageFit": "cover",
     "imageHeight": "224",
     "imageWidth": "1000"
    },
    {
     "type": "html",
     "name": "king-room-description",
     "visibleIf": "{room-type} = 'king'",
     "width": "63%",
     "minWidth": "256px",
     "startWithNewLine": false,
     "html": "<h4 style=\"padding-top:16px\">King Room</h4>\n<p style=\"padding-top:8px;font-size:14px;\">\nOur King Room offers spacious luxury with a king-sized bed for a great night's sleep. Stay connected with complimentary Wi-Fi, refresh in the private bathroom, and enjoy in-room entertainment with a flat-screen TV. Keep your favorite beverages cool in the mini-fridge, and start your day right with a coffee from the in-room coffee maker. The ideal retreat for your travels.\n</p>\n\n"
    },
    {
     "type": "image",
     "name": "deluxe-king-room-image",
     "visibleIf": "{room-type} = 'deluxe-king'",
     "width": "37%",
     "minWidth": "192px",
     "imageLink": "https://api.surveyjs.io/private/Surveys/files?name=4fc633b5-0ac3-48f5-9728-284446e72adf",
     "imageFit": "cover",
     "imageHeight": "224",
     "imageWidth": "1000"
    },
    {
     "type": "html",
     "name": "deluxe-king-room-description",
     "visibleIf": "{room-type} = 'deluxe-king'",
     "width": "63%",
     "minWidth": "256px",
     "startWithNewLine": false,
     "html": "<h4 style=\"padding-top:16px\">Deluxe King Room</h4>\n<p style=\"padding-top:8px;font-size:14px;\">\nElevate your stay in our Deluxe King Room. Experience ultimate comfort on a luxurious king-sized bed. Enjoy the convenience of complimentary Wi-Fi, a private bathroom, and entertainment on a flat-screen TV. Stay refreshed with a well-stocked mini-fridge and coffee maker. With added space and upscale amenities, this room offers a touch of luxury for a truly special stay.\n</p>\n\n"
    },
    {
     "type": "image",
     "name": "queen-room-image",
     "visibleIf": "{room-type} = 'queen'",
     "width": "37%",
     "minWidth": "192px",
     "imageLink": "https://api.surveyjs.io/private/Surveys/files?name=2e2bc916-6f2e-47ff-b321-74b34118a748",
     "imageFit": "cover",
     "imageHeight": "224",
     "imageWidth": "1000"
    },
    {
     "type": "html",
     "name": "queen-room-description",
     "visibleIf": "{room-type} = 'queen'",
     "width": "63%",
     "minWidth": "256px",
     "startWithNewLine": false,
     "html": "<h4 style=\"padding-top:16px\">Queen Room</h4>\n<p style=\"padding-top:8px;font-size:14px;\">\nExperience comfort and convenience in our Queen Room. Unwind on a cozy queen-sized bed, stay connected with complimentary Wi-Fi, and enjoy the convenience of a private bathroom. For your entertainment, there's a flat-screen TV. A mini-fridge and coffee maker are at your disposal for added convenience. Your perfect choice for a relaxing stay.\n</p>\n\n"
    },
    {
     "type": "image",
     "name": "superior-king-room-image",
     "visibleIf": "{room-type} = 'superior-king'",
     "width": "37%",
     "minWidth": "192px",
     "imageLink": "https://api.surveyjs.io/private/Surveys/files?name=e16770dd-818c-4847-8b7f-19ee527420c1",
     "imageFit": "cover",
     "imageHeight": "224",
     "imageWidth": "1000"
    },
    {
     "type": "html",
     "name": "superior-king-room-description",
     "visibleIf": "{room-type} = 'superior-king'",
     "width": "63%",
     "minWidth": "256px",
     "startWithNewLine": false,
     "html": "<h4 style=\"padding-top:16px\">Superior King Room</h4>\n<p style=\"padding-top:8px;font-size:14px;\">\nIndulge in the epitome of luxury in our Superior King Room. Experience ample space and opulence with a king-sized bed. Complimentary Wi-Fi keeps you connected, while the private bathroom and flat-screen TV provide comfort and entertainment. Enjoy the convenience of a well-equipped mini-fridge and coffee maker. This room is the top choice for a superior and memorable stay.\n</p>\n\n"
    },
    {
     "type": "dropdown",
     "name": "number-of-rooms",
     "width": "37%",
     "minWidth": "192px",
     "titleLocation": "hidden",
     "choices": [ 1, 2, 3, 4, 5 ],
     "placeholder": "# of rooms",
     "allowClear": false
    },
    {
     "type": "checkbox",
     "name": "with-pets",
     "width": "63%",
     "minWidth": "256px",
     "startWithNewLine": false,
     "titleLocation": "hidden",
     "choices": [
      {
       "value": "true",
       "text": "I am traveling with pets"
      }
     ]
    },
    {
     "type": "tagbox",
     "name": "extras",
     "width": "100%",
     "minWidth": "256px",
     "titleLocation": "hidden",
     "choices": [
        "Breakfast",
        "Fitness",
        "Parking",
        "Swimming pool",
        "Restaurant",
        "Spa"
     ],
     "placeholder": "Extras"
    },
    {
     "type": "comment",
     "name": "notes",
     "width": "100%",
     "minWidth": "256px",
     "titleLocation": "hidden",
     "placeholder": "Notes...",
     "autoGrow": true,
     "allowResize": false
    }
   ]
  },
  {
   "name": "page2",
   "elements": [
    {
     "type": "text",
     "name": "last-name",
     "width": "64%",
     "minWidth": "192px",
     "titleLocation": "hidden",
     "description": "Must match the passport exactly",
     "descriptionLocation": "underInput",
     "placeholder": "Last name"
    },
    {
     "type": "text",
     "name": "first-name",
     "width": "36%",
     "minWidth": "256px",
     "startWithNewLine": false,
     "titleLocation": "hidden",
     "placeholder": "First name"
    },
    {
     "type": "text",
     "name": "address-line-1",
     "width": "100%",
     "minWidth": "256px",
     "titleLocation": "hidden",
     "descriptionLocation": "underInput",
     "placeholder": "Address line 1"
    },
    {
     "type": "text",
     "name": "address-line-2",
     "width": "100%",
     "minWidth": "256px",
     "titleLocation": "hidden",
     "placeholder": "Address line 2"
    },
    {
     "type": "text",
     "name": "city",
     "width": "36%",
     "minWidth": "256px",
     "titleLocation": "hidden",
     "placeholder": "City"
    },
    {
     "type": "text",
     "name": "zip",
     "width": "28%",
     "minWidth": "192px",
     "startWithNewLine": false,
     "titleLocation": "hidden",
     "placeholder": "Zip code"
    },
    {
     "type": "text",
     "name": "state",
     "width": "36%",
     "minWidth": "256px",
     "startWithNewLine": false,
     "titleLocation": "hidden",
     "placeholder": "State"
    },
    {
     "type": "dropdown",
     "name": "country",
     "width": "36%",
     "minWidth": "256px",
     "titleLocation": "hidden",
     "choicesByUrl": {
      "url": "https://surveyjs.io/api/CountriesExample"
     },
     "placeholder": "Country",
     "allowClear": false
    },
    {
     "type": "text",
     "name": "phone",
     "width": "64%",
     "minWidth": "192px",
     "startWithNewLine": false,
     "titleLocation": "hidden",
     "description": "Example: +1 (555) 777-55-22",
     "descriptionLocation": "underInput",
     "placeholder": "Phone"
    }
   ]
  }
 ],
 "calculatedValues": [{
    "name": "firstname-for-complete-page",
    "expression": "iif({first-name} notempty, {first-name}, guests)"
 }],
 "showPrevButton": false,
 "questionErrorLocation": "bottom",
 "pagePrevText": "Booking Details",
 "pageNextText": "Traveler Info ➝",
 "completeText": "Book Now",
 "widthMode": "static",
 "width": "904"
};
```

### `src/main.ts`

```ts
import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);
app.mount("#app");
```

### `src/shims-vue.d.ts`

```ts
/* eslint-disable */
declare module "*.vue" {
    import type { DefineComponent } from "vue"
    const component: DefineComponent<{}, {}, any>
    export default component
}
```

### `src/theme.ts`

```ts
export const themeJson = {
    "backgroundImage": "https://api.surveyjs.io/private/Surveys/files?name=f431e65e-66fb-4ecc-9d56-e7ab74351181",
    "backgroundImageFit": "cover",
    "backgroundImageAttachment": "fixed",
    "backgroundOpacity": 1,
  "cssVariables": {
    "--sjs-general-backcolor": "rgba(255, 255, 255, 1)",
    "--sjs-general-backcolor-dark": "rgba(248, 248, 248, 1)",
    "--sjs-general-backcolor-dim": "#F1F4F6",
    "--sjs-general-backcolor-dim-light": "rgba(255, 255, 255, 1)",
    "--sjs-general-backcolor-dim-dark": "rgba(243, 243, 243, 1)",
    "--sjs-general-forecolor": "rgba(0, 0, 0, 0.91)",
    "--sjs-general-forecolor-light": "rgba(0, 0, 0, 0.45)",
    "--sjs-primary-backcolor": "#4B5D6D",
    "--sjs-primary-backcolor-light": "rgba(75, 93, 109, 0.1)",
    "--sjs-primary-backcolor-dark": "rgba(65, 80, 94, 1)",
    "--sjs-primary-forecolor": "rgba(255, 255, 255, 1)",
    "--sjs-primary-forecolor-light": "rgba(255, 255, 255, 0.25)",
    "--sjs-base-unit": "8px",
    "--sjs-corner-radius": "6px",
    "--sjs-shadow-small": "0px 0px 0px 1px rgba(0, 0, 0, 0.03), 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 8px 16px 0px rgba(0, 0, 0, 0.05)",
    "--sjs-shadow-medium": "0px 2px 6px 0px rgba(0, 0, 0, 0.1)",
    "--sjs-shadow-large": "0px 8px 16px 0px rgba(0, 0, 0, 0.1)",
    "--sjs-shadow-inner": "0px 0px 0px 1px rgba(0, 0, 0, 0.03), 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 8px 16px 0px rgba(0, 0, 0, 0.05)",
    "--sjs-border-light": "rgba(0, 0, 0, 0.1)",
    "--sjs-border-default": "rgba(0, 0, 0, 0.15)",
    "--sjs-border-inside": "rgba(0, 0, 0, 0.16)",
    "--sjs-special-red": "rgba(229, 10, 62, 1)",
    "--sjs-special-red-light": "rgba(229, 10, 62, 0.1)",
    "--sjs-special-red-forecolor": "rgba(255, 255, 255, 1)",
    "--sjs-special-green": "rgba(25, 179, 148, 1)",
    "--sjs-special-green-light": "rgba(25, 179, 148, 0.1)",
    "--sjs-special-green-forecolor": "rgba(255, 255, 255, 1)",
    "--sjs-special-blue": "rgba(67, 127, 217, 1)",
    "--sjs-special-blue-light": "rgba(67, 127, 217, 0.1)",
    "--sjs-special-blue-forecolor": "rgba(255, 255, 255, 1)",
    "--sjs-special-yellow": "rgba(255, 152, 20, 1)",
    "--sjs-special-yellow-light": "rgba(255, 152, 20, 0.1)",
    "--sjs-special-yellow-forecolor": "rgba(255, 255, 255, 1)",
    "--sjs-editorpanel-hovercolor": "rgba(241, 244, 246, 1)",
    "--sjs-font-editorfont-placeholdercolor": "rgba(0, 0, 0, 0.5)",
    "--sjs-font-editorfont-color": "rgba(0, 0, 0, 0.9)",
    "--sjs-font-questiontitle-color": "rgba(0, 0, 0, 0.9)",
    "--sjs-font-pagetitle-color": "rgba(0, 0, 0, 0.9)",
    "--sjs-questionpanel-hovercolor": "rgba(241, 244, 246, 1)",
    "--sjs-font-questiondescription-color": "rgba(0, 0, 0, 0.5)",
    "--sjs-font-surveytitle-size": "24px",
    "--sjs-font-questiontitle-weight": "400",
    "--sjs-font-headertitle-color": "rgba(0, 0, 0, 0.9)",
    "--sjs-font-headerdescription-color": "rgba(0, 0, 0, 0.5)",
    "--sjs-font-headertitle-size": "14px",
    "--sjs-header-backcolor": "transparent",
    "--sjs-font-headerdescription-size":  "14px",
    "--sjs-font-headertitle-weight":  "700",
    "--sjs-font-pagetitle-weight":  "700"
  },
    "isPanelless": true,
    "themeName": "default",
    "colorPalette": "light",
    "header": {
        "height": 120,
        "textAreaWidth": 280,
        "inheritWidthFrom": "survey",
        "logoPositionX": "left",
        "logoPositionY": "middle",
        "titlePositionX": "right",
        "titlePositionY": "middle",
        "descriptionPositionX": "right",
        "descriptionPositionY": "middle"
    },
    "headerView": "advanced"
};
```

### `.eslintrc.js`

```js
module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: [
        "plugin:vue/vue3-essential",
        "eslint:recommended",
        "@vue/typescript/recommended",
        "@vue/prettier",
        "@vue/prettier/@typescript-eslint"
    ],
    parserOptions: {
        ecmaVersion: 2020
    },
    rules: {
        "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
        "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
    },
    overrides: [
        {
            files: [
                "**/__tests__/*.{j,t}s?(x)",
                "**/tests/unit/**/*.spec.{j,t}s?(x)"
            ],
            env: {
                jest: true
            }
        }
    ]
};
```

### `babel.config.js`

```js
module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"]
};
```

### `package.json`

```json
{
  "name": "surveyjs-library-vue3",
  "version": "0.1.0",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "tslib": "2.6.1",
    "vue": "^3.4.1",
    "survey-core": "latest",
    "survey-vue3-ui": "latest",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-pwa": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "@vue/test-utils": "^2.0.0-0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^7.0.0-0",
    "node-sass": "^4.12.0",
    "prettier": "^1.19.1",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3"
  }
}
```

### `tsconfig.json`

```json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/form-library/examples/hotel-booking-form-template-free/angular.md)
- [React](https://surveyjs.io/form-library/examples/hotel-booking-form-template-free/reactjs.md)
- [jQuery](https://surveyjs.io/form-library/examples/hotel-booking-form-template-free/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/hotel-booking-form-template-free/vanillajs.md)