---
title: Insurance Application Form
product: PDF Generator
description: Get a printable insurance application form in PDF. Create editable or prefilled insurance request forms with SurveyJS PDF Generator.
framework: Vue 3
source: https://surveyjs.io/pdf-generator/examples/template-insurance-application-form-template/vue3js
index: https://surveyjs.io/pdf-generator/examples/overview.md
---

# Insurance Application Form (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;
            
            
        }
        surveyPDF.questionsOnPageMode = "standard";
        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": "Insurance Application Form",
  "pages": [
    {
      "name": "Introduction",
      "elements": [
        {
          "type": "panel",
          "elements": [
            {
              "type": "html",
              "name": "insurance_intro",
              "html": "<p>Thank you for starting the process of applying for, or changing, your insurance cover. Here is what you need to know before completing this form.</p><br><p><strong>WHAT IS THIS FORM FOR?</strong></p><p>You can use this form to apply for, or change, the following types of insurance:</p><p><strong>Death only cover (sometimes called life insurance)</strong> - Provides a lump sum in the event of death or Terminal Illness. *</p><p><strong>Death & TPD cover</strong> - Provides a lump sum for death, Terminal Illness, or Total and Permanent Disability. *</p><p><strong>Income Protection cover</strong> - Provides a monthly income for up to 2 years if unable to work due to Sickness or Injury. *</p><p>* Subject to claim acceptance. More information is in our <a href=\"https://www.google.com/\">Insurance Guide</a>.</p><br><p><strong>HOW TO SUBMIT THE FORM?</strong></p><p>Return the completed form via email:</p><p><strong>Email:</strong> example@insurance.com</p><br><p><strong>HOW LONG DOES THE PROCESS TAKE?</strong></p><p>Processing time is approximately 4-6 weeks, subject to any supplementary statements.</p>"
            }
          ]
        }
      ]
    },
    {
      "name": "page2",
      "title": "A. Life Insured",
      "description": "Life insured to complete this section in full.",
      "elements": [
        {
          "type": "panel",
          "name": "panel1",
          "title": "Name",
          "elements": [
            {
              "type": "radiogroup",
              "name": "question2",
              "title": "Title",
              "choices": [
                "Mr.",
                "Mrs.",
                "Ms.",
                "Miss"
              ],
              "colCount": 2
            },
            {
              "type": "text",
              "name": "question3",
              "title": "Surname"
            },
            {
              "type": "text",
              "name": "question4",
              "startWithNewLine": false,
              "title": "Given name"
            }
          ]
        },
        {
          "type": "text",
          "name": "question5",
          "title": "Date of birth",
          "inputType": "date"
        },
        {
          "type": "radiogroup",
          "name": "gender",
          "startWithNewLine": false,
          "title": "Gender at birth",
          "choices": [
            {
              "value": "Item 1",
              "text": "Male"
            },
            {
              "value": "Item 2",
              "text": "Female"
            }
          ],
          "colCount": 2
        },
        {
          "type": "panel",
          "name": "panel2",
          "questionTitleWidth": "92px",
          "questionTitleLocation": "left",
          "title": "Residential Address",
          "elements": [
            {
              "type": "text",
              "name": "question7",
              "title": "No"
            },
            {
              "type": "text",
              "name": "question8",
              "startWithNewLine": false,
              "title": "Street"
            },
            {
              "type": "text",
              "name": "question9",
              "title": "State"
            },
            {
              "type": "text",
              "name": "question10",
              "startWithNewLine": false,
              "title": "Postal code"
            }
          ]
        },
        {
          "type": "panel",
          "name": "panel3",
          "questionTitleWidth": "92px",
          "questionTitleLocation": "left",
          "title": "Mailing Address",
          "description": "(if different to above)",
          "elements": [
            {
              "type": "text",
              "name": "question11",
              "title": "No"
            },
            {
              "type": "text",
              "name": "question12",
              "startWithNewLine": false,
              "title": "Street"
            },
            {
              "type": "text",
              "name": "question13",
              "title": "State"
            },
            {
              "type": "text",
              "name": "question14",
              "startWithNewLine": false,
              "title": "Postal code"
            }
          ]
        },
        {
          "type": "radiogroup",
          "name": "question1",
          "title": "We may need to contact you to clarify information you have provided in the application. Please nominate a preferred local contact time:",
          "choices": [
            {
              "value": "Item 1",
              "text": "8am - 11am"
            },
            {
              "value": "Item 2",
              "text": "11am - 2pm"
            },
            {
              "value": "Item 3",
              "text": "2pm - 5pm"
            }
          ]
        },
        {
          "type": "panel",
          "name": "panel4",
          "questionTitleWidth": "100px",
          "questionTitleLocation": "left",
          "title": "Contact Details",
          "elements": [
            {
              "type": "text",
              "name": "question15",
              "title": "Home phone"
            },
            {
              "type": "text",
              "name": "question16",
              "startWithNewLine": false,
              "title": "Work phone"
            },
            {
              "type": "text",
              "name": "question17",
              "title": "Mobile"
            },
            {
              "type": "text",
              "name": "question18",
              "startWithNewLine": false,
              "title": "E-mail",
              "inputType": "email",
              "autocomplete": "email"
            }
          ]
        },
        {
          "type": "boolean",
          "name": "citizen-resident",
          "title": "Are you an American citizen or a permanent resident of the U.S.?"
        },
        {
          "type": "boolean",
          "name": "permanent-residency",
          "title": "Are you applying for or intending to apply for permanent residency in the U.S.?",
          "description": "Complete this question only if you are not a U.S. citizen or permanent resident."
        },
        {
          "type": "panel",
          "name": "panel5",
          "questionTitleWidth": "92px",
          "questionTitleLocation": "left",
          "title": "Visa Type and Expiry",
          "description": "Please provide your visa type and expiry date, if applicable.",
          "elements": [
            {
              "type": "text",
              "name": "question19",
              "title": "Type of visa"
            },
            {
              "type": "text",
              "name": "question20",
              "startWithNewLine": false,
              "title": "Expiry date",
              "errorLocation": "bottom",
              "inputType": "date"
            }
          ]
        }
      ]
    },
    {
      "name": "page1",
      "title": "B. Type of Insurance",
      "elements": [
        {
          "type": "radiogroup",
          "name": "question21",
          "title": "Please select",
          "minWidth": "auto",
          "choices": [
            "New",
            "Increase"
          ]
        },
        {
          "type": "radiogroup",
          "name": "insurance-type",
          "title": "Please select",
          "minWidth": "auto",
          "choices": [
            "Death Only",
            "Death & TPD",
            "Income Protection"
          ],
          "startWithNewLine": false
        },
        {
          "type": "text",
          "name": "question22",
          "startWithNewLine": false,
          "title": "Amount (in US dollars)",
          "minWidth": "auto",
          "maskType": "currency",
          "maskSettings": {
            "allowNegativeValues": false,
            "prefix": "$"
          }
        },
        {
          "type": "radiogroup",
          "name": "question23",
          "title": "Benefit Period",
          "description": "Complete this field only if you selected Income Protection as the insurance type.",
          "showOtherItem": true,
          "otherText": "Other - please specify # of years",
          "choices": [
            "2 years (to age 65 if earlier)"
          ]
        },
        {
          "type": "radiogroup",
          "name": "question24",
          "title": "Waiting Period",
          "description": "Complete this field only if you selected Income Protection as the insurance type.",
          "showOtherItem": true,
          "otherText": "Other - please specify # of days",
          "choices": [
            "30 days",
            "60 days",
            "90 days"
          ],
          "startWithNewLine": false
        }
      ]
    },
    {
      "name": "page3",
      "title": "C. Personal History",
      "description": "Life insured to complete this section in full.",
      "elements": [
        {
          "type": "boolean",
          "name": "another-insurer",
          "title": "Do you have, or are you applying for life, disability or trauma insurance on your life (including pending applications with any other insurer)?"
        },
        {
          "type": "paneldynamic",
          "name": "question26",
          "title": "Please complete policy details below.",
          "description": "Complete only if Yes above.",
          "panelsState": "firstExpanded",
          "templateTitle": "Insurer #{panelIndex}",
          "templateElements": [
            {
              "name": "policy-number",
              "title": "Policy Number",
              "type": "text"
            },
            {
              "name": "commencing-date",
              "title": "Commencing Date",
              "type": "text",
              "inputType": "date",
              "startWithNewLine": false
            },
            {
              "name": "policy-owner",
              "title": "Policy Owner",
              "type": "text"
            },
            {
              "name": "insurer",
              "title": "Insurer",
              "type": "text",
              "startWithNewLine": false
            },
            {
              "name": "type-of-cover",
              "title": "Type of Cover",
              "type": "radiogroup",
              "choices": [
                "Death Only",
                "Death & TPD",
                "Income Protection"
              ],
              "colCount": 0
            },
            {
              "name": "amount-of-cover",
              "title": "Amount of Cover",
              "type": "text",
              "maskType": "currency",
              "maskSettings": {
                "prefix": "$"
              },
              "startWithNewLine": false
            },
            {
              "name": "existing-income-protection",
              "title": "Existing Income Protection",
              "type": "text",
              "description": "Waiting Period # days; Benefit Period # years",
              "descriptionLocation": "underInput"
            },
            {
              "name": "to-be-replaced",
              "title": "To Be Replaced",
              "type": "boolean",
              "startWithNewLine": false
            }
          ],
          "panelCount": 3,
          "addPanelText": "Add insurer"
        },
        {
          "type": "boolean",
          "name": "ever-declined",
          "title": "Have you ever been declined, deferred or accepted on special terms for life, disability or trauma insurance?",
          "showCommentArea": true,
          "commentText": "If Yes, please provide details."
        },
        {
          "type": "boolean",
          "name": "even-claimed",
          "title": "Have you ever claimed benefits from any source (excluding unemployment), e.g., Accident, Sickness, Workers Compensation, Social Security, Disability Income Insurance or Pension?",
          "showCommentArea": true,
          "commentText": "If Yes, please provide details."
        },
        {
          "type": "boolean",
          "name": "tobacco",
          "title": "In the last 12 months, have you smoked tobacco or any other substance such as cigarettes, cigars, pipes, or used e-cigarettes or other nicotine products?"
        },
        {
          "type": "comment",
          "name": "question29",
          "title": "Please state the substance and daily quantity",
          "description": "Complete only if tobacco/nicotine used in last 12 months. 'Packet' is insufficient detail.",
          "rows": 2,
          "autoGrow": true
        },
        {
          "type": "boolean",
          "name": "alcohol",
          "title": "Do you drink alcohol?"
        },
        {
          "type": "text",
          "name": "question27",
          "title": "Please state how many standard drinks you consume per week on average (1 standard drink = 30ml spirits, 100ml wine, 285ml beer)",
          "description": "Complete only if you indicated alcohol consumption."
        },
        {
          "type": "boolean",
          "name": "illicit-drugs",
          "title": "Have you ever used illicit drugs or received advice, treatment or counselling for alcohol or illicit drug use?",
          "showCommentArea": true,
          "commentText": "If Yes, please provide details."
        },
        {
          "type": "text",
          "name": "question30",
          "title": "What is your height?",
          "titleLocation": "left",
          "maskType": "numeric",
          "maskSettings": { "min": 0 },
          "placeholder": "cm"
        },
        {
          "type": "text",
          "name": "question32",
          "startWithNewLine": false,
          "title": "What is your weight?",
          "titleLocation": "left",
          "maskType": "numeric",
          "placeholder": "kg"
        },
        {
          "type": "boolean",
          "name": "travel",
          "title": "Do you have definite plans to travel or reside overseas?"
        },
        {
          "type": "matrixdynamic",
          "name": "question33",
          "title": "Please state",
          "description": "Complete only if you indicated plans to travel/reside overseas",
          "columns": [
            {
              "name": "Column 1",
              "title": "Countries",
              "cellType": "text"
            },
            {
              "name": "Column 2",
              "title": "Duration of travel in days",
              "cellType": "text",
              "inputType": "number"
            },
            {
              "name": "Column 3",
              "title": "Frequency of travel",
              "cellType": "text"
            },
            {
              "name": "Column 4",
              "title": "Reason for travel",
              "cellType": "comment",
              "rows": 1
            },
            {
              "name": "Column 5",
              "title": "Date of departure",
              "cellType": "text",
              "inputType": "date"
            }
          ],
          "rowCount": 3,
          "addRowText": "Add destination"
        },
        {
          "type": "boolean",
          "name": "activities",
          "title": "Do you engage in or intend to engage in any hazardous activity listed (abseiling, aviation, football, sailing, hang gliding, scuba diving, motor racing, parachuting, powerboat racing, mountaineering, martial arts, etc.)?"
        },
        {
          "type": "html",
          "name": "question48",
          "html": "If you engage in listed hazardous activities, please request and fill in <b>Appendix G</b> (Aviation or Activities/Pursuits Questionnaire)."
        }
      ]
    },
    {
      "name": "page4",
      "title": "D. Family History",
      "description": "Life insured to complete this section in full.",
      "elements": [
        {
          "type": "panel",
          "name": "panel6",
          "title": "Family History",
          "elements": [
            {
              "type": "boolean",
              "name": "family-history-question",
              "title": "Have any of your immediate family (father, mother, brother, sister), prior to the age of 60 (living or deceased), experienced heart disease, stroke, cancer, kidney disease, diabetes, Huntington's chorea, Alzheimer's, Dementia, Motor neurone disease, Multiple sclerosis, Muscular dystrophy, Parkinson's or other hereditary disease?"
            },
            {
              "type": "matrixdynamic",
              "name": "question35",
              "title": "Please provide details in the table below.",
              "description": "Complete if applicable.",
              "columns": [
                {
                  "name": "Column 1",
                  "title": "Relative",
                  "cellType": "radiogroup",
                  "choices": [
                    "Father",
                    "Mother",
                    "Brother",
                    "Sister"
                  ]
                },
                {
                  "name": "Column 2",
                  "title": "Condition/Illness (specify type for heart disease or cancer)",
                  "cellType": "text"
                },
                {
                  "name": "Column 3",
                  "title": "Age at onset (approx.)",
                  "cellType": "text",
                  "inputType": "number"
                },
                {
                  "name": "Column 4",
                  "title": "Age at death (if applicable)",
                  "cellType": "text",
                  "inputType": "number"
                }
              ],
              "rowCount": 3,
              "addRowText": "Add relative"
            }
          ]
        },
        {
          "type": "panel",
          "name": "panel7",
          "title": "Sexual Health",
          "elements": [
            {
              "type": "matrixdropdown",
              "name": "question36",
              "title": "In the last 5 years, have you had sexual intercourse without a condom with the following persons?",
              "showHeader": false,
              "alternateRows": true,
              "columns": [
                {
                  "name": "Column 1",
                  "cellType": "boolean"
                }
              ],
              "rows": [
                {
                  "value": "Row 1",
                  "text": "Someone who might have exposed you to HIV (including unprotected sexual intercourse with a partner whose HIV status is unknown)."
                },
                {
                  "value": "Row 2",
                  "text": "Someone who injects non-prescribed drugs."
                },
                {
                  "value": "Row 3",
                  "text": "Someone who is a sex worker."
                },
                {
                  "value": "Row 4",
                  "text": "Someone infected with HIV."
                },
                {
                  "value": "Row 5",
                  "text": "Someone infected with Hepatitis B (answer 'No' if vaccinated and immune)."
                },
                {
                  "value": "Row 6",
                  "text": "Someone infected with Hepatitis C."
                }
              ],
              "rowTitleWidth": "70%"
            },
            {
              "type": "boolean",
              "name": "question37",
              "title": "In the last 5 years, have you been diagnosed with or experienced symptoms of sexually transmitted infections (STIs) (e.g., chlamydia, gonorrhoea, syphilis)?"
            }
          ]
        }
      ]
    },
    {
      "name": "page5",
      "title": "E. Medical and Health History",
      "description": "Life insured to complete this section in full.",
      "elements": [
        {
          "type": "panel",
          "name": "panel8",
          "questionTitleWidth": "70%",
          "questionTitleLocation": "left",
          "title": "Have you ever experienced symptoms of, or had, or been told you have, or received advice, investigation, or treatment for any of the following?",
          "elements": [
            {
              "type": "boolean",
              "name": "d-1-a",
              "title": "(a) High blood pressure, chest pains, high cholesterol, heart murmurs, rheumatic fever, heart complaint or stroke."
            },
            {
              "type": "boolean",
              "name": "d-1-b",
              "title": "(b) Asthma, chronic lung disease, sleep apnoea, COVID-19 (exclude negative test) or other respiratory disorder."
            },
            {
              "type": "boolean",
              "name": "d-1-c",
              "title": "(c) Indigestion, gastric/duodenal ulcer, or bowel disorder."
            },
            {
              "type": "boolean",
              "name": "d-1-d",
              "title": "(d) Depression, anxiety/stress, fatigue, panic attacks, psychiatric treatment/counselling, mental illness or nervous disorder."
            },
            {
              "type": "boolean",
              "name": "d-1-e",
              "title": "(e) Epilepsy, paralysis, migraines, tinnitus, dizziness, recurrent headaches, or other neurological disorder including multiple sclerosis."
            },
            {
              "type": "boolean",
              "name": "d-1-f",
              "title": "(f) Arthritis, repetitive strain injury (RSI), fibromyalgia."
            },
            {
              "type": "boolean",
              "name": "d-1-g",
              "title": "(g) Back or neck complaint, whiplash, sciatica, or other joint, bone or muscle disorder (excluding arthritis)."
            },
            {
              "type": "boolean",
              "name": "d-1-h",
              "title": "(h) Psoriasis or eczema, skin disorder, defect in hearing or sight."
            },
            {
              "type": "boolean",
              "name": "d-1-i",
              "title": "(i) Diabetes, abnormal blood sugar, gout or thyroid disorder."
            },
            {
              "type": "html",
              "name": "d-1-additional-forms",
              "html": "As you answered 'Yes' to some of the above, please request and complete a questionnaire for each condition <b>(Appendixes H to L)</b>."
            },
            {
              "type": "boolean",
              "name": "d-1-j",
              "title": "(j) Cancer, cyst, lump, tumour, or growth of any kind, including skin cancer (melanoma, BCC, SCC) or skin lesions/moles that have changed."
            },
            {
              "type": "boolean",
              "name": "d-1-k",
              "title": "(k) Liver disorder (including fatty liver), pancreas, prostate, kidney or bladder disorder, renal colic or stone."
            },
            {
              "type": "boolean",
              "name": "d-1-l",
              "title": "(l) Blood disorder, anaemia, haemochromatosis, haemophilia, or leukaemia."
            },
            {
              "type": "boolean",
              "name": "d-1-m",
              "title": "(m) Hepatitis B/C (including carrier), HIV, AIDS."
            },
            {
              "type": "boolean",
              "name": "d-1-n",
              "title": "(n) Are you pregnant?",
              "description": "Complete this question if you are female."
            },
            {
              "type": "text",
              "name": "d-1-due-date",
              "title": "Estimated due date, if applicable.",
              "inputType": "date"
            },
            {
              "type": "html",
              "name": "d-1-advised",
              "html": "Have you ever had or been advised to have treatment for:"
            },
            {
              "type": "boolean",
              "name": "d-1-o",
              "title": "(o) Breast Health History",
              "description": "Include any treatment for breast lump or abnormal mammogram/ultrasound."
            },
            {
              "type": "boolean",
              "name": "d-1-p",
              "title": "(p) Cervical and Ovarian Health History",
              "description": "Include abnormal Pap smear, HPV, or ovarian abnormalities."
            },
            {
              "type": "boolean",
              "name": "d-1-q",
              "title": "(q) Gynecological Health History",
              "description": "Include abnormal vaginal bleeding in past 12 months or endometriosis."
            }
          ]
        },
        {
          "type": "matrixdropdown",
          "name": "question6",
          "title": "For each 'Yes' answer in questions (j)-(m) above, provide full details below.",
          "columns": [
            {
              "name": "Column 1",
              "title": "Illness, Injury or Tests",
              "cellType": "text"
            },
            {
              "name": "Column 2",
              "title": "Date of Illness/Injury",
              "cellType": "text",
              "inputType": "date"
            },
            {
              "name": "Column 3",
              "title": "Time off Work",
              "cellType": "text"
            },
            {
              "name": "Column 4",
              "title": "Degree of Recovery %",
              "cellType": "text",
              "inputType": "number"
            },
            {
              "name": "Column 5",
              "title": "Results of Tests",
              "cellType": "text"
            },
            {
              "name": "Column 6",
              "title": "Reason and type of treatment including date of last symptoms",
              "cellType": "comment",
              "rows": 1
            },
            {
              "name": "Column 7",
              "title": "Full name and address of doctor or hospital (if any)",
              "cellType": "comment",
              "rows": 1
            }
          ],
          "rows": [
            { "value": "Row 1", "text": "(j)" },
            { "value": "Row 2", "text": "(k)" },
            { "value": "Row 3", "text": "(l)" },
            { "value": "Row 4", "text": "(m)" }
          ],
          "rowTitleWidth": "10px"
        },
        {
          "type": "boolean",
          "name": "question58",
          "title": "Have you ever experienced symptoms of or had any other illness, disease or disorder?"
        },
        {
          "type": "panel",
          "name": "panel9",
          "questionTitleWidth": "70%",
          "questionTitleLocation": "left",
          "title": "In the last 5 years have you:",
          "elements": [
            {
              "type": "boolean",
              "name": "question59",
              "title": "Had any medical examinations, consultations, X-rays, pathology tests or procedures?"
            },
            {
              "type": "boolean",
              "name": "question60",
              "title": "Occasionally or regularly taken any stimulants, sedatives, medications or prescribed drugs?"
            }
          ]
        },
        {
          "type": "boolean",
          "name": "question61",
          "title": "Are you currently under ongoing monitoring, consultation or review for any condition, complaint or finding?"
        },
        {
          "type": "boolean",
          "name": "question62",
          "title": "Are you currently considering or have you been advised/referred to undergo further treatment, investigation or procedure?"
        }
      ]
    },
    {
      "name": "page6",
      "title": "F. Doctor's Details",
      "description": "Life insured to complete this section in full.",
      "elements": [
        {
          "type": "panel",
          "name": "panel10",
          "questionTitleWidth": "130px",
          "questionTitleLocation": "left",
          "title": "Details of your personal doctor",
          "description": "If no personal doctor, please state name/address of last doctor or medical centre you attended.",
          "elements": [
            { "type": "text", "name": "question34", "title": "Name:" },
            { "type": "text", "name": "question38", "title": "Address:" },
            {
              "type": "text",
              "name": "question46",
              "startWithNewLine": false,
              "title": "Zip code:"
            },
            {
              "type": "text",
              "name": "question39",
              "title": "Phone:"
            },
            { "type": "text", "name": "question40", "startWithNewLine": false, "title": "Email (if known):" }
          ]
        },
        {
          "type": "text",
          "name": "question41",
          "title": "Date of last consultation?",
          "description": "Approximate date if unknown.",
          "inputType": "date"
        },
        {
          "type": "text",
          "name": "since-date",
          "startWithNewLine": false,
          "title": "Since when have you attended the surgery/practice?",
          "description": "Approximate date if unknown.",
          "inputType": "date"
        },
        {
          "type": "panel",
          "name": "panel11",
          "questionTitleWidth": "130px",
          "questionTitleLocation": "left",
          "title": "Previous personal doctor or medical center (if applicable)",
          "elements": [
            { "type": "text", "name": "question42", "title": "Name:" },
            { "type": "text", "name": "question43", "title": "Address:" },
            {
              "type": "text",
              "name": "question47",
              "startWithNewLine": false,
              "title": "Zip code:"
            },
            {
              "type": "text",
              "name": "question44",
              "title": "Phone:"
            },
            { "type": "text", "name": "question45", "startWithNewLine": false, "title": "Email (if known):" }
          ]
        }
      ]
    },
    {
      "name": "page7",
      "title": "G. Present Occupation",
      "description": "Life insured to complete this section in full.",
      "elements": [
        { "type": "text", "name": "question49", "title": "Usual occupation" },
        {
          "type": "boolean",
          "name": "manual-work",
          "title": "Do you perform any manual work?"
        },
        {
          "type": "matrixdropdown",
          "name": "question51",
          "title": "Duties and Time Allocation",
          "description": "Please describe your manual work duties and percentage of time spent on each, if applicable.",
          "columns": [
            { "name": "Column 2", "title": "% of time", "cellType": "text", "width": "50px" },
            { "name": "Column 3", "title": "Specific duties and location", "cellType": "comment", "rows": 1 }
          ],
          "rows": [
            { "value": "Row 1", "text": "Sedentary" },
            { "value": "Row 2", "text": "Light manual" },
            { "value": "Row 3", "text": "Heavy manual" }
          ],
          "rowTitleWidth": "110px"
        },
        {
          "type": "text",
          "name": "question52",
          "title": "Annual income",
          "maskType": "currency",
          "maskSettings": { "prefix": "$" }
        },
        {
          "type": "radiogroup",
          "name": "question53",
          "title": "Hours currently working per week",
          "choices": [
            { "value": "Item 1", "text": "Zero" },
            { "value": "Item 2", "text": "1-14 hours" },
            { "value": "Item 3", "text": "15-60 hours" }
          ],
          "showOtherItem": true,
          "otherText": ">60 hours - please specify number of hours",
          "colCount": 2
        }
      ]
    }
  ],
  "checkErrorsMode": "onValueChanged",
  "questionsOnPageMode": "singlePage",
  "headerView": "advanced"
};
```

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