Skip to main content

Nuxt.js

What is Nuxt.js?​

Nuxt.js is an open-source JavaScript framework built on top of Vue.js that simplifies the development of modern web applications, especially server-side rendered (SSR) apps, static websites, and single-page applications (SPA).

🔍 Key Features of Nuxt.js​

  1. Built on Vue.js

    It extends the core Vue capabilities and brings powerful conventions and configurations to streamline development.

  2. Server-Side Rendering (SSR)

    By default, Nuxt supports SSR, helping improve performance, SEO, and load times.

  3. Static Site Generation (SSG)

    Nuxt can generate static websites, making it ideal for fast, secure, and scalable deployments (similar to JAMstack).

  4. File-Based Routing

    Nuxt automatically generates routes based on the file structure in the pages/ directory.

  5. API Integration with Nitro

    Nuxt 3 introduces Nitro — a server engine that allows you to deploy on any platform and even use Nuxt as a backend API.

  6. Modular Architecture

    Nuxt has a powerful module system that allows integration of features like PWA, Axios, Auth, Tailwind, and more via plugins or modules.

  7. Typescript Support

    Out-of-the-box support for TypeScript, making it easier for large-scale applications and better tooling.

  8. Auto-imported Components & Composables

    Less boilerplate code — components, composables, and utilities are auto-imported.

  9. Developer Experience (DX)

    Hot Module Replacement (HMR), detailed error messages, and great CLI tools for scaffolding and managing your project.

🚀 Use Cases​

  • SEO-friendly websites
  • Content-driven sites (blogs, marketing pages)
  • E-commerce platforms
  • Dashboard and admin panels
  • JAMstack applications

🆕 Nuxt 3 (Latest Major Version)​

Nuxt 3, the latest version, brings:

  • Full support for Vue 3
  • Vite support for faster development
  • Composition API
  • Improved performance and developer experience

Example Use

npx nuxi init my-nuxt-app
cd my-nuxt-app
npm install
npm run dev

BluBuddy Widget Integration Guide for Nuxt.js​

BluBuddy's widget can be seamlessly integrated into a Nuxt.js project by inserting the provided custom script into your app layout. Follow the steps below for successful implementation.

Step 1: Open Your Nuxt.js Project

Make sure you have an existing Nuxt.js project. If not, create one using:

npx nuxi init my-nuxt-app
cd my-nuxt-app
npm install

Step 2: Locate the Layout File

In Nuxt 3, layouts are placed in the layouts directory.

  • Open layouts/default.vue
  • If the file doesn’t exist, create it manually inside /layouts.

Step 3: Insert the BluBuddy Script

  • Paste your BluBuddy widget script inside the <head> section using Nuxt's <Head> component (in Vue template syntax):
<script setup>
useHead({
  script: [
    {
      src: "https://app.blubuddy.in/chat-widget.js", // Use your actual script URL
      defer: true,
    },
  ],
})
</script>

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

Step 4: Rebuild and Run the App

  • After saving your changes, start your development server:
npm run dev

Visit your local site (usually at http://localhost:3000) to see the BluBuddy widget active on the page.

Step 5: Deploy Your Changes

  • Once verified locally, deploy your Nuxt.js site to your hosting platform (Vercel, Netlify, etc.). The widget will work globally across all pages using the layout.

💡 Notes​

  • If you want the widget to load only on specific pages, you can conditionally include the script using Nuxt page-level components instead of the global layout.
  • For Nuxt 2 users, use the head property in the default.vue or nuxt.config.js.

Having Trouble? Let's Troubleshoot!​

If your BluBuddy chatbot isn’t appearing or functioning properly on your Nuxt.js, try these quick fixes:

  1. Check Code Placement: Ensure the chatbot script is correctly pasted in Nuxt.js as per directions above.
  2. Verify Installation Code: Ensure that the "Update" button was pushed when the bot was being installed on Nuxt.js.
  3. Clear Cache & Refresh: Clear browser cache and refresh your website. Try opening it in Incognito Mode.

If everything is correct and you are still unable to move forward, write to us at hello@blubuddy.io Our Team will reach out to you as soon as possible for troubleshooting your problem.