unknown custom element error: v-checkbox, v-select about vuetify-form-base HOT 9 CLOSED

@wotamann
I'm getting the same issue with my first attempt of using this package. If I put <v-select></v-select> in the template, that element works fine. But using this schema gives me the same error:

      mySchema: {
        name: { type: 'text', label: 'Name' },
        password: { type: 'password', label: 'Password' },
        email: { type: 'email', label: 'Email' },
        checkbox: { type: 'checkbox', label: 'Checkbox' },
        select: { type: 'select', label: 'Select', items: ['Tesla', 'Jobs', 'Taleb'] }
      } 

from vuetify-form-base.

For those like me having this problem, its because we are using tree-shaking (A-la-carte) when loading Vuetify, and since the fields are generated dynamically, webpack doesn't load the modules.

To fix this i copied the index.js and .vue files in my project instead of using npm, then i added this line at the beginning of <script> part of the vue file (line 177):
import { VSelect } from 'vuetify/lib'

And this line in the "export default" part (line 229)

components:{VSelect},

You just have to repeat for every component you need that isn't loaded normally.

from vuetify-form-base.

You have to install vuetify (quickstart) in order to recognize the custom element .

from vuetify-form-base.

I'm getting the same error, and I've installed Vuetify.
Can you help me, @wotamann ?

from vuetify-form-base.

I'ved checked your schema with 'select'. It works on my setting.

If you have vuetify 1.0 you must update to vuetify 2.0. Otherwise you could try to install the Demo inside Folder 'example' and try to run it.

from vuetify-form-base.

@webdo

For those like me having this problem, its because we are using tree-shaking (A-la-carte) when loading Vuetify, and since the fields are generated dynamically, webpack doesn't load the modules.

thanks for your contribution and suggestion for a solution

from vuetify-form-base.

@webdo
In my case i altered /src/plugins/vuetify.js. No need to copy/alter the original files.

`import Vuetify, { VLayout, VCheckbox, VSelect } from "vuetify/lib";

Vue.use(Vuetify, {
components: { VLayout, VCheckbox, VSelect },
});`

Can be found here https://vuetifyjs.com/en/customization/a-la-carte

from vuetify-form-base.

@Rambone, your solution in the vuetify plugin was precisely what I needed. Thanks!

I also had to add directives:

import { Ripple, Intersect, Touch, Resize } from "vuetify/lib/directives";

Vue.use(Vuetify, {
  components: { ... },
  directives: { Ripple, Intersect, Touch, Resize },
});

But, once your tip pointed me in the right direction, that was easy enough.

from vuetify-form-base.

@mcasto, glad to hear it helped you.

from vuetify-form-base.