Añade un agente de voz con IA a Nuxt (guía de app.head)

Cómo añadir AnveVoice a una aplicación Nuxt

En Nuxt, declara el script una sola vez en app.head dentro de nuxt.config.ts, con async y tagPosition configurado como bodyClose. Así, cada página renderizada en el servidor o generada lleva la etiqueta. Usa useHead en app.vue si prefieres ponerla en el código. Pasos comprobados con la documentación oficial el 2026-10-14.

En resumen

• Dónde va el código: nuxt.config.ts (app.head.script) o useHead() en app/app.vue
• Atributos: src, async: true, tagPosition: 'bodyClose'
• Programación necesaria: Una entrada de configuración; no hay módulo que instalar
• Se aplica a: SSR, la salida de nuxt generate y la navegación en el cliente

Antes de empezar

Obtén el embed ID en app.anvevoice.app; el plan Free no requiere tarjeta. Los ejemplos usan las convenciones de Nuxt 4 (el directorio de código app/ y TypeScript). En un proyecto Nuxt 3 más antiguo, las mismas claves funcionan, pero app.vue está en la raíz del proyecto. Nuxt construye el head del documento con Unhead. La referencia oficial de configuración describe app.head como la configuración predeterminada del head en cada página, y su lista de scripts convierte cada objeto en una etiqueta script, con las claves del objeto convertidas en atributos HTML. Eso es lo que permite que una sola entrada instale AnveVoice en todo el sitio.

Método 1: app.head en nuxt.config.ts (recomendado)

La guía de SEO y meta de Nuxt indica que proporcionar una propiedad app.head en nuxt.config.ts personaliza de forma estática el head de toda la aplicación. También señala que este método no admite datos reactivos, lo cual no importa aquí porque la etiqueta nunca cambia.

• 1. Abre nuxt.config.ts — Está en la raíz del proyecto.
• 2. Añade la entrada del script — Coloca el objeto script bajo app.head. async evita que el archivo bloquee el renderizado, y tagPosition bodyClose añade la etiqueta al final del body. // nuxt.config.ts export default defineNuxtConfig({ app: { head: { script: [ { src: "https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID", async: true, tagPosition: "bodyClose", }, ], }, }, });
• 3. Reinicia el servidor de desarrollo — Detén y vuelve a iniciar nuxt dev para que se aplique el cambio de configuración.

Método 2: useHead en app.vue

Usa esta versión si tu equipo prefiere el código a la configuración, o si quieres añadir la etiqueta de forma condicional. Nuxt documenta pasar una matriz de scripts a useHead, normalmente en app.vue, y permite que la misma forma de objeto incluya src y async.

• 1. Edita app/app.vue — Llama a useHead en el bloque script setup de tu componente raíz. <!-- app/app.vue --> <script setup lang="ts"> useHead({ script: [ { src: "https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID", async: true, tagPosition: "bodyClose", }, ], }); </script> <template> <NuxtPage /> </template>
• 2. Limítalo si hace falta — Para limitar el agente a ciertas páginas, mueve la llamada a useHead a los componentes de esas páginas en lugar de app.vue.

Renderizado en el servidor frente a navegación en el cliente

Con renderizado en el servidor o con nuxt generate, la etiqueta script se escribe en el HTML, así que los visitantes y los rastreadores la ven en la primera carga. En la navegación en el cliente entre rutas, la entrada del head sigue registrada, y el script de AnveVoice ignora una segunda copia en la misma página, así que los cambios de ruta no crean duplicados. La opción tagPosition acepta head, bodyClose y bodyOpen. bodyClose es un buen lugar para un widget que no necesita ejecutarse antes de que se pinte la página.

Comprueba que funciona

• 1. Compila y previsualiza — Ejecuta nuxt build y después nuxt preview (o nuxt generate y sirve la salida), para probar el HTML de producción.
• 2. Mira el código fuente de la página — Busca anvevoice.app/embed.js cerca del final del body para confirmar que la etiqueta está en el HTML renderizado en el servidor.
• 3. Prueba el botón de voz — Abre el sitio, localiza el botón redondo del micrófono abajo a la derecha, permite el acceso al micrófono y haz una pregunta.

Problemas habituales

• La etiqueta falta tras editar la configuración: reinicia el servidor de desarrollo; algunos cambios de configuración no se recargan en caliente.
• La etiqueta aparece dos veces: está declarada tanto en nuxt.config.ts como en una llamada a useHead. Conserva una sola.
• Una CSP la bloquea: permite https://anvevoice.app en script-src si usas un módulo de seguridad o cabeceras personalizadas.
• Micrófono bloqueado: una cabecera Permissions-Policy que desactive el micrófono impide la solicitud, y la página debe estar en HTTPS.

Fuentes

• Documentación de Nuxt: SEO y meta (app.head, tagPosition) (https://nuxt.com/docs/4.x/getting-started/seo-meta) — consultado el 2026-10-14
• Documentación de Nuxt: referencia de app.head en nuxt.config (https://nuxt.com/docs/4.x/api/nuxt-config) — consultado el 2026-10-14
• Documentación de Nuxt: useHead (https://nuxt.com/docs/4.x/api/composables/use-head) — consultado el 2026-10-14

Relacionado

• Cómo añadir AnveVoice a una app de Vue
• Cómo añadir AnveVoice a una aplicación Next.js
• Cómo añadir AnveVoice a un sitio alojado en Netlify
• Cómo añadir AnveVoice a una aplicación de SvelteKit

Prueba AnveVoice en tu sitio

Plan gratuito: 0 US$, 50.000 tokens al mes, sin tarjeta. Obtén tu ID de inserción en el panel y pega una etiqueta.