Nuxt Example App

Christopher Hatton

Senior Fullstack Engineer / Development Lead
United Kingdom

Calculator 🔢

This is a simple calculator, but it sends the data to my own created API (within the application) using fetch and H3 (which is integrated into the Nitro server engine this runs on).

It prevents a GET request; you will see this if you route to "/api/calculate".

+

Electronics âš¡

A few calculators I use when building circuits. The maths lives in its own tested module, and the components just display it.

Resistor colour code

Pick the colour of each band on a 4-band resistor.

1st digit: Yellow

2nd digit: Violet

Multiplier: Red

Tolerance: Gold

Answer

4.7 kΩ ±5%

Ohm's law

Fill in any two values to work out the third, and the power.

Answer

9 V, 0.009 A, 1 kΩ; power 0.081 W

LED resistor

The series resistor an LED needs, rounded up to a standard (E12) value.

Answer

Use a 150 Ω resistor (exactly 150 Ω), giving 20 mA and 0.06 W.

Testing ✅

The application is tested with Vitest and Nuxt Test Utils, running inside a real Nuxt environment. Each component has a test, as does the calculator API (with its endpoint mocked); see them here.

Built with Vue.js using Nuxt.js framework and styled with Tailwind CSS (source code)

00:00:00  --/--/----