Add an AI chatbot to your Nuxt or Vue site.

Nuxt manages <head> and body tags with useHead. Add the ChatBento script in app.vue with tagPosition set to bodyClose and it's placed before </body> on every page. In a plain Vue app built with Vite, paste the snippet into index.html instead.

Start freeFree plan, 50 messages a month. No card required.

Install on Nuxt and Vue in 5 steps

Where it goes: useHead in app.vue (Nuxt), or index.html (Vue + Vite)

1
In ChatBento, open your chatbot, go to Install and copy your bot ID (the data-bot-id value in the snippet).
2
In a Nuxt app, open app.vue and add the useHead call below to its <script setup> block.
3
Set data-bot-id to your bot ID and keep tagPosition: "bodyClose" so the script goes before </body>.
4
Build and deploy.
5
Open your live site in a new tab and click the chat bubble in the corner to test it.

app.vue (Nuxt)

<script setup lang="ts">
useHead({
  script: [
    {
      src: "https://chatbento.com/widget.js",
      async: true,
      "data-bot-id": "YOUR_BOT_ID",
      tagPosition: "bodyClose",
    },
  ],
});
</script>

index.html (Vue + Vite)

  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
    <script src="https://chatbento.com/widget.js" data-bot-id="YOUR_BOT_ID" async></script>
  </body>

Steps follow Nuxt and Vue’s own documentation, checked October 23, 2026.

nuxt.config instead

Nuxt also accepts scripts under app.head in nuxt.config.ts. Nuxt's docs recommend useHead in app.vue for anything beyond static values, and show tagPosition there.

Plain Vue

Without Nuxt, index.html is your app's entry point in Vite, so the plain snippet before </body> is all you need.

Your own button

Call window.ChatBento?.open() from any click handler, for example @click="openChat" on a “Talk to support” button.

What the chatbot does on your Nuxt and Vue site

Answers from your content

Trained on your pages, docs and Q&As. It says so when it doesn't know, instead of guessing.

Hands off to you

When a visitor needs a person, it collects their email and sends you the conversation.

Free to start

A free plan with 50 AI messages a month. Paid plans from $8/month: 80% less than Chatbase.

Comparing tools? See ChatBento vs Chatbase and pricing.

Nuxt and Vue questions. Answered.

Does it survive Nuxt page navigation?

Yes. app.vue wraps every page, so the script loads once and the widget stays open while visitors move between routes.

Does it work with SSR and static generation?

Yes. The script tag is rendered into the HTML, and the widget runs in the browser either way.

Is there a Nuxt module?

No, and you don't need one. It's one script loaded from chatbento.com, so widget updates reach your site without a new deploy.

How much does ChatBento cost?

ChatBento has a free plan with 50 AI messages a month, free forever. Paid plans are Hobby at $8/month, Standard at $30/month and Pro at $100/month. New accounts start with a 14-day trial, no card required.

Other platforms

All 31 guides

Add AI support to your Nuxt and Vue site. Live in minutes.

Start free trial See pricing

14-day free trial. No card required.