3

What is the correct way to import vuetify's built-in directives ? Like this one.

I'm doing this, which works but seems kinda crappy:

import { Vuetify, VApp, VNavigationDrawer, VProgressLinear, VList, VBtn, VIcon, VGrid, VToolbar } from 'vuetify';
import * as directives from 'vuetify/es5/directives';

Vue.use(Vuetify, {
  components: { VApp, VNavigationDrawer, VProgressLinear, VList, VBtn, VIcon, VGrid, VToolbar },
  directives,
  theme: {
    ...
  }
});

Later in my .vue file:

<template>
  <div v-resize="resize">
    ...
  </div>
</template>

<script>
  export default {
    methods: {
      resize() {
        ...
      }
    }
  };
</script>

Note: the accepted answer is for Vuetify 1, for Vuetify 2 see my answer below.

Christophe Le Besnerais
  • 3,895
  • 3
  • 24
  • 44

2 Answers2

5

clean solution if you want only Resize directive

import { Resize } from 'vuetify/es5/directives';

and simply :

export default {
 ....
  directives : {
     Resize
  }
}
Louis Schwartz
  • 162
  • 2
  • 6
3

The accepted answer is for Vuetify 1, for Vuetify 2 you shoud use:

import { Resize } from 'vuetify/lib/directives';

Vue.use(Vuetify, {
  directives: {
    Resize
  }
});
Christophe Le Besnerais
  • 3,895
  • 3
  • 24
  • 44