---
title: Remove Properties from the Property Grid
product: Survey Creator
description: You can remove or hide unwanted properties form the property grid of your self-hosted survey builder to make it suitable for specific needs of your end users. View our free demo for JavaScript to learn how to customize the functionality of the property grid in a few steps.
framework: Vue 3
source: https://surveyjs.io/survey-creator/examples/remove-properties-from-property-grid/vue3js
index: https://surveyjs.io/survey-creator/examples/overview.md
---

# Remove Properties from the Property Grid (Vue 3)

If you want to prevent users from accessing or modifying a certain survey element's property, you can hide it from the Property Grid. Survey Creator allows you to hide either an individual property or multiple properties at once. This example demonstrates an API used to hide the [`visibleIf`](https://surveyjs.io/form-library/documentation/api-reference/question#visibleIf) property for pages, panels, and questions and the [`description`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#description) and [`showTitle`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#showTitle) properties for the survey.

To hide a single property, access it using the `Serializer`'s `getProperty(className, propertyName)` method and set its [`visible`](https://surveyjs.io/form-library/documentation/customize-question-types/add-custom-properties-to-a-form#visible) attribute to `false`. To hide multiple properties, handle the [`onPropertyShowing`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#onPropertyShowing) event. Its second parameter includes the `show` Boolean property. Disable it for the properties you want to hide. Open the Code tab to view code examples.

## 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 { Serializer } 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

    // Hide a property of the base class for pages and panels
    Serializer.getProperty("panelbase", "visibleIf").visible = false;
    
    // Hide a property of the base class for questions
    Serializer.getProperty("question", "visibleIf").visible = false;
    const creator = new SurveyCreatorModel();
    // Hide multiple properties
    const blackList = [ "description", "showTitle" ];
    creator.onPropertyShowing.add((_, options) => {
        if (options.element.getType() === "survey") {
            options.show = blackList.indexOf(options.property.name) === -1;
        }
    });
    
    creator.JSON = {
      "elements": [
        {
          "type": "text",
          "name": "question1",
          "title": "Question"
        },
        {
          "type": "panel",
          "name": "panel1",
          "title": "Panel"
        }
      ]
    };
</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/remove-properties-from-property-grid/angular.md)
- [React](https://surveyjs.io/survey-creator/examples/remove-properties-from-property-grid/reactjs.md)
- [jQuery](https://surveyjs.io/survey-creator/examples/remove-properties-from-property-grid/jquery.md)
- [Vanilla JS](https://surveyjs.io/survey-creator/examples/remove-properties-from-property-grid/vanillajs.md)