Añade un agente de voz con IA a una app de Vue 3 (guía 2026)

Cómo añadir AnveVoice a una app de Vue

En un proyecto de Vue 3 creado con create-vue, pega la etiqueta de script de AnveVoice en index.html, en la raíz del proyecto, junto a package.json. Vite copia las URL absolutas sin modificarlas. Si usas Nuxt en lugar de Vue puro, sigue la guía de Nuxt. Pasos comprobados con la documentación oficial el 2026-10-14.

En resumen

• Dónde va el código: index.html en la raíz del proyecto (no en src/ ni en public/)
• Programación necesaria: Ninguna para la etiqueta estática; unas diez líneas de script para el cargador onMounted opcional
• Límites del plan: Ninguno por parte de Vue o Vite. El plan Free de AnveVoice es suficiente
• Tiempo: Unos 2 minutos más una compilación

Qué cubre esta guía

La guía de inicio rápido de Vue crea proyectos nuevos con create-vue (npm create vue@latest), una herramienta que configura una single-page app basada en Vite con componentes de archivo único. Esta página es para esa configuración. Vue renderizado en el servidor mediante Nuxt mantiene su estructura de página en otro lugar y tiene su propia guía, mientras que una app de Vue incrustada en un sitio existente renderizado en el servidor está cubierta por la guía de HTML simple. Primero obtén tu ID de incrustación: inicia sesión en app.anvevoice.app, crea un bot para sitio web en el plan Free y copia el ID que aparece en el panel.

• 1. Copia la etiqueta de instalación — Sustituye YOUR_EMBED_ID por el tuyo. Parámetros opcionales de URL: &position=bottom-left y &theme=dark. <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>

Método 1: pon la etiqueta en index.html (recomendado)

La guía de Vite indica que index.html es el punto de entrada principal de un proyecto y que se encuentra en la raíz del proyecto, no dentro de public. El scaffold de Vue hereda esa estructura. El archivo contiene un div con id app y un script de módulo que apunta a /src/main.js o /src/main.ts.

• 1. Abre index.html — Está en la misma carpeta que package.json y vite.config. No busques en src/ ni en public/.
• 2. Añade la etiqueta antes de la etiqueta de cierre body — Colócala después de la línea de script existente con type="module". Como tiene el atributo async, el orden no importa para la carga, pero dejar primero el código de la app hace el archivo más fácil de leer.
• 3. Reinicia o vuelve a compilar — npm run dev sirve la página y se recarga cuando cambia index.html. npm run build escribe el sitio de producción en ./dist, que la guía de Vue indica como salida de compilación.

Cómo trata Vite la etiqueta

Vite procesa index.html como código fuente: los scripts de módulo pasan a formar parte del grafo de compilación. Un script sin type="module" no puede empaquetarse, pero una URL https absoluta se reconoce como externa y se deja tal cual, sin advertencias. La guía de características de Vite también documenta un atributo vite-ignore que excluye un elemento del procesamiento de HTML, que la guía sugiere para recursos externos y referencias a CDN. No deberías necesitarlo, pero es la salida documentada si un plugin tuyo reescribe las etiquetas script.

Método 2: cárgala desde un componente, solo en producción

Úsalo si quieres que el agente de voz se omita durante el desarrollo local, o si el ID de incrustación cambia según el entorno. Vite expone import.meta.env.PROD y cualquier variable que empiece por VITE_ al código del cliente. El ID de incrustación es público por diseño, porque ya aparece en la URL del script, así que una variable VITE_ es apropiada; mantén los secretos reales fuera de las variables VITE_, como advierte la guía de Vite.

• 1. Añade la variable — Crea .env.production en la raíz del proyecto. Vite lee los archivos de entorno al arrancar, así que reinicia el servidor de desarrollo después de editarlo. VITE_ANVEVOICE_EMBED_ID=YOUR_EMBED_ID
• 2. Cárgala en App.vue — Esto se ejecuta solo en el navegador, solo en compilaciones de producción y solo una vez. <script setup> import { onMounted } from 'vue' onMounted(() => { const id = import.meta.env.VITE_ANVEVOICE_EMBED_ID if (!import.meta.env.PROD || !id) return const src = `https://anvevoice.app/embed.js?embedId=${id}` if (document.querySelector(`script[src="${src}"]`)) return const s = document.createElement('script') s.src = src s.async = true document.body.appendChild(s) }) </script>

Vue Router, KeepAlive y recarga en caliente

• Vue Router cambia la vista sin recargar el documento, así que una etiqueta cargada una vez sigue funcionando entre rutas. No se necesita ningún hook del router.
• Durante npm run dev con el método 2 no verás el botón, porque PROD es false. Quita esa comprobación o ejecuta npm run build seguido del comando de preview para probar.
• Si no tienes ningún paso de compilación y cargas Vue desde un CDN, como describe la guía de Vue, pega la etiqueta en el mismo archivo HTML; nada más cambia.
• Las páginas servidas por una app de Vue necesitan aún un servidor HTTP que recurra a index.html para los enlaces directos; de lo contrario, los visitantes que abran una URL anidada reciben un 404 y nunca cargan el script.

Comprueba que funciona

• 1. Abre la app compilada o en ejecución — Usa una ventana privada. El acceso al micrófono necesita HTTPS en un sitio desplegado; los navegadores permiten localhost.
• 2. Haz clic en el micrófono — Aparece un botón redondo abajo a la derecha. Concede el acceso al micrófono y di una pregunta.
• 3. Inspecciona la salida — Abre dist/index.html después de compilar y busca anvevoice.app. Deberías encontrar la etiqueta exactamente una vez.

Problemas comunes

• Editaste el archivo equivocado: una etiqueta en public/index.html o en src/ no hace nada, porque Vite solo compila desde el index.html de la raíz.
• El botón funciona en desarrollo pero falta en producción: tu archivo de entorno se llama .env.local, que el CI de producción no tiene. Usa .env.production o define la variable en los ajustes de compilación de tu host.
• Widget duplicado: están tanto la etiqueta HTML como el cargador onMounted. Elimina una.
• Bloqueado por CSP: permite https://anvevoice.app para scripts y conexiones.

Fuentes

• Docs de Vue: inicio rápido (create-vue) (https://vuejs.org/guide/quick-start.html) — consultado el 2026-10-14
• Docs de Vite: primeros pasos (index.html y raíz del proyecto) (https://vite.dev/guide/) — consultado el 2026-10-14
• Docs de Vite: características (procesamiento de HTML y vite-ignore) (https://vite.dev/guide/features.html) — consultado el 2026-10-14
• Docs de Vite: variables de entorno y modos (https://vite.dev/guide/env-and-mode.html) — consultado el 2026-10-14

Relacionado

• Cómo añadir AnveVoice a una app de React
• Cómo añadir AnveVoice a una aplicación de Angular
• Cómo añadir AnveVoice a un sitio web HTML sencillo

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.