Global Directives & components

[synbits]

Hello,

When I import for example Toast and QBtn in my main.js

# Example in main.js
import Quasar, {
  Toast,
  QBtn
} from 'quasar'

...

Vue.use(Quasar, {
  components: {
    QBtn
  },
  directives: 
    Toast
  }
})

I still need to import Toast in my *.vue files but not QBtn?

# Example in edit.vue
import {
    Toast
} from 'quasar'

Is it possible to import Toast globally and not in each file? Or what am I doing wrong (read not seeing)?

Thanks!

[benoitranque]

Toast is not a directive. directives are things like

[benoitranque]

Toast is not a directive. directives are things like v-ripple that go as properties on dom items. Like this:

<div v-ripple></div>

Toast is an object with methods. You have to import it in each component that uses it. Or you could do this (always make sure the you are no overwriting anything when doing this):

# Example in main.js
import Quasar, {
  Toast
} from 'quasar'

...
// before new Vue()
Vue.prototype.$toast = Toast

With this you can access this.$toast the same way you access this.$router anywhere in your app

[synbits]

Thanks, this is the answer I needed!

[synbits]

Can I do the same with a normal directive like GoBack? Only add it to main.js somehow?

[benoitranque]

Make component /directive globally available:

// Example in main.js
import Quasar, {
  Ripple,
  QBtn
} from 'quasar'

...

Vue.use(Quasar, {
  components: {
    QBtn
  },
  directives: 
    Ripple
  }
})

Note this does not take advantage of tree shaking. To maximize loading speed, best load components in each view.
You could add anything to the Vue prototype, make sure not to overwrite anything.
Again, best not overload it with something you don’t use all the time. I usually add axios as $http