---
title: Customize the Toolbar
product: Survey Creator
description: Enhance Survey Creator's functionality by adding a custom toolbar button. View our free demo for JavaScript that shows how to integrate a custom button that clears the survey displayed on the design surface.
framework: Vue 3
source: https://surveyjs.io/survey-creator/examples/toolbar-customization/vue3js
index: https://surveyjs.io/survey-creator/examples/overview.md
---

# Customize the Toolbar (Vue 3)

Survey Creator's toolbar contains buttons that perform actions relevant to the active tab. For instance, the Designer tab allows users to undo and redo last operations, the Preview tab—change the device type and orientation, and the JSON Editor tab—import and export the survey JSON schema. This demo shows how to add a custom toolbar button that clears the survey on the design surface.

## Configure a Toolbar Button

To configure a toolbar button, define an [`IAction`](https://surveyjs.io/form-library/documentation/api-reference/iaction) object. Within it, you can set the button's [unique ID](https://surveyjs.io/form-library/documentation/api-reference/iaction#id), [icon](https://surveyjs.io/form-library/documentation/api-reference/iaction#iconName), [tooltip](https://surveyjs.io/form-library/documentation/api-reference/iaction#tooltip), and other parameters. You should also specify a function that this button will call and assign it to the [`action`](https://surveyjs.io/form-library/documentation/api-reference/iaction#action) property. In this demo, the `action` function sets the Survey Creator's [`JSON`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#JSON) property to an empty object, thus clearing the survey users configure. 

```js
import { Action } from "survey-core";

const clearSurveyAction = new Action({
    id: "clear-survey",
    tooltip: "Clear Survey",
    iconName: "icon-clear-24x24",
    action: () => {
        creator.JSON = {};
    }
});
```

Different tabs can have different toolbar buttons. To control the toolbar button visibility, use the `IAction` object's [`visible`](https://surveyjs.io/form-library/documentation/api-reference/iaction#visible) property. You can set it to a static Boolean value or to a `ComputedUpdater` instance if you need to calculate the property value dynamically. The `ComputedUpdater` constructor accepts a function that specifies the calculation rules. This function will be reevaluated each time a dependency property is changed. In this demo, the `visible` property depends on the Survey Creator's [`activeTab`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#activeTab) property:

```js
const clearSurveyAction = new Action({
    // ...
    visible: new ComputedUpdater(() => creator.activeTab === "designer")
});
```

## Add the Button to the Toolbar

Survey Creator includes two toolbars: top (for the desktop view) and bottom (for the mobile view). You can add your custom button to both or only one of the toolbars: 

```js
// Add a custom button to the top toolbar
creator.toolbar.actions.push(clearSurveyAction);

// Add a custom button to the bottom toolbar
creator.footerToolbar.actions.push(clearSurveyAction);
```

Open the Code tab to view the code example in full.

## Files

### `public/index.html`

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

### `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 { Action, ComputedUpdater } from "survey-core";
    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

    const creator = new SurveyCreatorModel();
    const clearSurveyAction = new Action({
        id: "clear-survey",
        tooltip: "Clear Survey",
        iconName: "icon-clear-24x24",
        visible: new ComputedUpdater(() => creator.activeTab === "designer"),
        action: () => {
            creator.JSON = {};
        }
    });
    
    // Add a custom button to the top toolbar
    creator.toolbar.actions.push(clearSurveyAction);
    
    // Add a custom button to the bottom toolbar (visible only on mobile devices)
    creator.footerToolbar.actions.push(clearSurveyAction);
    
    creator.JSON = {
        "pages": [{
            "name": "page1",
            "elements": [{
                "type": "text",
                "name": "question1"
            }]
        }]
    };
</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";

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
}
```

### `.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/toolbar-customization/angular.md)
- [React](https://surveyjs.io/survey-creator/examples/toolbar-customization/reactjs.md)
- [jQuery](https://surveyjs.io/survey-creator/examples/toolbar-customization/jquery.md)
- [Vanilla JS](https://surveyjs.io/survey-creator/examples/toolbar-customization/vanillajs.md)