Search code examples
servernuxt.jspage-refresh

Client Side Component not working on Server after refreshing in NUXT

I am using the vue-hotel-datepicker6 in Nuxt and it is working fine on localhost, but I faced a problem when I deployed the app on the server, It first time load the calendar properly but after refreshing not load the calendar again.
Similar situation I faced with the vue-mapbox.

<client-only>
      <HotelDatePicker
        v-show="!isLoading"
        :startingDateValue="initialStartDate"
        :endingDateValue="initialEndDate"
        :key="calendarKey"
        :alwaysVisible="visibility"
        :showSingleMonth="showSingleMonth"
        format="DD-MM-YYYY"
        :periodDates="periodDates"
        :showPrice="true"
        :hoveringTooltip="false"
        priceSymbol="€"
        :disabledDates="disabledDates"
        :halfDay="false"
        :endDate="endDate"
        :disableCheckoutOnCheckin="true"
        @previous-month-rendered="onPreviousMonth"
        @next-month-rendered="onNextMonth"
        @check-in-selected="checkInSelected"
        @check-out-changed="checkOutChange"
      />
    </client-only>
Solution

  • I solve it on the server by using Static site generation (aka SSG).
    For that, you need to change the target from 'server' to 'static' and don't forget to run yarn generate rather than yarn build.

    You can follow these article for using static site generation: