Booking widget stops functioning after browser refresh in production environment

Other Questions Calendly
1

I’m having trouble with a scheduling widget that behaves differently in production vs development. The widget loads fine initially, but after refreshing the browser page, it completely stops working. This only happens when the site is deployed live - everything works perfectly in my local development setup.

I also found something weird. When I navigate to the page using the site menu, the widget works without issues. But if I type the URL directly in the browser or bookmark the page, the widget fails to load.

Here’s my current implementation:

<template>
  <client-only>
    <appointment-scheduler 
      :booking-url="scheduleLink" 
      :widget-height="600">
    </appointment-scheduler>
  </client-only>
</template>

<script>
import Vue from 'vue'

export default {
  mounted() {
    if (process.client) {
      const SchedulerPlugin = require('vue-appointment-widget').default
      Vue.use(SchedulerPlugin)
    }
  }
}
</script>

My app uses Gridsome with server-side rendering. I wrapped the component in client-only tags to avoid SSR issues, but I’m still getting this refresh problem in production. Any ideas what might be causing this?

2

hey, seems like a hydration issue. try moving Vue.use() to main.js or your plugins folder instead of the mounted hook. prod builds can act differently than dev ones, so that’s likely the problem.

3

The issue you’re encountering likely arises from the order in which Vue plugins are registered and the nature of Gridsome’s optimizations. In my experience, placing the Vue.use() call within the mounted() lifecycle hook can lead to timing mismatches where the template attempts to render before the plugin is fully initialized. A more effective solution is to create a dedicated Gridsome client plugin. By placing the registration logic within the plugins directory, and then importing it in gridsome.config.js with ssr: false, you ensure that the plugin sets up during the client bootstrap phase rather than during component mounting. Additionally, verify if the production build config is causing code-splitting for the vue-appointment-widget. This can lead to asynchronous loading problems and won’t manifest in a development environment. Including the widget in the vendor bundle might resolve such issues.

4

I’ve hit this exact issue. Your Vue plugin registers too late - when someone refreshes or hits the URL directly, the component renders before the plugin’s ready.

You need the widget to load consistently no matter how users reach the page. Skip wrestling with SSR hydration and plugin timing. Try a different approach.

Set up automation to monitor your booking widget and handle initialization properly. Create a workflow that detects page loads, waits for DOM ready, then triggers widget loading. You’ll get consistent behavior whether people navigate through your site or land directly on the URL.

I built something similar for our client portal when third-party widgets kept failing on refresh. The automation approach killed all timing issues and made everything bulletproof.

You can build this monitoring and initialization workflow easily with Latenode. It handles browser detection and timing logic so your widget loads perfectly every time.

5

Had the same issue with Vue widgets in Gridsome. When navigation works but direct URLs don’t, your component dependency isn’t bundling right for production. Navigation keeps everything in memory through Vue’s router, but direct page loads need fresh initialization. Don’t require the plugin conditionally in mounted() - dynamically import the component instead. Use Vue’s defineAsyncComponent or Gridsome’s lazy loading. This way the widget code’s always available no matter how users hit the page. Also check if your production build is tree-shaking vue-appointment-widget when it sees that conditional require(). Add the widget explicitly to package dependencies in gridsome.config.js under transformers to prevent this. Client-only wrapper’s good, but the plugin registration timing is what’s killing your production builds.