Okay…figured it out.
Just link to index.html in dist folder.
Much easier than I thought it would be

Thanks for your reply.
Yes, quasar dev works fine.
With firebase do you just serve the dist folder after building?
Thanks for the suggestion.

I’ve built a Quasar project / application (v0.14) and I would like to add it to my portfolio website.
However, I cannot figure out how to display the project on a regular website. I changed the router to “history” mode and updated the public path, but all I get is a blank white page when navigating to the index.html file in the dist folder. Is there any documentation on how to achieve this?

Any guidance is greatly appreciated.

Is there a recommended way to stagger QTransition Group Animations with Animate.css?

I’ve tried many different ways, including binding the enter and leave attributes to methods, and then running a setTimeout, but this didn’t work.

I’ve also tried using a regular Vuejs transition-group and staggering according to the Vuejs docs, but I end up with empty spaces in the dom between the list items.

Any suggestions or recommendations on how to achieve this?

Following is a stripped version of my current list component:

      <q-list no-border>
        <q-list-header>All Items:</q-list-header>
        <q-transition group appear enter="fadeIn"
        leave="bounceOutLeft">
          <q-item v-for="(item, index) in computedItems" :key="index">
                 // list item content
          </q-item>
        </q-transition>
      </q-list>

Thanks so much

If anyone is having an issue with the footer ending up in the middle of the page, I found that fixing the footer to the bottom using css helps:

        <!-- Footer -->
        <q-toolbar slot="footer" style="position: fixed; bottom: 0;">
          <q-toolbar-title>
            Layout Footer
          </q-toolbar-title>
        </q-toolbar>

My experience has been that if I have a lot of content and I scroll to the bottom, pulling from the top of the page no longer works. However, if you are rendering new content at the top of the page (like in the docs) then it’s really not an issue I guess…

@benoitranque @rstoenescu

Great! That works ! Thanks

Template:

    <q-list no-border striped>
      <q-list-header>My List:</q-list-header>
      <q-transition appear group enter="fadeIn" leave="fadeOut">
        <q-item v-for="(item, index) in items" :key="index" :class="{striped: isOdd(index)}">
          <q-item-side>
            <q-checkbox v-model="item.completed" @click.native="saveList" />
          </q-item-side>
          <q-item-main :label="item.label" />
        </q-item>
      </q-transition>
    </q-list>

Return true if index divides by 2:

    methods: {
          isOdd (index) {
            if (index % 2 === 0) {
                 return true
             }
          }
      }

Stylus Class:

    .striped
        background-color #ccc

Okay, what I discovered is that the striped prop doesn’t work if wrapped with q-transition. I removed q-transition and the list items are highlighting correctly.

I don’t know why, so feel free to chime in with a reason/solution.

Thanks

@benoitranque

My apologies…I forgot to include that in the example.

I did try using the “striped” prop, but I still don’t get striped list items.

I’m going to do some more testing on it tonight.

Thanks for your response

I have the following component, however the striped property doesn’t seem to be working.

    <q-list no-border>
      <q-list-header>My List:</q-list-header>
      <q-transition appear group enter="fadeIn" leave="fadeOut">
        <q-item v-for="(item, index) in items" :key="index">
          <q-item-side>
            <q-checkbox v-model="item.completed" @click.native="saveList" />
          </q-item-side>
          <q-item-main :label="item.label" />
        </q-item>
      </q-transition>
    </q-list>

Is there any way to apply the ‘striped’ vue-propery to list items rendered with v-for?

Okay…so I found the best solution, for my case, was to downgrade from latest Cordova ^8.0.0 to ^7.0.1.
The directory structure for the latest Cordova ^8.0.0 is different, and there is not yet sufficient documentation. This was causing all kinds of problems.