# Anatomy of a component

# Prerequisites

We consider that you are familiar with Vue development. You can see the excellent Vue documentation here (opens new window).

TIP

weweb.io (opens new window) rely on the version 3 of Vue

There is two files you will edit:

  • src/wwElement.vue or src/wwSection.vue which is the Vue component display in the Editor and the published website.
  • ww-config.js which describe the different properties of your component so that the Editor know how to edit your component

# Vue component

For now your vue component is simple. It received the content props from the Editor, and use it to add some style on text.

export default {
  // [...]
  props: {
    content: { type: "Object", required: true },
  },
  computed: {
    textStyle() {
      return {
        color: this.content.textColor,
      };
    },
  },
  // [...]
};
<h1 :style="textStyle">My Title</h1>

content props is where your component editable data live. Each time this content change via the Editor, the component will receive a new updated content object, and thanks to Vue reactivity your component will refresh its template.

TIP

weweb.io (opens new window) handle for you lot of things like translation, responsive or binding so that you will always receive a simple content object without having to think about it

content can have any shape you want, but we encourage you the keep it as flat as possible, because it interacts better with a lof of Weweb features.

You can define the initial value of your content by using the special wwDefaultContent options.

export default {
  // ...
  wwDefaultContent: {
    textColor: "#FFFFFF",
  },
  // ...
};

If you want to learn more about what you can do here, take a look at the API Reference

You can put any style and html you want to your component. Just keep in mind that your root element will be editable via weweb.io (opens new window) default editor.

WARNING

Avoid defining style like padding which are handle by the editor. Also avoid using link or custom tag. See a complete list here

# ww-config.json

This file describe metadata of your component

{
  "componentPath": "./src/wwSection.vue",
  "editor": {
    "label": {
      "en": "My Section"
    },
    "styleOptions": {
      "textColor": {
        "label": {
          "en": "Text color"
        },
        "type": "Color"
      }
    }
  }
}
  • componentPath tells weweb.io (opens new window) what is your root component.

  • editor describes the interaction of your component inside the editor

    • label is a representation of a translated text, use by the editor to indicate user what component they are using
    • Then you have a list of content properties, which can be in different section depending on which panel you want them to be displayed (styleOptions for Style panel, settingsOptions for Settings panel)

Each content property must have a unique name across the different sections, and will be bind by default to the corresponding property inside content (if your property name is textColor, it will be available in this.content.textColor)

Mandatory fields for content property are label which is a translated text, and type.

Type lets weweb.io (opens new window) editor display the correct user interface to edit your property. A list of all available types and their options are available here

TIP

Defining all your content property inside ww-config.json is not mandatory. You can decide to handle yourself the content update by using a custom editor interface. Using the configuration file is still the quickest way to make your content editable by user, and offer a uniform edition experience for users across all the components. It's also the only way to activate some custom behavior like binding

WARNING

Each time you change your ww-config.json in dev mod, you need to restart your dev server and refresh your page

# Your turn!

If you want to add more properties take a look at our cookbook.