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

Fiery chili sauce

A rich and fiery chili sauce. Take care when handling chili peppers. And serve sparingly!

Prep
10 min
Cook
50 min
Serves
60
Difficulty
Easy

Ingredients

2 red onions
1 lemon
2 limes
250ml malt vinegar
7 garlic cloves
1 green bell pepper
1 red bell pepper
800g cherry tomatoes
30 mixed chilies
Olive oil
1 tbsp ground black pepper
1 tbsp brown sugar

Method

  1. 1 Preheat the oven to 400°F/200°C.
  2. 2 Finely chop the red onions and sweat gently on a low heat in olive oil for 5 minutes.
  3. 3 Peel the garlic and add it to the onions.
  4. 4 Meanwhile, chop the bell peppers to 1 inch pieces. Add the bell peppers and tomatoes to a roasting dish, and rub with lemon juice, olive oil and black pepper. Transfer to the oven and roast for 30 minutes.
  5. 5 Once the onions and garlic have softened, chop and add the chilies, seeds and all. Mix well and continue to gently fry.
  6. 6 Thoroughly wash your hands following handling raw chilies.
  7. 7 Once the tomatoes and bell peppers have finished roasting, add them to the pan. Cook for at least 10 minutes, breaking them up with a masher or a hand blender as they simmer. Once broken up, mix in the sugar.
  8. 8 Transfer the sauce to a blender and blend until smooth.
  9. 9 Return to the pan and add the vinegar and juice of the limes.
  10. 10 Cook through for a further 10 minutes, then leave to cool.
  11. 11 Transfer to sterilized jars and keep refrigerated.
  12. 12 Leave for at least two weeks before tasting.
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.