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

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

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 :frowning: ).


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

//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',
      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:


This text will be hidden

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

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 :man_shrugging:.

This topic was automatically closed after 42 days. New replies are no longer allowed.