Nuxt 3 y Cloudflare

Guía para integrar Cloudflare Turnstile en Nuxt 3 con el módulo nuxt-turnstile: instalación, configuración, variables de entorno y validación en backend.

7 sept 2025 • 2 min read • Q2BSTUDIO Team

Inteligencia-Artificial-

Cloudflare Turnstile es una solución ligera y sin CAPTCHA visual para validar formularios y proteger aplicaciones frente a bots. En Nuxt 3 su integración es directa gracias al módulo nuxt-turnstile.

Paso 1 Instalar el módulo

Desde la raíz del proyecto ejecuta en tu terminal

npm install nuxt-turnstile o yarn add nuxt-turnstile

Paso 2 Configuración en Cloudflare

Crea una cuenta gratuita en Cloudflare, entra en la pestaña Turnstile, pulsa en Agregar Widget y configura el widget. Añade el nombre de tu sitio o proyecto, registra el dominio en Agregar nombres de host y guarda. Al finalizar obtendrás dos claves clave de sitio y clave secreta.

Paso 3 Variables de entorno en tu proyecto

Crea el archivo .env si no existe y añade tus claves

TURNSTILE_SITE_KEY=1x00000000000000000000AA

TURNSTILE_SECRET_KEY=0x4XXXXXXXXXXXXXXS_aacaDSD

Paso 4 Configuración en nuxt.config.ts

Añade el módulo @nuxtjs/turnstile y expón en runtimeConfig lo siguiente en el lado privado turnstile.secretKey leyendo de process.env.TURNSTILE_SECRET_KEY y en el lado público public.turnstile.siteKey leyendo de process.env.TURNSTILE_SITE_KEY.

Paso 5 Integración en el cliente

Coloca el componente NuxtTurnstile en el formulario donde quieras validar, por ejemplo en login o registro. Enlázalo con v-model a un ref que almacene el token y, antes de enviar, verifica que el token existe. Puedes ajustar opciones como theme auto size normal action login y language es-ES.

Paso 6 Validación en el backend

En el servidor valida el token recibido desde el frontend contra el endpoint de verificación de Cloudflare enviando secret con tu clave secreta y response con el token. Endpoint de referencia challenges.cloudflare.com/turnstile/v0/siteverify. Valida también el origen y aplica límites de tasa si corresponde.

Buenas prácticas y consejos

1 Carga diferida del widget para mejorar el rendimiento. 2 Rotación de claves ante incidentes. 3 Registra la acción por ejemplo login o contact para mejorar la analítica antifraude. 4 Combina Turnstile con análisis de comportamiento del usuario y límites de peticiones en API.

Cómo puede ayudarte Q2BSTUDIO

En Q2BSTUDIO desarrollamos aplicaciones a medida y software a medida optimizados para rendimiento y seguridad, integrando soluciones modernas como Cloudflare Turnstile, autenticación avanzada y estándares de ciberseguridad. Si estás valorando crear o evolucionar tu plataforma, visita nuestro servicio de desarrollo de software a medida y aplicaciones a medida. También diseñamos arquitecturas elásticas y seguras en la nube con servicios cloud AWS y Azure para maximizar disponibilidad y escalabilidad.

Además, somos especialistas en inteligencia artificial e ia para empresas, implementación de agentes IA, servicios inteligencia de negocio y cuadros de mando con power bi, así como auditorías y pentesting de ciberseguridad. Nuestro enfoque combina estrategia, datos y automatización para generar impacto real en tu negocio.

Palabras clave recomendadas para posicionamiento

aplicaciones a medida, software a medida, inteligencia artificial, ia para empresas, agentes IA, ciberseguridad, pentesting, servicios cloud aws y azure, servicios inteligencia de negocio, power bi

Referencias

Nuxt Turnstile Module y Repositorio del módulo en GitHub

A BREAK?

Play for a moment before you go

OUR SERVICES

How we can help you

Artificial intelligence

AI agents, chatbots, and intelligent assistants that automate tasks and serve your customers 24/7 to improve the efficiency of your business.

More info

Software Development

Web, mobile, and desktop applications, intranets, e-commerce, SaaS, and management platforms designed for your company's specific needs.

More info

Cloud services

Migration, infrastructure, managed hosting, high availability, and security on Microsoft Azure and Amazon Web Services to help your business scale without limits.

More info

Cybersecurity and pentesting

Security audits, penetration testing and protection of applications, data and infrastructure on-premise and cloud, with ethical hacking and regulatory compliance.

More info

Business Intelligence

Dashboards and data analysis with Power BI: we integrate your sources, design dashboards and KPIs and turn your data into decisions.

More info

Process automation

We automate repetitive tasks and connect your applications with n8n, Power Automate, Make, and RPA, eliminating manual work and increasing productivity.

More info

Training for Companies

We train your teams in technology with criteria: web development, databases, Git, best practices and security, automation with n8n, artificial intelligence for companies and creation of AI solutions with Azure AI Foundry.

More info

Code Auditing

We audit the code that you, your team or an AI create: we tell you what is good and what to improve, we secure it and make it ready for production, web or app.

More info

AI Image Generation

We create for you the images that your business needs with artificial intelligence: product, networks, advertising, illustration and avatars. You tell us what you want and we deliver it ready to use.

More info

AI Video Generation

We create videos with artificial intelligence for you: promotional, networking, virtual presenters, dubbing and animations. You tell us the idea and we will deliver it assembled and ready to publish.

More info

AI Conversational Avatars

We create conversational avatars with AI – digital humans with a face and voice – that serve your customers and teams with the knowledge of your company, on your website, interactive monitors, WhatsApp or Teams.

More info

Online Marketing and AI

Google Ads, Meta Ads, LinkedIn Ads and AI Engine Positioning (GEO/AEO): we attract customers and make your brand appear where they search for you, also on ChatGPT, Gemini and Perplexity.

More info

Do you have a project in mind?

Tell us your vision and we'll turn it into a software solution. Whatever the scope, we make your idea real.

Live Chat