---
title: Dental Appointment Request
product: PDF Generator
description: Get a printable dental appointment request form in PDF. Create editable or prefilled patient request forms for your clinic using SurveyJS PDF Generator.
framework: Vue 3
source: https://surveyjs.io/pdf-generator/examples/pdf-healthcare-dental-appointment-request-template/vue3js
index: https://surveyjs.io/pdf-generator/examples/overview.md
---

# Dental Appointment Request (Vue 3)

## Files

### `public/index.html`

```html
<div style="display: flex;">
    <div id="app" style="flex: 1 1 0%; height: 100%; min-width: 0;"></div>
    <div id="pdf-preview" style="flex: 0.7 0.7 0%; display: none">
        <embed id="pdf-preview-frame" type="application/pdf" style="width:100%; height:100%;" />
    </div>
</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 { SurveyPDF } from "survey-pdf";
    import "./index.css";
    import { json } from "./json";

    function createSurveyPdfModel (surveyModel) {
        const surveyPDF = new SurveyPDF(json);
        if (surveyModel) {
            surveyPDF.data = surveyModel.data;
            surveyPDF.locale = surveyModel.locale;
            
            
        }
        
        return surveyPDF;
    }
    function saveSurveyToPdf (filename, surveyModel) {
        const pdfDoc = createSurveyPdfModel(surveyModel);
        if (!pdfDoc) return;
    
        pdfDoc.save(filename);
    }
    
    const previewDiv = document.getElementById("pdf-preview");
    const previewEmbed = document.getElementById("pdf-preview-frame");
    let pdfBlobUrl;
    
    function showPdfPreview(surveyModel) {
        if (!previewDiv || !previewEmbed) return;
    
        const pdfDoc = createSurveyPdfModel(surveyModel);
        if (!pdfDoc) return;
    
        pdfDoc.raw("blob").then((blob) => {
            if (pdfBlobUrl) {
                URL.revokeObjectURL(pdfBlobUrl);
            }
            pdfBlobUrl = URL.createObjectURL(blob);
            previewEmbed.setAttribute("src", pdfBlobUrl);
            previewDiv.style.display = "block";
        });
    }
    
    function previewPdf(surveyModel) {
        if (!previewDiv) return;
    
        if (previewDiv.style.display !== "none") {
            previewDiv.style.display = "none";
            return;
        }
    
        showPdfPreview(surveyModel);
    }
    
    const survey = new Model(json);
    survey.showCompleteButton = false;
    survey.navigationButtonsLocation = "topBottom";
    survey.addNavigationItem({
        id: "survey_save_as_file",
        title: "Download PDF",
        action: () => {
            saveSurveyToPdf("surveyResult.pdf", survey);
        }
    });
    survey.addNavigationItem({
        id: "survey_pdf_preview",
        title: "Preview PDF",
        visible: window.navigator.pdfViewerEnabled,
        action: () => {
            previewPdf(survey);
        }
    });
</script>
```

### `src/index.css`

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

### `src/json.ts`

```ts
export const json = {
  "title": "Dental Appointment Request",
  "description": "The first step towards a beautiful, healthy smile is to schedule an appointment. Please contact our office by phone or complete the appointment request form below. Our scheduling coordinator will contact you to confirm your appointment.",
  "pages": [
    {
      "name": "page-one",
      "elements": [
        {
          "type": "panel",
          "name": "personal",
          "title": "Personal Information",
          "questionTitleWidth": "170px",
          "questionTitleLocation": "left",
          "elements": [
            {
              "type": "text",
              "name": "first-name",
              "title": "First name",
              "isRequired": true
            },
            {
              "type": "text",
              "name": "middle-name",
              "title": "Middle name"
            },
            {
              "type": "text",
              "name": "last-name",
              "title": "Last name",
              "isRequired": true
            },
            {
              "type": "text",
              "name": "email",
              "title": "Email address",
              "isRequired": true,
              "inputType": "email",
              "autocomplete": "email",
              "placeholder": "example@gmail.com"
            },
            {
              "type": "text",
              "name": "phone",
              "title": "Contact phone",
              "isRequired": true,
              "inputType": "tel",
              "maskType": "pattern",
              "maskSettings": {
                "pattern": "+1(999) 999 999 99"
              }
            }
          ]
        },
        {
          "type": "boolean",
          "name": "first-visit",
          "title": "Is this your first visit to our clinic?"
        },
        {
          "type": "radiogroup",
          "name": "best-contact-times",
          "title": "Best Contact Times",
          "description": "If we need to reach, what would be the best time?",
          "choices": [
            {
              "value": "Morning",
              "text": "Morning (09:00-12:00)"
            },
            {
              "value": "Afternoon",
              "text": "Afternoon (12:00-17:00)"
            },
            {
              "value": "Evening",
              "text": "Evening (17:00-20:00)"
            }
          ]
        },
        {
          "type": "matrixdropdown",
          "name": "preferred-appointment-times",
          "title": "Preferred times(s) for an appointment?",
          "description": "Specify a preferred time for each day you selected",
          "columns": [
            {
              "name": "time",
              "title": "From",
              "cellType": "text",
              "inputType": "time",
              "min": "09:00",
              "max": "19:00"
            },
            {
              "name": "time-to",
              "title": "To",
              "cellType": "text",
              "inputType": "time"
            }
          ],
          "rows": [
            "Monday",
            "Tuesday",
            "Wednesday",
            "Thursday",
            "Friday",
            "Saturday"
          ],
          "allowAddRows": false,
          "allowRemoveRows": false
        },
        {
          "type": "boolean",
          "name": "insurance",
          "title": "Do you have dental insurance?",
          "isRequired": true
        },
        {
          "type": "panel",
          "name": "insurance-details",
          "title": "Insurance details",
          "description": "Complete the fields below corresponding to your dental insurance.",
          "elements": [
            {
              "type": "text",
              "name": "company-name",
              "title": "Company name"
            },
            {
              "type": "text",
              "name": "member-id",
              "startWithNewLine": false,
              "title": "Member ID"
            },
            {
              "type": "text",
              "name": "primary-policy-holder",
              "title": "Primary policy holder"
            },
            {
              "type": "text",
              "name": "date-of-birth",
              "startWithNewLine": false,
              "title": "Date of birth",
              "inputType": "date"
            }
          ]
        },
        {
          "type": "radiogroup",
          "name": "type-of-visit",
          "title": "Type of visit",
          "choices": [
            {
              "value": "checkup",
              "text": "Routine check-up and cleaning"
            },
            {
              "value": "emergency",
              "text": "Emergency"
            },
            {
              "value": "restorative",
              "text": "Restorative"
            }
          ]
        },
        {
          "type": "comment",
          "name": "describe-emergency",
          "title": "Describe your emergency (if applicable)",
          "maxLength": 200,
          "rows": 2,
          "autoGrow": true
        },
        {
          "type": "radiogroup",
          "name": "type-of-specialist",
          "title": "Which type of dental specialist are you looking to make an appointment with?",
          "choices": [
            "General Dentist",
            "Orthodontist",
            "Periodontist",
            "Endodontist",
            "Pediatric Dentist (Pedodontist)",
            "Prosthodontist",
            "Oral and Maxillofacial Surgeon"
          ],
          "colCount": 2
        }
      ]
    }
  ],
  "headerView": "advanced",
  "widthMode": "static",
  "width": "750px"
};
```

### `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 = {};
```

### `.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-pdf": "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/pdf-generator/examples/pdf-healthcare-dental-appointment-request-template/angular.md)
- [React](https://surveyjs.io/pdf-generator/examples/pdf-healthcare-dental-appointment-request-template/reactjs.md)
- [jQuery](https://surveyjs.io/pdf-generator/examples/pdf-healthcare-dental-appointment-request-template/jquery.md)
- [Vanilla JS](https://surveyjs.io/pdf-generator/examples/pdf-healthcare-dental-appointment-request-template/vanillajs.md)