« Unknown custom element » for all Vuetify Components

[shynuu]

Hi folks,

I'm currently facing an Issue with this plugin. I'm trying to use it with Vuetify 1.4.3 and Vue-CLI 3.

I'm getting all those warnings into the console :

[Vue warn]: Unknown custom element: <VIcon> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <MyUploader>
       <VImageInput>
         <Roles> at src/components/page/Roles.vue
           <VContent>
             <SymbioContent> at src/components/layout/Content.vue
               <VApp>
                 <App> at src/App.vue
                   <Root> vue.runtime.esm.js:601
[Vue warn]: Unknown custom element: <VBtn> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <VImageInput>
       <Roles> at src/components/page/Roles.vue
         <VContent>
           <SymbioContent> at src/components/layout/Content.vue
             <VApp>
               <App> at src/App.vue
                 <Root> vue.runtime.esm.js:601
[Vue warn]: Unknown custom element: <VIcon> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <VImageInput>
       <Roles> at src/components/page/Roles.vue
         <VContent>
           <SymbioContent> at src/components/layout/Content.vue
             <VApp>
               <App> at src/App.vue
                 <Root> vue.runtime.esm.js:601
[Vue warn]: Unknown custom element: <v-spacer> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <VImageInput>
       <Roles> at src/components/page/Roles.vue
         <VContent>
           <SymbioContent> at src/components/layout/Content.vue
             <VApp>
               <App> at src/App.vue
                 <Root> vue.runtime.esm.js:601
[Vue warn]: Unknown custom element: <VBtn> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <VImageInput>
       <Roles> at src/components/page/Roles.vue
         <VContent>
           <SymbioContent> at src/components/layout/Content.vue
             <VApp>
               <App> at src/App.vue
                 <Root> vue.runtime.esm.js:601
[Vue warn]: Unknown custom element: <VIcon> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <VImageInput>
       <Roles> at src/components/page/Roles.vue
         <VContent>
           <SymbioContent> at src/components/layout/Content.vue
             <VApp>
               <App> at src/App.vue
                 <Root> vue.runtime.esm.js:601
[Vue warn]: Unknown custom element: <VBtn> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <VImageInput>
       <Roles> at src/components/page/Roles.vue
         <VContent>
           <SymbioContent> at src/components/layout/Content.vue
             <VApp>
               <App> at src/App.vue
                 <Root> vue.runtime.esm.js:601
[Vue warn]: Unknown custom element: <VIcon> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <VImageInput>
       <Roles> at src/components/page/Roles.vue
         <VContent>
           <SymbioContent> at src/components/layout/Content.vue
             <VApp>
               <App> at src/App.vue
                 <Root> vue.runtime.esm.js:601
[Vue warn]: Unknown custom element: <VBtn> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <VImageInput>
       <Roles> at src/components/page/Roles.vue
         <VContent>
           <SymbioContent> at src/components/layout/Content.vue
             <VApp>
               <App> at src/App.vue
                 <Root> vue.runtime.esm.js:601
[Vue warn]: Unknown custom element: <VIcon> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <VImageInput>
       <Roles> at src/components/page/Roles.vue
         <VContent>
           <SymbioContent> at src/components/layout/Content.vue
             <VApp>
               <App> at src/App.vue
                 <Root> vue.runtime.esm.js:601
[Vue warn]: Unknown custom element: <VBtn> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <VImageInput>
       <Roles> at src/components/page/Roles.vue
         <VContent>
           <SymbioContent> at src/components/layout/Content.vue
             <VApp>
               <App> at src/App.vue
                 <Root> vue.runtime.esm.js:601
[Vue warn]: Unknown custom element: <VIcon> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <VImageInput>
       <Roles> at src/components/page/Roles.vue
         <VContent>
           <SymbioContent> at src/components/layout/Content.vue
             <VApp>
               <App> at src/App.vue
                 <Root> vue.runtime.esm.js:601
[Vue warn]: Unknown custom element: <VSlider> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <VImageInput>
       <Roles> at src/components/page/Roles.vue
         <VContent>
           <SymbioContent> at src/components/layout/Content.vue
             <VApp>
               <App> at src/App.vue
                 <Root>

All the components from Vuetify IN this plugin are not displaying and leading to the plugin to be unusable (such as the buttons and the slider to zoom in and out from the picture)

I have imported the plugin in the 'plugins/vuetify.js' file, here is my code in the plugin file

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'
import { Scroll } from 'vuetify/lib/directives'

Vue.use(Vuetify, {
  iconfont: 'md',
  directives: { Scroll }
})

import VImageInput from 'vuetify-image-input';

Vue.component("v-image-input", VImageInput);

And here is my code from my Roles.vue file

<template>
  <div>
    <v-container grid-list-xs fill-height justify-center>
      <v-image-input
        v-model="image"
        :image-quality="0.85"
        clearable
        image-format="png"
        rotate-clockwise-icon="crop_rotate"
      ></v-image-input>
    </v-container>
  </div>
</template>


<script>
export default {
  data() {
    return {
      image: null
    };
  },
  methods: {
    p() {
      console.log(image);
    }
  }
};
</script>

Maybe I'm doing something wrong, this is my first time using a plugin in Vue CLI 3. Also note that Vuetify is working great without any issue OUTSIDE the plugin.

Before using the plugin I have installed all the dependencies

npm install @seregpie/claw
npm install vueclaw
npm install vuetify-image-input

Before uploading the file, the plugin looks like this

And after, it looks like this

Thank you for your help,

Doqs

[SeregPie]

I see you are using a-la-carte.

https://vuetifyjs.com/en/framework/a-la-carte

Vuetify does not support external components very well.

The easiest way is to import everything.

import Vue from 'vue';
import Vuetify from 'vuetify';

Vue.use(Vuetify);

[shynuu]

I see you are using a-la-carte.

https://vuetifyjs.com/en/framework/a-la-carte

Vuetify does not support external components very well.

The easiest way is to import everything.

import Vue from 'vue';
import Vuetify from 'vuetify';

Vue.use(Vuetify);

That worked with this code but yes importing everything from Vuetify is working now in the plugin

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/src/stylus/app.styl'

Vue.use(Vuetify)

Thank you :)

[Pantomhobol]

I see you are using a-la-carte.

https://vuetifyjs.com/en/framework/a-la-carte

Vuetify does not support external components very well.

The easiest way is to import everything.

import Vue from 'vue';
import Vuetify from 'vuetify';

Vue.use(Vuetify);

Unexpected token export

vm.js:83:7
new Script
vm.js:265:10
createScript
vm.js:313:10
Object.runInThisContext
internal/modules/cjs/loader.js:708:26
Module._compile
internal/modules/cjs/loader.js:785:10
Module._extensions..js
internal/modules/cjs/loader.js:641:32
Module.load
internal/modules/cjs/loader.js:556:12
Module._load
internal/modules/cjs/loader.js:681:19
Module.require
internal/modules/cjs/helpers.js:16:16
require

[SeregPie]

Threeshaking is now supported.

import VImageInput from 'vuetify-image-input/a-la-carte';