@rubs It’s actually in the docs, but as a more complicated example. I just simplified it a bit to make it more clear. https://quasar.dev/vue-components/select#Example--Selected-item-slot

Neat, I recently integrated google maps into a quasar project too. One fun thing I did was support for dark mode, which is reactive to changes:

  computed: {
    styles() {
      if(!this.$q.dark.isActive) {
        return []
      }
      return [
        {
          elementType: "geometry",
          stylers: [{ color: "#242f3e" }]
        },
        {
          elementType: "labels.text.stroke",
          stylers: [{ color: "#242f3e" }]
        },
        {
          elementType: "labels.text.fill",
          stylers: [{ color: "#746855" }]
        },
        {
          featureType: "administrative.locality",
          elementType: "labels.text.fill",
          stylers: [{ color: "#d59563" }]
        },
        {
          featureType: "poi",
          elementType: "labels.text.fill",
          stylers: [{ color: "#d59563" }]
        },
        {
          featureType: "poi.park",
          elementType: "geometry",
          stylers: [{ color: "#263c3f" }]
        },
        {
          featureType: "poi.park",
          elementType: "labels.text.fill",
          stylers: [{ color: "#6b9a76" }]
        },
        {
          featureType: "road",
          elementType: "geometry",
          stylers: [{ color: "#38414e" }]
        },
        {
          featureType: "road",
          elementType: "geometry.stroke",
          stylers: [{ color: "#212a37" }]
        },
        {
          featureType: "road",
          elementType: "labels.text.fill",
          stylers: [{ color: "#9ca5b3" }]
        },
        {
          featureType: "road.highway",
          elementType: "geometry",
          stylers: [{ color: "#746855" }]
        },
        {
          featureType: "road.highway",
          elementType: "geometry.stroke",
          stylers: [{ color: "#1f2835" }]
        },
        {
          featureType: "road.highway",
          elementType: "labels.text.fill",
          stylers: [{ color: "#f3d19c" }]
        },
        {
          featureType: "transit",
          elementType: "geometry",
          stylers: [{ color: "#2f3948" }]
        },
        {
          featureType: "transit.station",
          elementType: "labels.text.fill",
          stylers: [{ color: "#d59563" }]
        },
        {
          featureType: "water",
          elementType: "geometry",
          stylers: [{ color: "#17263c" }]
        },
        {
          featureType: "water",
          elementType: "labels.text.fill",
          stylers: [{ color: "#515c6d" }]
        },
        {
          featureType: "water",
          elementType: "labels.text.stroke",
          stylers: [{ color: "#17263c" }]
        }
      ]
    }
  },
  watch: {
    '$q.dark.isActive'() {
      this.map.setOptions({
        styles: this.styles
      })
    },
  }

Agreed a pen would help, but you may just have to wrap the q-img in a div. Also notice the correct gutter class q-col-gutter-xs

<div class="q-col-gutter-xs row">
   <div
      v-for="(value, index) in images"
      v-bind:key="index"
      class="col-4"
   >
      <q-img
        :src="value"
        :ratio="1"
        />
   </div>
</div>

Edit: also, you want col-4 for three columns. That was likely the error in combination with the wrong gutter class, so you may not even need the extra div, although it doesn’t hurt.

@ak101 would you be so kind to post how you solved it? It will help future visitors who find this thread. Reference

I think that you must provide more code for anyone to be helpful… Are you perhaps replacing the entire array in the vuex store?

@ernestocuzcueta I think you could even make it load all previous items in the onLoad function, but it’s been a while since I used the infinite scroll. It of course also depends on how expensive the onLoad function is, if you have them stored in vuex then it would be easy of course.

Also, just to make sure, you can enable vue router to scroll to the previous position on history back with this in your router/index.js file:

new Router({
  scrollBehavior: (to, from, savedPosition) => {
    if (savedPosition) {
      return savedPosition;
    } else {
      return { x: 0, y: 0 }
    }
  };
  // ...
})

But, since the page being pushed may not have that much height because of the lazy loading, you might need to solve it some other way like:

scrollBehavior: (to, from, savedPosition) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
       if (savedPosition) {
         resolve(savedPosition)
       } else {
         resolve({ x: 0, y: 0 })
       } 
    }, 600) // inelegant, but may work
  })
}

Or even better, create a (throttled) scroll observer on the homepage, and save the position in the history.state object along with the index, and scrollTo on mounted / after you have loaded the items.

Edit, there’s even another way in this thread: https://forum.vuejs.org/t/cant-get-scrollbehavior-working/29077/7

You can create a listener that only fires once, and emit that after you load. That being said, I would probably still handle this all in the homepage component with history state if possible.

I haven’t encountered this, but maybe try to use a QBadge instead?

@murvinlai If the average card size is the same, you can also just place them in a row of columns. Basic HTML structure is like this (not tested)

<div class="row q-col-gutter-md">

  <div class="col-4">
    <div class="column q-gutter-y-md">

      <!-- Items in first column go here -->
      <div class="col-auto">
        <q-card>...</q-card>
      </div>
      <div class="col-auto">
        <q-card>...</q-card>
      </div>
      <!-- End of items in first column -->

    </div>
  </div>


  <div class="col-4">
    <div class="column q-gutter-y-md">

      <!-- Items in second column go here -->
      <div class="col-auto">
        <q-card>...</q-card>
      </div>
      <div class="col-auto">
        <q-card>...</q-card>
      </div>
      <!-- End of items in second column -->

    </div>
  </div>



  <div class="col-4">
    <div class="column q-gutter-y-md">

      <!-- Items in third column go here -->
      <div class="col-auto">
        <q-card>...</q-card>
      </div>
      <div class="col-auto">
        <q-card>...</q-card>
      </div>
      <!-- End of items in third column -->

    </div>
  </div>

</div>

To use dynamic data, you can use computed properties to separate the cards into columns:

computed: {
  col1() {
    // slice the first four items, where this.items is your full list
    return this.items.slice(0, 4)
  },
  col2() {
    return this.items.slice(4, 8)
  },
  col3() {
    return this.items.slice(8, 12)
  },
}

And then:

<div class="row q-col-gutter-md">

  <div class="col-4">
    <div class="column q-gutter-y-md">
      <div 
        v-for="items in col1"
        :key="item.uniq_id"
        class="col-auto"
        >
        <q-card>...</q-card>
      </div>
    </div>
  </div>

  <div class="col-4">
    <div class="column q-gutter-y-md">
      <div 
        v-for="items in col2"
        :key="item.uniq_id"
        class="col-auto"
        >
        <q-card>...</q-card>
      </div>
    </div>
  </div>

  <div class="col-4">
    <div class="column q-gutter-y-md">
      <div 
        v-for="items in col3"
        :key="item.uniq_id"
        class="col-auto"
        >
        <q-card>...</q-card>
      </div>
    </div>
  </div>

</div>

This should work okay if you don’t use infinite scrolling. If you do, you’ll need a bit more logic in the computed properties where you slice the main items array, i.e. for col1 items, it would be something like:

  col1() {
    // slice the first four items
    return [
      ...this.items.slice(0, 4),
      ...this.items.slice(12, 16),
    ]
  },

(of course you can abstract that a bit and not have to hardcode it.) However, since this method won’t auto-balance different height cards, the infinite scroll will get pretty uneven columns at some point where one column is much taller than another one.

You can apply more logic on top of this if you do know the height of each card, but that can get pretty tricky to implement. That being said, also take a look at https://infinite-scroll.com/#masonry-isotope-packery . I haven’t ever integrated that into Vue, so not sure how nicely it will play together.

Edit: a better computed function is actually like this (it just dawned on me )

computed: {
  cols() {
    const cols = [ [], [], [] ]
    for(let i = 0; i < this.items.length; i++) {
      cols[i%3].push(this.items[i])
    }
    return cols
  },
}

and then using v-for="items in cols[0], v-for="items in cols[1], and v-for="items in cols[2]. That should play nicely with the last page where you won’t have all 12 or whatever amount of items I assumed in the original post.

@Lou-Rectoret I think you just want:

/*    /index.html   200

Edit: and no other rules

@murvinlai What exactly do you want to accomplish? How many cards will you have? Will they change often? Will there always be the same amount of cards shown?

@Lou-Rectoret I haven’t deployed to netlify before, but as I understand it, they’re basically a CDN, so you cannot run SSR mode. However to fix your SPA problem, try this: https://docs.netlify.com/routing/redirects/rewrites-proxies/#history-pushstate-and-single-page-apps

@murvinlai Perhaps I wasn’t clear enough in my answer: the height must be set on the q-table itself, not the individual items. So, you’ll need to know beforehand the approximate heights of each card and calculate from there. It isn’t ideal, but that’s the only css-only approach. It’s possible to use JS to actually calculate and resize the q-table though, but it’s not a great UX.

@murvinlai I am not sure it has anything to do with the iframes themselves. The biggest downside about the masonry layout is that you need to know the height of the container. It looks like you may not have updated the height to account for the taller cards. Can you try to increase the height first and see if it still breaks?

@reks I would make a new sass file and override any css styles there:

// quasar.conf
module.exports = function (ctx) {
  return {
    // ...
    css: ['custom.sass'],
    // ...
  }
}

/* src/css/custom.sass */

/* Add custom styles here */

.q-drawer 
  background: blue

@daniel If you ever end up using SSR, you instead need to pass the store instance to the DemoService constructor, at least that’s how I do it. Then just store it as this.store.

The reason Quasar doesn’t export the store directly is precisely because in SSR, each store instance is separate for each request. If you aren’t using SSR then metalsadman’s answer is much easier, and you can do the same with the router instance as well.

This is a great article by Tobias about singletons and SSR with Quasar: https://dev.to/quasar/quasar-ssr-using-cookies-with-other-libs-services-4nkl

@ak101 would you be so kind to post how you solved it? It will help future visitors who find this thread. Reference

@gaguerrero You can easily put anything you want in a qdialog component. Can you explain more your problem?

    <q-dialog v-model="isShowing">
      <q-card>
        <q-card-section>
          <div class="text-h6">Alert</div>
        </q-card-section>

        <q-card-section class="q-pt-none">
          <q-img src="http://example.com/image.png" />
        </q-card-section>

        <q-card-actions align="right">
          <q-btn flat label="OK" color="primary" v-close-popup />
        </q-card-actions>
      </q-card>
    </q-dialog>