# Add content property

See Development process to load a base section in dev mod.

We will add a title property on our section, so that the user can dynamically change the title of the section. We want this title to change depending on the language of the website.

# wwDefaultContent

First step is to add the default content value

wwDefaultContent: {
    textColor: "#BC1010",
    title: { "en": "My title", "fr": "Mon titre" },
},

TIP

Note that here title need to be an object.

# Use the value inside the template

Update the data of your component to expose wwLang methods

export default {
    name: "__COMPONENT_NAME__",
    wwDefaultContent: {
        textColor: "#BC1010",
        title: { en: "My title" },
    },
    props: {
        content: { type: "Object", required: true },
    },
    data() {
        return {
            wwLang: wwLib.wwLang,
        };
    },
    computed: {
        textStyle() {
            return {
                color: this.content.textColor,
            };
        },
    },
};
<div class="my-section">
    <h1 :style="textStyle">{{ wwLang.getText(content.title) }}</h1>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
        dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
        ea commodo consequat.
    </p>
</div>

TIP

Note here that we need to use wwLib.wwLang object

# Change the ww-config.json

We will add a property inside ww-config.json to add a text input on the Settings pannel

{
    "componentPath": "./src/wwSection.vue",
    "editor": {
        "label": {
            "en": "My Section"
        },
        "styleOptions": {
            "textColor": {
                "label": {
                    "en": "Text color"
                },
                "type": "Color"
            }
        },
        "settingsOptions": {
            "title": {
                "label": {
                    "en": "Title"
                },
                "type": "Text",
                "multiLang": true,
            }
        }
    }
}

TIP

We use ``multiLang: true` so the interface propose to change the value for each available lang

WARNING

You need to restart your dev server so that the config is load correctly