--- title: Enable the Spacious Layout in a PDF Form product: PDF Generator description: This demo shows how to switch from the default Compact layout to the Spacious layout, increasing spacing and improving the readability and visual balance of your PDF forms. framework: Vue 3 source: https://surveyjs.io/pdf-generator/examples/compact-vs-spacious-pdf-layout/vue3js index: https://surveyjs.io/pdf-generator/examples/overview.md --- # Enable the Spacious Layout in a PDF Form (Vue 3) SurveyJS PDF Generator separates color settings from dimensional styling. [Themes](/pdf-generator/examples/apply-surveyjs-theme-to-pdf-form/) define colors and shadows, while layouts define spacing, sizing, typography, corner radius, and other properties. PDF Generator includes two predefined layouts: **Compact** (default) and **Spacious**. This demo applies the Spacious layout. Click **Download PDF** or **Preview PDF** to generate a PDF form with this layout, or use the **PDF layout** switcher in the **Settings** panel to switch back to Compact. ## Compact vs. Spacious **Compact** is a dense layout designed to reduce page count and maximize the amount of content that fits on each page. Its characteristics include: - Tighter spacing between pages, questions, and matrix cells - Smaller gaps throughout the document - No corner rounding on questions and matrices **Spacious** increases spacing and visual proportions to improve readability and create a more open presentation. Its characteristics include: - Larger gaps between pages and questions - Increased whitespace around matrix table cells - Rounded corners on questions, matrices, and sections - A less dense appearance that resembles a designed form rather than a compact report To apply the Spacious layout, import it or reference its script and call the [`applyLayout`](/pdf-generator/documentation/api-reference/surveypdf#applyLayout) method: ```js // Modular applications import { Spacious } from "survey-pdf/layouts"; const surveyPdf = new SurveyPDF({ /* ... */}); surveyPdf.applyLayout(Spacious); surveyPdf.save("my-spacious-form.pdf"); ``` ```html ``` For more information about layouts and other appearance customization options, refer to the following help topic: [PDF Appearance Customization](/pdf-generator/documentation/pdf-appearance-customization (linkStyle)) ## Files ### `public/index.html` ```html

``` ### `src/App.vue` ```html ``` ### `src/index.css` ```css /* You can add your custom CSS here. */ ``` ### `src/json.ts` ```ts export const json = { "title": "Guest Stay Feedback", "description": "Help us improve your next visit. Fields marked with * are required.", "pages": [ { "name": "stay-details", "title": "Your stay", "elements": [ { "type": "panel", "name": "guest-info", "title": "Guest information", "elements": [ { "type": "text", "name": "full-name", "title": "Full name", "isRequired": true }, { "type": "text", "name": "email", "startWithNewLine": false, "title": "Email", "isRequired": true, "validators": [ { "type": "email" } ], "inputType": "email" }, { "type": "text", "name": "room-number", "title": "Room number" }, { "type": "text", "name": "check-out", "startWithNewLine": false, "title": "Check-out date", "inputType": "date" } ] } ] }, { "name": "ratings", "title": "Rate your experience", "description": "Please rate each area from 1 (poor) to 5 (excellent).", "elements": [ { "type": "matrix", "name": "service-ratings", "title": "How would you rate the following?", "rowTitleWidth": "120px", "columns": [ 1, 2, 3, 4, 5 ], "rows": [ { "value": "cleanliness", "text": "Room cleanliness" }, { "value": "staff", "text": "Front desk & staff" }, { "value": "comfort", "text": "Bed & room comfort" }, { "value": "amenities", "text": "Amenities (Wi-Fi, TV, etc.)" }, { "value": "breakfast", "text": "Breakfast / dining" }, { "value": "value", "text": "Overall value for money" } ], "eachRowRequired": true } ] }, { "name": "comments", "title": "Additional feedback", "elements": [ { "type": "checkbox", "name": "highlights", "title": "What stood out during your stay?", "choices": [ "Friendly staff", "Quiet room", "Great location", "Fast check-in", "Comfortable bed" ], "showOtherItem": true, "otherText": "Other", "colCount": 2 }, { "type": "comment", "name": "suggestions", "title": "What could we do better?", "maxLength": 500 }, { "type": "boolean", "name": "return-guest", "title": "Would you stay with us again?", "valueTrue": "yes", "valueFalse": "no" } ] } ], "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/compact-vs-spacious-pdf-layout/angular.md) - [React](https://surveyjs.io/pdf-generator/examples/compact-vs-spacious-pdf-layout/reactjs.md) - [jQuery](https://surveyjs.io/pdf-generator/examples/compact-vs-spacious-pdf-layout/jquery.md) - [Vanilla JS](https://surveyjs.io/pdf-generator/examples/compact-vs-spacious-pdf-layout/vanillajs.md)