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

Deep mediterranean quiche

An Italian inspired quiche with sun dried tomatoes and courgette. A perfect light meal for a summer's day.

Prep
40 min
Cook
30 min
Serves
8
Difficulty
Medium

Ingredients

For the pastry:
280g plain flour
140g butter
Cold water
For the filling:
1 onion
2 garlic cloves
Half a courgette
450ml soya milk
500g grated parmesan
2 eggs
200g sun dried tomatoes
100g feta

Method

  1. 1 Preheat the oven to 400°F/200°C. Starting with the pastry; rub the flour and butter together in a bowl until crumbling like breadcrumbs. Add water, a little at a time, until it forms a dough.
  2. 2 Roll out the pastry on a floured board and gently spread over your tin. Place in the fridge for 20 minutes before blind baking for a further 10.
  3. 3 Whilst the pastry is cooling, chop and gently cook the onions, garlic and courgette.
  4. 4 In a large bowl, add the soya milk, half the parmesan, and the eggs. Gently mix.
  5. 5 Once the pastry is cooked, spread the onions, garlic and sun dried tomatoes over the base and pour the eggs mix over. Sprinkle the remaining parmesan and careful lay the feta over the top. Bake for 30 minutes or until golden brown.
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.