Nuxt

In my previous .NET Aspire blog post, we talked about using .NET Aspire to orchestrate the different parts of our web application. However, the .NET Aspire dashboard did not show any telemetry (traces, metrics, or structured logging) because we did not instrument the API or front-end code. We are going to change that in this article, and see how we can easily integrate OpenTelemetry into our application.

When developing an application, it’s important to collect data for observability and monitoring purposes. The OpenTelemetry (OTel) is an open source observability framework that will help you collect this telemetry in a standardized way, while being completely vendor and tool agnostic.

You might have already seen blog posts and videos showing how .NET Aspire can enhance our local development environment, using an example with a Blazor SPA and an ASP.NET Core API. However, not everyone uses Blazor; many prefer a JavaScript framework for front-end development.

In my last article, we explored how to integrate an ASP.NET Core API with a Nuxt.js front end. However, we were using HTTP to debug both the API and the front end locally.

In this article, I will walk you through the process of integrating an ASP.NET Core API with a Nuxt.js front end to have a stack that provides a nice developer experience to build web applications.