---
title: Basic Preset for Survey Creator UI
product: Survey Creator
description: This demo shows the Basic preset for Survey Creator UI configuration designed for simple surveys and forms. It offers a streamlined interface, limited question types, and a simplified settings panel.
framework: Vue 3
source: https://surveyjs.io/survey-creator/examples/basic-ui-preset/vue3js
index: https://surveyjs.io/survey-creator/examples/overview.md
---
# Basic Preset for Survey Creator UI (Vue 3)
UI presets allow you to configure the Survey Creator UI and functionality, save these settings as a JSON object, and reuse them when embedding Survey Creator into your application. SurveyJS includes three predefined presets tailored to different experience levels: Basic, Advanced, and Expert. This demo showcases the **Basic** UI preset designed for simple surveys and forms. It includes only the most commonly used question types and simplifies the Property Grid to reduce complexity.
## Apply the Basic UI Preset
To apply the Basic preset, use the following code:
```js
// Modular applications
import { UIPreset } from "survey-creator-core";
import { Basic } from "survey-creator-core/ui-presets";
// ...
// Omitted: `SurveyCreatorModel` initialization
// ...
const basicPreset = new UIPreset(Basic);
basicPreset.applyTo(creator);
```
```html
```
## See Also
[Advanced UI Preset Demo](/survey-creator/examples/advanced-ui-preset/ (linkStyle))
[Expert UI Preset Demo](/survey-creator/examples/expert-ui-preset/ (linkStyle))
[UI Preset Editor Demo](/survey-creator/examples/ui-preset-editor/ (linkStyle))
[UI Preset Editor Documentation](/survey-creator/documentation/ui-preset-editor (linkStyle))
## Files
### `public/index.html`
```html
```
### `src/App.vue`
```html
```
### `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/basic-ui-preset/angular.md)
- [React](https://surveyjs.io/survey-creator/examples/basic-ui-preset/reactjs.md)
- [jQuery](https://surveyjs.io/survey-creator/examples/basic-ui-preset/jquery.md)
- [Vanilla JS](https://surveyjs.io/survey-creator/examples/basic-ui-preset/vanillajs.md)