---
title: Customize the Tab Bar
product: Survey Creator
description: With SurveyJS you can easily modify the tab bar to make it more convenient for your end users. For example, you can hide or show the existing tabs, remove them, or add new ones. View a free demo for JavaScript.
framework: Vue 3
source: https://surveyjs.io/survey-creator/examples/modify-tab-bar/vue3js
index: https://surveyjs.io/survey-creator/examples/overview.md
---

# Customize the Tab Bar (Vue 3)

SurveyJS offers the flexibility to add, remove, and modify tabs in its Form Builder UI to implement additional functionality as needed. In this example, we demonstrate how to manage built-in tabs and create a custom "Survey Templates" tab that enables survey authors to quickly load boilerplate surveys into Survey Creator for further customization.

## Manage Built-In Survey Creator Tabs

Survey Creator includes six built-in tabs. To specify the visibility of each tab, use a dedicated configuration property:

- [`showDesignerTab`](https://surveyjs.io/survey-creator/documentation/api-reference/icreatoroptions#showDesignerTab)
- [`showPreviewTab`](https://surveyjs.io/survey-creator/documentation/api-reference/icreatoroptions#showPreviewTab)
- [`showJSONEditorTab`](https://surveyjs.io/survey-creator/documentation/api-reference/icreatoroptions#showJSONEditorTab)
- [`showLogicTab`](https://surveyjs.io/survey-creator/documentation/api-reference/icreatoroptions#showLogicTab)
- [`showTranslationTab`](https://surveyjs.io/survey-creator/documentation/api-reference/icreatoroptions#showTranslationTab)
- [`showThemeTab`](https://surveyjs.io/survey-creator/documentation/api-reference/icreatoroptions#showThemeTab)

By default, the Designer, Preview, Logic, and JSON Editor tabs are visible, while the Translations and Themes tabs are hidden. In this demo, the Translations tab is made visible by setting the `showTranslationTab` property to `true`.

## Add a Custom Survey Creator Tab

If you want to add a custom tab to Survey Creator, follow the instructions below:

1. Implement a custom component that renders tab markup.        
In this demo, the component renders buttons that load different JSON schemas into Survey Creator.

1. Register your component under a custom name in the component collection.      
    In HTML/CSS/JavaScript projects, register the component in `ReactElementFactory` as shown in the `index.js` file.           
    In React, register the component in `ReactElementFactory` as shown in the `SurveyCreatorComponent.jsx` file.          
    In Angular, register the component in `AngularComponentFactory` as shown in the `survey-templates-tab.component.ts` file.          
    In Vue.js, use [techniques native to this framework](https://vuejs.org/guide/components/registration).

2. Configure a tab plugin.      
A tab plugin is an object that allows you to handle user interactions with a tab. The tab plugin object must specify the `activate` and `deactivate` functions. They are executed when users switch to or from the tab and allow you to handle and cancel the switch if necessary. In this demo, `activate` is empty, and `deactivate` always returns `true`, which means that they do not interfere with user interactions in any way.

1. Register a custom tab.        
Call the [`addTab(tabOptions)`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#addTab) method on a `SurveyCreatorModel` instance to register a custom tab.

## Files

### `public/index.html`

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

### `src/SurveyTemplatesTab.vue`

```html
<template>
    <div style="padding: 7px">
        <div v-for="template in surveyTemplates">
            <div style="padding: 7px">
                <button
                    class="sd-action sd-action--brand sd-action--primary sd-action--large sd-action--border"
                    @click="loadTemplate(template)">
                    <span class="sd-action__title">
                        Load {{ template.name }}
                    </span>
                </button>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import type { SurveyCreatorModel } from "survey-creator-core";
import { npsJson, jobApplicationJson } from "./survey_json";

interface ISurveyTemplate {
    name: string;
    json: any;
}

const props = defineProps<{
  model: SurveyCreatorModel;
}>();


const surveyTemplates: Array<ISurveyTemplate> = [{
    name: "NPS Survey",
    json: npsJson
}, {
    name: "Job Application Form",
    json: jobApplicationJson
}, {
    name: "Empty Survey",
    json: {}
}];

function loadTemplate (template: ISurveyTemplate) {
    props.model.JSON = template.json;
    props.model.switchTab("designer");
}
</script>
```

### `src/survey_json.js`

```js
export const npsJson = {
  "title": "NPS Survey Question",
  "logo": "https://surveyjs.io/Content/Images/examples/logo.png",
  "logoHeight": "60px",
  "logoFit": "cover",
  "pages": [
    {
      "name": "page1",
      "elements": [
        {
          "type": "rating",
          "name": "nps_score",
          "title": "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
          "isRequired": true,
          "rateMin": 0,
          "rateMax": 10,
          "minRateDescription": "(Most unlikely)",
          "maxRateDescription": "(Most likely)"
        },
        {
          "type": "checkbox",
          "name": "promoter_features",
          "visibleIf": "{nps_score} >= 9",
          "title": "Which of the following features do you value the most?",
          "description": "Please select no more than three features.",
          "isRequired": true,
          "validators": [
            {
              "type": "answercount",
              "text": "Please select no more than three features.",
              "maxCount": 3
            }
          ],
          "showOtherItem": true,
          "choices": [
            "Performance",
            "Stability",
            "User interface",
            "Complete functionality",
            "Learning materials (documentation, demos, code examples)",
            "Quality support"
          ],
          "otherText": "Other features:",
          "colCount": 2
        },
        {
          "type": "comment",
          "name": "passive_experience",
          "visibleIf": "{nps_score} >= 7  and {nps_score} <= 8",
          "title": "What can we do to make your experience more satisfying?"
        },
        {
          "type": "comment",
          "name": "disappointing_experience",
          "visibleIf": "{nps_score} <= 6",
          "title": "Please let us know why you had such a disappointing experience with our product"
        }
      ]
    }
  ],
  "completedHtml": "<h3>Thank you for your feedback</h3>",
  "completedHtmlOnCondition": [
    {
      "expression": "{nps_score} >= 9",
      "html": "<h3>Thank you for your feedback</h3> <h4>We are glad that you love our product. Your ideas and suggestions will help us make it even better.</h4>"
    },
    {
      "expression": "{nps_score} >= 6  and {nps_score} <= 8",
      "html": "<h3>Thank you for your feedback</h3> <h4>We are glad that you shared your ideas with us. They will help us make our product better.</h4>"
    }
  ]
};
export const jobApplicationJson = {
  "title": "Job Application Form",
  "description": "Thank you for your interest in working with us. Please fill out the form and send your application. We will get back to you within a week.",
  "logo": "https://surveyjs.io/Content/Images/examples/logo.png",
  "questionErrorLocation": "bottom",
  "logoHeight": "60px",
  "logoFit": "cover",
  "elements": [
    {
      "type": "panel",
      "name": "personal-info",
      "title": "Personal Information",
      "elements": [
        {
          "type": "text",
          "name": "first-name",
          "title": "First name",
          "isRequired": true
        },
        {
          "type": "text",
          "name": "last-name",
          "startWithNewLine": false,
          "title": "Last name",
          "isRequired": true
        },
        {
          "type": "text",
          "name": "birthdate",
          "title": "Date of birth",
          "inputType": "date",
          "isRequired": true
        }
      ]
    },
    {
      "type": "panel",
      "name": "location",
      "title": "Your Location",
      "elements": [
        {
          "type": "dropdown",
          "name": "country",
          "title": "Country",
          "choicesByUrl": {
            "url": "https://surveyjs.io/api/CountriesExample"
          }
        },
        {
          "type": "text",
          "name": "city",
          "title": "City/Town"
        },
        {
          "type": "text",
          "name": "zip",
          "startWithNewLine": false,
          "title": "Zip code",
          "inputType": "number",
          "validators": [
            {
              "type": "numeric"
            }
          ]
        },
        {
          "type": "text",
          "name": "address",
          "title": "Street address"
        }
      ]
    },
    {
      "type": "text",
      "name": "email",
      "title": "Email",
      "inputType": "email",
      "placeholder": "mail@example.com"
    },
    {
      "type": "text",
      "name": "salary",
      "title": "Expected salary (in US dollars)",
      "inputType": "number",
      "validators": [
        {
          "type": "numeric"
        }
      ]
    },
    {
      "type": "dropdown",
      "name": "position",
      "title": "What position are you applying for?",
      "choices": [
        {
          "value": "frontend",
          "text": "Frontend Developer"
        },
        {
          "value": "backend",
          "text": "Backend Developer"
        },
        {
          "value": "fullstack",
          "text": "Full-Stack Developer"
        },
        {
          "value": "intern",
          "text": "Intern"
        }
      ]
    },
    {
      "type": "text",
      "name": "start-date",
      "title": "Date available to start work",
      "isRequired": true,
      "inputType": "date"
    },
    {
      "type": "file",
      "name": "resume",
      "title": "Upload your resume",
      "acceptedTypes": "application/pdf"
    }
  ],
  "completeText": "Send",
  "widthMode": "static",
  "width": "800px"
};
```

### `src/App.vue`

```html
<template>
    <SurveyCreatorComponent :model="creator" />
</template>
<script setup lang="ts">
    import { SurveyCreatorModel } from "survey-creator-core";
    import { SurveyCreatorComponent } from "survey-creator-vue";
    //
    import "survey-core/survey.i18n";
    import "survey-creator-core/survey-creator-core.i18n";
    import "survey-core/survey-core.css";
    import "survey-creator-core/survey-creator-core.css";
    import "./index.css";
    import SurveyTheme from "survey-core/themes";
    import { registerCreatorTheme } from "survey-creator-core";

    registerCreatorTheme(SurveyTheme); // Add predefined Survey Creator UI themes

    class SurveyTemplatesTabPlugin implements ICreatorPlugin {
        constructor(private creator: SurveyCreatorModel) {
            this.model = creator;
            // Add the `svc-tab-survey-templates` plugin as the first tab
            creator.addTab({
                name: "survey-templates",
                plugin: this,
                title: "Survey Templates",
                componentName: "svc-tab-survey-templates",
                index: 0
            });
        }
        public model: SurveyCreatorModel;
    
        // Do nothing when the tab is activated or deactivated
        public activate(): void { }
        public deactivate(): boolean {
            return true;
        }
    }
    
    const creator = new SurveyCreatorModel({ showTranslationTab: true });
    new SurveyTemplatesTabPlugin(creator);
    creator.activeTab = "survey-templates";
</script>
```

### `src/index.css`

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

### `src/main.ts`

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

const app = createApp(App);
app.component("svc-tab-survey-templates", SurveyTemplatesTab);
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
}
```

### `.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",
    "survey-creator-core": "latest",
    "survey-creator-vue": "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/survey-creator/examples/modify-tab-bar/angular.md)
- [React](https://surveyjs.io/survey-creator/examples/modify-tab-bar/reactjs.md)
- [jQuery](https://surveyjs.io/survey-creator/examples/modify-tab-bar/jquery.md)
- [Vanilla JS](https://surveyjs.io/survey-creator/examples/modify-tab-bar/vanillajs.md)