@folami I have done exactly what @metalsadman suggests. You could register it however in the boot section and you don’t have to import it on every page. Like the code below.

import ANotFound from 'components/ANotFound';
export default ({ app, router, Vue }) => {
    Vue.component('a-not-found', ANotFound);
};

I just use the not found component in everything not just on pages but tab panes, tables, expansion-item …

My not found component looks like this

<template>
    <div class="absolute-center text-center">
        <p>
            <img
            src="~assets/sad.svg"
            style="width:30vw;max-width:150px;"
            >
        </p>
        <p class="text-faded">Sorry, nothing here...<strong>(404)</strong></p>
        <q-btn
        color="secondary"
        style="width:200px;"
        @click="$router.back()"
        >Go back</q-btn>
    </div>
</template>

<script>
export default {
    name: 'ANotFound'
};
</script>

@metalsadman Thank you for that. You are right it is in there under animations … in fact now I realised I have even used them before although a while back.

@metalsadman Thank you, that’s what I have tried before but didn’t work. Obviously missing the point here. Would you be so kind to show me on this pen how it is done. How can one use these https://quasar.dev/options/transitions transitions on simple elements like a div ?
https://codepen.io/turigeza/pen/PrwgpQ

@s-molinari How do you meant to use these transitions ? Possible a dumb question sorry : ) but I was expecting this to work yet it doesn’t.
https://codesandbox.io/s/codesandbox-app-cltpq

<template>
  <q-page>
    <q-btn class="q-ma-xl" color="primary" label="Show / Hide" v-on:click="show = !show"/>
    <div
      v-show="show"
      transition-show="flip-up"
      transition-hide="flip-down"
      style="
        position:absolute;
        top: 100px;
        left: 100px;
        background-color: Salmon;
        width: 200px;
        height: 200px;
        ">
        Hello
        </div>
  </q-page>
</template>

<script>
export default {
  name: 'PageIndex',
  data () {
    return {
      model: null,
      show: false,
      options: [
        'Google', 'Facebook', 'Twitter', 'Apple', 'Oracle'
      ]
    }
  }
}

</script>

@reath Use an empty bottom slot.

<template v-slot:bottom></template>

https://codepen.io/turigeza/pen/gJNYpg

You can also hide the empty bottom slot when you don’t want to see it if data isn’t missing. I added that as well to the same pen. Just remove the :hide-bottom="emptyData.length > 0" bit if you don’t need it.

Both Add.vue as well as Home.vue has a property addActive.

Just because you set addActive = 'true' ( btw that should be addActive = true no ? ) on the parent component that does not mean the child component property addActive will be true.

Passing data down to child component is by props.
https://vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props

Hope that helps. I would rather learn vue without Laravel.

Hi,

So I got to the stage I need to order data in qTable. (The same with qTree btw).
I would like to sort the rows in the table.

Has anybody managed to get one of the drag and drop libraries working with qTable ?
If so which library have you used ? Would you have an example ?

I had a go with
https://kutlugsahin.github.io/vue-smooth-dnd/#/cards
which on the surface the nicest I have found. But I have no slot for tbody so there is no way I can wrap it with the <Container> tag … anyway Any thoughts would be welcome.

This should really be part of Quasar I feel and not an extension. I am going to start bodging the drag and drop today into qTable to start with and then qTree. And many will end up doing the same because sooner or later you will need it. How else are you supposed to organise a tree for example ? There is not many other ways to do it.

@s-molinari Thanks. I shall not be so lazy and “rebuild” it : )

@hpawar

1. What about the existing events ? There is add remove and also input.
   https://codepen.io/turigeza/pen/pmdWvE