Working after "yarn start", not working after"yarn build"

[kpoxo6op]

Hi all, I installed vue-awesome-swiper to my sage9 site by following README.md.

For some reason, the slider only works properly after “yarn start”. Slider does not work after “yarn build”.

Have a look. My localhost:3000 (yarn start) is at the top of the gif.
My swipe cards are transitioning fine, spacing between the cards works, there is some class magic going on the right (golden highlights), there is inertia after drag release.

The local site after “yarn build” is at the bottom. Spacing is broken. Swipe cards drag survived but it is kind of crippled (inertia is gone ).

Info

• I added Vue by following guide at Adding Vue.js to Sage 9: Dependencies and Approach
• I use TailwindCSS
• I don’t see any new erros in browser developer console
• Other Vue components like vue2-google-maps work fine
• I tried both vue-awesome-slider Global and and Local Registration (Readme.md)

Here my routes/maps.js route file where I have registered vue-awesome-swiper. Vue app and Google maps were registered before:

Summary

//console.log('loaded map.js')
import Vue from 'vue';
import * as VueGoogleMaps from 'vue2-google-maps'
// import VueAwesomeSwiper from 'vue-awesome-swiper'
// import 'swiper/css/swiper.css'
import store from '../vue/vue2-map/src/store';
import AppComponent from '../vue/vue2-map/src/components/App.vue'

Vue.use(VueGoogleMaps, {
  load: {
    key: 'AIzaSyCkY9AU1X_KFg6YoBa-OhBvOquFj9HpE9g',
    libraries: 'places',
  },
})

// Vue.use(VueAwesomeSwiper)

export default {
  init() {
    // JavaScript to be fired on map page
    //console.log('this JS loads ONLY on /map url, this is fine')
    new Vue({
      el: '#map-app',
      store,
      components: {
        app: AppComponent,
      },
      render: h => h('app'),
    })
  },
  finalize() {
    // JavaScript to be fired on all pages, after page specific JS is fired
  },
};

My scripts/vue/.../FullScreenSwipeCardsBar.vue file where I use the slider:

Summary

This text will be hidden

Please help to fix my build, I am not sure what is going on.

[kpoxo6op]

After some experimentation I replaced Vue directive v-show with v-if at my slider wrapper component. Slider runs smoothly now.

//slider is broken
<FullScreenSwipeCardsBar v-show="mobileMapIsFullSreen"></FullScreenSwipeCardsBar>
//slider is fine
<FullScreenSwipeCardsBar v-if="mobileMapIsFullSreen"></FullScreenSwipeCardsBar>

I still don’t know what was the issue, will create a topic on Vue forum .