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

Watercress soup

A wonderfully simple and light soup, making the most of seasonal, local produce.

Prep
10 min
Cook
20 min
Serves
4
Difficulty
Easy

Ingredients

3 bunches watercress
3 potatoes
3 onions
2 leeks
800ml stock
5 tbsp crème fraîche

Method

  1. 1 Prepare the vegetables by peeling and chopping the potatoes, finely chopping the onions, leeks and garlic.
  2. 2 Heat a little oil in a pan and add the chopped vegetables, gently cooking them for about 5 minutes.
  3. 3 Add the vegetable stock to the same pan and turn up the heat until simmering, adding the watercress after about 10 minutes. Cook until all the vegetables are soft and easily mashed.
  4. 4 Liquidize the soup either with a hand blender or in a mixer, until smooth.
  5. 5 If the soup has cooled too much whilst being liquidized, stir in the crème fraîche and reheat before serving (otherwise serve straight away). Season to taste.
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.