A DruxtJS demo of Drupal Umami content, rendered by Nuxt A DruxtJS demo of Umami by Nuxt DruxtJS demo

Victoria sponge cake

A traditional Victoria sponge cake, perfect for any afternoon with a cup of tea.

Prep
20 min
Cook
20 min
Serves
10
Difficulty
Easy

Ingredients

225g butter or margarine
225g caster sugar
225g self-raising flour
4 eggs
1 tsp baking powder
3 tbsp of jam for the filling
Icing sugar to dust the top
Cream to serve

Method

  1. 1 Preheat the oven to 350°F/180°C and grease two 8 inch cake tins.
  2. 2 In a large bowl, mix the butter and sugar together, then add the eggs, flour and baking powder.
  3. 3 Spread the mix evenly between the 2 cake tins.
  4. 4 Place both tins in the middle of the preheated oven for 20 minutes, before checking with a knife. When the knife comes out clean, it's ready!
  5. 5 Allow to cool in the tins before moving them onto a cooling rack.
  6. 6 Add the jam, stack, dust with icing sugar and serve with a big dollop of cream. Enjoy!
Same node, other view modes

Drupal's display modes are components here. Switch one and the page re-renders from the entity already in the store, with no second request.

Open card in Storybook →
How this page works

One component file renders every recipe on this site

Drupal's full display mode maps to this file. Change the layout here and all 24 recipes follow. The field templates, labels and formatters still come from Drupal's display config.

Read the Entity guide →
      
      <DruxtEntity
  type="node--recipe"
  mode="full"
  :uuid="uuid"
/>
Built with DruxtJS

This whole magazine is one Drupal site and one Nuxt app

Blocks, menus, views, breadcrumbs, entity forms and search all come straight from Drupal's JSON:API. You override a component only when you want to.

Start your own in one command
$ npx giget@1 gh:druxt/quickstart#develop my-druxt-site --install

Or open this site in DevPod, with its backend, frontend and demo content.