JSON output does not differentiate between props and slots

Problem

Atm the JSON serialization is not 100% clear on what's a slot or prop. Example take the following example JSON

              {
                "element": "teaser-wide",
                "type": "article",
                "href": "/blog/drupal-dev-days-2025-innovation-community-und-zusammenarbeit-224",
                "title": "Drupal Dev Days 2025: Innovation, Community und Zusammenarbeit in Leuven ",
                "heroType": "image",
                "category": "Drupal Dev Days",
                "author": "Wolfgang Ziegler",
                "excerpt": "Drupal-Innovation beschleunigt sich! Begleiten Sie uns auf unserer Reise zu den Drupal Dev Days 2025 in Leuven, wo wir ambitionierte Pläne für den Experience Builder, KI-Integration und eine neue europaweite Drupal-Vereinigung geschmiedet haben und dabei den Austausch mit der engagierten Drupal-Community pflegten.",
                "image": {
                  "aspectRatio": 133.33,
                  "src": "https://cp.drunomics.com/files/styles/300_225/public/2025-05/ddd_group_photo.jpg?itok=WPFebnk6&focal_point=40151dc2",
                  "srcset": null,
                  "alt": "Group photo at Drupal Dev Days Leuven",
                  "title": "© Joris Vercammen, borisson_"
                },
                "publishedAt": "05. Mai 2025"
              }

It's hard to tell whether "image" is a prop with an array/object value or a slotted element. The existence of the "element" property is a good guess, but not 100% clear since a prop arrray/object can also have it.

However, we should provide and need a 100% way to identify slots/props to easily pass the data the right way to components.

Proposed resolution

As prototyped at https://github.com/drunomics/nuxtjs-drupal-ce/pull/402:

The idea is to add explicit "props" and "slots" keys:

{
  "element": "teaser-wide",
  "props": {
    "type": "article",
    "href": "/blog/drupal-dev-days-2025-innovation-community-und-zusammenarbeit-224",
    "title": "Drupal Dev Days 2025: Innovation, Community und Zusammenarbeit in Leuven ",
    "heroType": "image",
    "category": "Drupal Dev Days",
    "author": "Wolfgang Ziegler",
    "excerpt": "Drupal-Innovation beschleunigt sich! Begleiten Sie uns auf unserer Reise zu den Drupal Dev Days 2025 in Leuven, wo wir ambitionierte Pläne für den Experience Builder, KI-Integration und eine neue europaweite Drupal-Vereinigung geschmiedet haben und dabei den Austausch mit der engagierten Drupal-Community pflegten.",
    "image": {
      "aspectRatio": 133.33,
      "src": "https://cp.drunomics.com/files/styles/300_225/public/2025-05/ddd_group_photo.jpg?itok=WPFebnk6&focal_point=40151dc2",
      "srcset": null,
      "alt": "Group photo at Drupal Dev Days Leuven",
      "title": "© Joris Vercammen, borisson_"
    },
    "publishedAt": "05. Mai 2025"
  },
  "slots": {
    "slotname1": "slot string"
  }
}
}

API change

Obviously the new API format would be a breaking change. We could make using it configurable, default to the new "explicit" format for new installs, keep existing install at the "legacy" format and keep supporting it until the next major version of the release.

Outcome

It will allow us to simplify slot-handling in the frontend, e.g. we could simply work with vanilla slots like the following. Taking the example from "Getting started" docs:

Before

<template>
  <div class="teaser-listing">
    <h2>Title: {{ title }}</h2>
    <slot>
      <component :is="useDrupalCe().renderCustomElements(content)" />
    </slot>
  </div>
</template>

<script setup lang="ts">
  defineSlots<{
    default(): any;
  }>();
  defineProps<{
    title: string;
    content?: CustomElementContent;
  }>();
</script>

After

<template>
  <div class="teaser-listing">
    <h2>Title: {{ title }}</h2>
    <slot>
    </slot>
  </div>
</template>

<script setup lang="ts">
  defineSlots<{
    default(): any;
  }>();
  defineProps<{
    title: string;
  }>();
</script>