Weekly Vue News #188

Document Your Nuxt Endpoints With OpenAPI and Visualize With Swagger or Scalar

Hi 👋

This week, I've got a useful Nuxt tip on documenting your Nuxt endpoints with OpenAPI and visualizing them using Swagger or Scalar.

Besides that, I'm still working on integrating Polar into my upcoming Nuxt SaaS starter kit, though my free time for such side projects is limited.

Enjoy this issue and have a lovely week ☀️

Vue

📕 Understanding Vue's Virtual DOM

👉🏻 In this article, you'll explore how Vue's Virtual DOM works can help optimize your applications and write more efficient code.

📹 3 (and a half) Pinia problems you should avoid

👉🏻 Pinia is integral for a lot of applications.

👉🏻 But make sure that you don't make the mistakes shown in the video, or if you do, how to fix them.

🛠️ PrimeVue 4.3

👉🏻 A UI component suite for Vue, now with a new 'theme designer' tool including a Figma-to-code feature.

🛠️ Vue Multiselect

👉🏻 Single / multiple select

👉🏻 Server-side Rendering (SSR) support

👉🏻 Vue 3 Compatible

👉🏻 Fully configurable

👉🏻 No dependencies

Nuxt

📕 When to Use $fetch, useFetch, or useAsyncData in Nuxt: A Comprehensive Guide*

👉🏻 Confused about when to use $fetch, useFetch, or useAsyncData in Nuxt?

👉🏻 This guide breaks down their differences, best use cases, and common pitfalls to help you make the right choice for your project.

📕 Automatically Deploy Your Nuxt Static Site to DigitalOcean with GitHub Actions

👉🏻 Auto-deploy is one of the great features of Netlify and Vercel. Whenever you push to a branch your site builds & deploys automatically.

👉🏻 The author of this article loves that, but prefers to manage his own server.

📹 2025 Comprehensive Nuxt Tutorial

👉🏻 In this in 5 hour depth course you build a dark, modern, animated website with Nuxt, GSAP, Prismic, Tailwind, and TypeScript.

🛠️ Nuxt UI extension for Raycast

👉🏻 Instant theme access - just a shortcut away

👉🏻 Talk to Nuxt UI in natural language

👉🏻 Support for v2 & v3

🛠️ Nuxt UI & Nuxt UI Pro v3.0.0-beta is now live

👉🏻 Vue support into Pro

👉🏻 Tailwind CSS v4.0.9

👉🏻 New Tree component

👉🏻 New useOverlay composable

👉🏻 Devtools Integration with compodium

🛠️ nuxt-feature-flags

👉🏻 A powerful, type-safe feature flag module for Nuxt 3 that enables both static and dynamic feature flag evaluation with server-side support.

👉🏻 Perfect for A/B testing, gradual rollouts, and feature management.

💡 Nuxt Tip: Document Your Nuxt Endpoints With OpenAPI and Visualize With Swagger or Scalar

When you're building an API with Nuxt 3+, it's essential to have clear and accessible documentation. OpenAPI provides a structured way to describe your API, and tools like Swagger UI or Scalar make it easy to visualize and interact with your endpoints.

To enable OpenAPI in your Nuxt 3 project, you need to enable the experimental Nitro feature. You can do this by adding the following configuration to your nuxt.config.tsnuxt.config.ts file:

1export default defineNuxtConfig({  2  nitro: {  3    experimental: {  4      openAPI: true,  5    },  6  },  7})

If you now start your Nuxt app locally, you can access the OpenAPI documentation at http://localhost:3000/_swaggerhttp://localhost:3000/_swagger or http://localhost:3000/_scalarhttp://localhost:3000/_scalar:

Visit the official Nitro documentation for further customization options.

📗 Read the whole article

📅 Events

Vuejs Amsterdam (12 - 13 March 2025, Amsterdam, Netherlands)

Vueconf.US (13 - 15 May 2025, Tampa, Florida)

MadVue (29 May 2025, Madrid, Spain)

💬 Quote of the week

🧑🏻‍💻 In Other News

📕 Extreme Server Side Rendering

👉🏻 Extreme Server Side Rendering (XSSR) is a technique where the server continuously streams HTML updates to the client, creating dynamic web pages without JavaScript.

📕 Boost Your Website Speed

👉🏻 A slow-loading website can hurt user experience, reduce search engine rankings, and decrease conversions.

🛠️ Mastra

👉🏻 A TypeScript framework for building AI apps that provides tools for workflows, agents, RAG, integrations, and evals.

👉🏻 It has a unified interface for interacting with various LLM providers.

📹 TypeScript types can run DOOM

👉🏻 A dude got the Doom engine running purely in TypeScript types.

👉🏻 The code is available on GitHub.