Failed to resolve directive: click-outside

[rbayley]

Hi,

I am testing the component and I keep getting [Vue warn]: Failed to resolve directive: click-outside (found in VFormBase)

<template>
    // child view
    <v-form>
      <!-- vuetif-form-base component -->
      <v-form-base :model="Model" :schema="Schema" @input="handleInput"/>
    </v-form>

</template>
<script>
// Javascript
import VFormBase from 'vuetify-form-base'

export default {    
  components:{ VFormBase },
  data () {
    return {
      Model: {
        name: 'Stoner',
        position: 'Admin',
        tasks: [
          { 
            done: true,
            title: 'make refactoring' 
          },
          { 
            done: false,
            title: 'write documentation'  
          },
          { 
            done: true,
            title: 'remove logs'  
          }        
        ]
      },
      Schema: {
        name: { type:'text', label:'Name' },
        position: { type:'text', label:'Position' },
        tasks: { 
            type: 'array',
            schema: { 
                done:{ type:'checkbox', label:'done', col:4}, 
                title:{ type:'text', col:8 }
            } 
        }
      }
    }
  },
  methods:{
    handleInput( ev ){
      console.log( ev ) 
    }
  }
}
</script>

any ideas why this is happening?

regards

[adamenveil]

Did you ever find a solution for this?

[Radiancy]

plugins/vuetify.js

import { Ripple, Intersect, Touch, Resize, ClickOutside } from 'vuetify/lib/directives'; import "@/scss/vuetify/overrides.scss"; Vue.use(Vuetify, { components: { VCard,VRow, VTooltip, VCol, VTextField, VCheckbox, VSelect,VFileInput,VSwitch,VIcon,VBtn,VTextarea,VLabel,VListItemContent,VListItemIcon,VListItem,VListItemGroup,VList,VToolbar,VToolbarTitle,VListItemTitle,VSheet }, directives: { ClickOutside, Ripple, Intersect, Touch, Resize }, });