---
title: Shipping Details Template
product: Survey Creator
description: Choose from a collection of free ready-made templates of most common web form sections, e.g., shipping details or an order form grid. The elements ship with predefined properties for easy and fast integration into your JavaScript app.
framework: Vue 3
source: https://surveyjs.io/survey-creator/examples/add-shipping-details-to-form-template/vue3js
index: https://surveyjs.io/survey-creator/examples/overview.md
---

# Shipping Details Template (Vue 3)

The Shipping Details question includes input fields for both business and shipping addresses. If the two addresses are identical, users can enable a switch to automatically copy the business address into the shipping address field. To include the Shipping Details template in your question collection, create a composite question type.

[Create a Composite Question Type](https://surveyjs.io/form-library/documentation/customize-question-types/create-composite-question-types (linkStyle))

## 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 { ComponentCollection, 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

    ComponentCollection.Instance.add({
        name: "shippingaddress",
        title: "Shipping Address",
        defaultQuestionTitle: "Shipping Address",
        elementsJSON: [{
            type: "comment",
            name: "businessAddress",
            title: "Business Address",
            isRequired: true
        }, {
            type: "boolean",
            name: "shippingSameAsBusiness",
            title: "Shipping address same as business address",
            defaultValue: true
        }, {
            type: "comment",
            name: "shippingAddress",
            title: "Shipping Address",
            // Use the `composite` prefix to access a question nested in the composite question
            enableIf: "{composite.shippingSameAsBusiness} <> true",
            isRequired: true
        }],
        onInit() {
            // Hide title-related settings from the Property Grid
            Serializer.addProperty("shippingaddress", {
                name: "titleLocation",
                visible: false,
                default: "hidden",
            });
            Serializer.addProperty("shippingaddress", {
                name: "title",
                visible: false,
            });
            Serializer.addProperty("shippingaddress", {
                name: "description",
                visible: false,
            });
        },
        onValueChanged (question, propertyName) {
            const businessAddress = question.contentPanel.getQuestionByName("businessAddress");
            const shippingAddress = question.contentPanel.getQuestionByName("shippingAddress");
            const shippingSameAsBusiness = question.contentPanel.getQuestionByName("shippingSameAsBusiness");
    
            if (propertyName === "businessAddress") {
                // If "Shipping address same as business address" is selected
                if (shippingSameAsBusiness.value == true) {
                    // Copy the Business Address value to Shipping Address
                    shippingAddress.value = businessAddress.value;
                }
            }
            if (propertyName === "shippingSameAsBusiness") {
                // If "Shipping address same as business address" is selected, copy the Business Address to Shipping Address
                // Otherwise, clear the Shipping Address value
                shippingAddress.value = shippingSameAsBusiness.value == true ? businessAddress.value : "";
            }
        },
    });
    const creator = new SurveyCreatorModel();
    creator.toolbox.defineCategories([{
        category: "Custom Items",
        items: [
            "shippingaddress"
        ]
    }], true);
    
    creator.JSON = {
      elements: [{
          type: "shippingaddress",
          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/add-shipping-details-to-form-template/angular.md)
- [React](https://surveyjs.io/survey-creator/examples/add-shipping-details-to-form-template/reactjs.md)
- [jQuery](https://surveyjs.io/survey-creator/examples/add-shipping-details-to-form-template/jquery.md)
- [Vanilla JS](https://surveyjs.io/survey-creator/examples/add-shipping-details-to-form-template/vanillajs.md)