标签：#nuxt

Have you ever been coding and then gotten into that flow state? You know where hours pass by , and it feels to you it's only ben a few minutes? Me too. One thing that really helps me get into that state is music. So I create my own music Lo-Fi server called compile and chill. As a part of this project, I created three radio stations. Each station can generate a 16:9 scene with Amazon Bedrock , compose an instrumental loop with ElevenLabs, and turn an illustration into a six-second video through OpenRouter. Generated files live in private Amazon S3 storage and return to the browser through the Nuxt server. I also added a Stream Deck API interface! This tutorial shows how to build this radio station from start to finish. The complete source code is available in the Compile & Chill repository . Watch the full video on YouTube . Prerequisites You need the following tools for the complete build: Node.js 22.19 or newer. The locked Nuxt 4.5.2 release requires Node 22.19+, 24.11+, or 26+. npm 10 or newer. An AWS account and a configured AWS Command Line Interface (AWS CLI) profile. The AWS Serverless Application Model (AWS SAM) CLI for the private storage stack. Access to Stability AI Stable Image Ultra through Amazon Bedrock in us-west-2 . An ElevenLabs API key for music generation. An OpenRouter API key for animated scenes. The provider credentials are optional. Without them, the UI, bundled scene, station switching, player, and Focus Block timer still work. The identity running the app needs bedrock:InvokeModel plus bucket-scoped permissions for s3:GetObject , s3:PutObject , s3:DeleteObject , s3:DeleteObjectVersion , and s3:ListBucketVersions . Use a role or profile scoped to the station bucket rather than an administrator identity. For this project I included infrastructure as code with SAM to help setup the AWS parts. It's also included in the repo. Steps 1. Run the station without credentials Pull down the repo and get started! git clone https://github.com/ErikCH/comp

Introduction I did something stupid. I built a superhero-themed Nuxt app, connected it to an Anthropic model through Amazon Bedrock , and gave it a tool that deletes files from my computer. In fact, if I wasn't careful, it could have deleted all my files! The first time I tried it, I didn't use any sort of approval mechanism. And as you expected it just deleted things. Then I looked into how my coding agent works, and I learned about tool approvals. I learned that AI SDK 7 has a tool approval at the model-call level. It works by pausing for an approval, showing an approval window, and then deleting it. I then put Kiro CLI behind the same interface using Agent Client Protocol (ACP). Watch the full video on YouTube . Prerequisites You need: Node.js 22 or later. AI SDK 7 requires Node.js 22 and uses ECMAScript modules (ESM). npm 11 or another package manager that works with Nuxt 4. AWS credentials available through the standard provider chain. Access to an Amazon Bedrock model in your AWS Region. The AWS CLI if you want to list the inference profiles available to your account. An authenticated Kiro CLI installation for the optional ACP section. Step 1: Create the Nuxt app Create the project and install the versions used in the recorded demo: npx nuxi@latest init nuxt-agent-approval cd nuxt-agent-approval npm install \ nuxt@4.5.2 \ vue@3.5.41 \ ai@7.0.66 \ @ai-sdk/vue@4.0.66 \ @ai-sdk/amazon-bedrock@5.0.57 \ @aws-sdk/credential-providers@3.1111.0 \ @nuxt/ui@4.10.0 \ zod@4.4.3 npm install -D @iconify-json/lucide@1.2.123 Register Nuxt UI and expose the Amazon Bedrock settings through server-side runtime config: // nuxt.config.ts export default defineNuxtConfig ({ modules : [ ' @nuxt/ui ' ], css : [ ' ~/assets/css/main.css ' ], runtimeConfig : { awsRegion : process . env . AWS_REGION ?? ' us-west-2 ' , bedrockModelId : process . env . NUXT_BEDROCK_MODEL_ID } }) Add the two Nuxt UI imports: /* app/assets/css/main.css */ @import "tailwindcss" ; @import "@nuxt/ui" ; You can c

Nuxt 4.5 launched last month and it's really neat. One of my most favorite features is the...

Lighthouse kept warning me about inefficient cache lifetimes, even though I had already added caching for my static files. The missing piece was Nuxt Image and its generated /_ipx URLs . In this post, I’ll share the simple caching setup I use for Nuxt build files, public assets, and optimized images without risking stale content after deployment. The basic rule is simple: Cache files aggressively when changing the file also changes its URL. Be more careful when the same URL can serve different content later. You have probably seen the same Lighthouse warning I have: Use efficient cache lifetimes. Browser caching for static files is usually straightforward. You add a Cache-Control header, choose a reasonable lifetime, and the browser avoids downloading the same files again on every visit. However, in a Nuxt application, not every static-looking file should use the same caching policy. Nuxt build files are automatically versioned. Files inside public/ usually are not. Nuxt Image also creates transformed image URLs under /_ipx , which need their own cache rule. In this post, I’ll go through the setup I use, including the Nuxt Image rule that was missing during my latest Lighthouse audit. The simple caching rule The most important question is not whether a file is an image, font, or JavaScript file. The important question is: Will the URL change when the file changes? When the answer is yes, you can safely cache the file for a very long time. When the answer is no, you should use a shorter cache lifetime. Otherwise, visitors may continue seeing an old version after you deploy an update. What the cache directives mean Here are the main directives used in this setup: public allows browsers and shared caches such as CDNs to store the response. max-age controls how long the browser considers the file fresh. s-maxage controls how long shared caches such as Cloudflare consider it fresh. immutable tells the browser that the file is not expected to change while that URL exists.

Rate limiting is one of those things that doesn't feel urgent—until someone hammers your login endpoint at 3am and you wake up to a flooded database and a locked-out user base. I added this to my Nuxt base layer after realising I'd shipped several projects with zero protection on auth routes. Not great. This post walks through the exact setup I now use: Redis-backed, an in-memory fallback when Redis is down, named presets for different sensitivity levels, and a 429 page that shows a live countdown instead of just dying on the user. The structure Three pieces, each with one job: createRateLimiter() — a factory that builds the limiter, using Redis with an in-memory fallback applyRateLimit() — what you call inside handlers to enforce a limit server/middleware/rateLimiter.ts — global middleware so every route gets a baseline for free 1. Install npm install rate-limiter-flexible ioredis rate-limiter-flexible does the heavy lifting: sliding windows, Redis integration, and the insurance fallback pattern we'll use. 2. The factory Create server/utils/rateLimiter.ts : import { RateLimiterRedis , RateLimiterMemory , type RateLimiterAbstract , } from ' rate-limiter-flexible ' import { getRedisClient } from ' ./redis ' export interface RateLimiterConfig { keyPrefix : string // Must be unique per limiter, e.g. 'rl:auth' limit : number // Maximum requests within the window windowSeconds : number } export interface RateLimitResult { allowed : boolean limit : number remaining : number resetAt : number // Unix timestamp in seconds when the window resets retryAfter : number // Seconds until retry; 0 if allowed } function buildLimiter ( config : RateLimiterConfig , ): RateLimiterAbstract { const insurance = new RateLimiterMemory ({ keyPrefix : config . keyPrefix , points : config . limit , duration : config . windowSeconds , }) const redis = getRedisClient () if ( ! redis ) { return insurance } return new RateLimiterRedis ({ storeClient : redis , keyPrefix : config . keyPrefix , points

Nuxt vs SvelteKit. Which one is better? That is is what I've been testing out this week. I built the...

I love Nuxt and I really like TanStack Start. But which one is better? Or are they about the same? And if they are about the same, does it do anything my Nuxt setup can't, and is that worth leaving Vue for React? So I decided to build the same app in both frameworks and take a look. Read on below to find out! If you'd rather watch a video, check out the video on the same topic! The app In both frameworks I built a small GitHub user lookup app. You type a username, the profile gets fetched on the server, and the username lands in the URL as a ?user= query param so the result is shareable. Type ErikCH , hit enter, and the card renders. Refresh the page and it's still there. It has the same behaviour so the difference lies in the code. Difference one: server functions vs server routes On the Nuxt side we call a server route from useAsyncData . Server are the more idiomatic way to use Nuxt to call things on the server. <!-- app/pages/index.vue --> < script setup lang= "ts" > import { z } from ' zod ' import type { GithubUser } from ' ~~/server/api/github.get ' definePageMeta ({ props : route => z . object ({ user : z . string (). default ( '' ) }). parse ( route . query ), }) const props = defineProps < { user : string } > () const router = useRouter () const input = ref ( props . user ) const { data , error } = await useAsyncData ( ' github-user ' , () => props . user ? $fetch < GithubUser > ( ' /api/github ' , { query : { user : props . user } }) : Promise . resolve ( null ), { watch : [() => props . user ] }, ) function lookup () { router . push ({ query : { user : input . value . trim () } }) } </ script > The props option on definePageMeta maps the query into a typed page prop and re-runs on client navigation. useAsyncData fetches when there's a username and refetches whenever it changes. The conditional that returns Promise.resolve(null) skips the request on an empty query param, (or when you first load). The server route does the outbound call: // server/api/gith

Everyone knows Next.js is the default full-stack JavaScript framework in 2026. The job ads say so,...