Vuetify with Vue-custom-element Breaks

[Meenakshise]

It is really a very good package when you want to integrate it to the existing application. A big thanks to you..

I am using Vuetify in my vue project. In that case i am getting this error. I think it is unable to recognize any of the vuetify elements. Is there a work around for this to convert the vuetify template to html template before custom element parses it? Or can you do this as part of your package itself.

vue.esm.js?efeb:578 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> at src\components\HelloWorld.vue

Please let me know.

[Meenakshise]

[Meenakshise]

[Meenakshise]

Sample Vuetify template which i am using

“First, solve the problem. Then, write the code.” —John Johnson

<style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>

[karol-f]

It's just warning stating that you didn't register with Vue v-slide, v-layout... etc. Did you normally add Vuetify like in docs or you did regiater Vuetify components with vue-custom-element?

Please prepare JSFiddle or Code Sandbox (https://codesandbox.io/) example. Regards!

[Meenakshise]

I have registered a Vuetify component with Vue-custom-element

[karol-f]

So this is just a warning described in https://github.com/karol-f/vue-custom-element#caveats page.

If Vuetify elements work you don't have to get rid of this warning but you could as described in link above.

If Vuetify components does not work please make sure you have added them to page. Alternatively you can just use vue-custom-element for wrapper and use Vuetify elements just like you would with Vue (so not passing each of them to vue-custom-element like you now do).

[Meenakshise]

no.. Normal vuetify component is working. But when i register a vuetify component with custom element and render that in the html it is not working

Vue.customElement('custom-hello-world',HelloWorld)

[Meenakshise]

i want to use that vuetify component in a project where i don't have vue js

[karol-f]

Vue.customElement('custom-hello-world',HelloWorld) is not registering Vuetify components with vue-custom-element.

Vue.customElement('v-slide',VSlide) does. v-slide should be Vuetify component imported from Vuetify. I didn't do integration with it.

I suggest using what you do already - Vue.customElement('custom-hello-world',HelloWorld) but inside import Vuetify components and use them like in Vue. On other page just include JS responsible for custom-hello-world (which will have Vue.customElement and Vuetify imports in it).

You can check how I used Element.io in vue-custom-element demos:
https://github.com/karol-f/vue-custom-element/blob/c458418049c4dead96c9e4f11b037d30ec55f235/demo/main.js (lines 5 and 27) and use that Vue when registering with Vue.customElement)

Regards!

[karol-f]

Feel free to ask other questions!

[Meenakshise]

So you are saying that Vue-Custom-Element is not ready to handle vuetify component yet.

If yes, do you plans for that in the future

[karol-f]

It is ready but as stated in documentation you have to create Custom Elements from each and every Vuetify component you want to use as Custom Element.

Did you register Vue.customElement('v-slide',VSlide) and other Vuetify components you used?

There might be some drawbacks as in current version of vue-custom-element slots are meant for static content only. But it can probably be enhanced.

Please prepare demo with exact problem so I could help. Regards!

[Meenakshise]

Sorry karol could you please help me here. Uploaded my files here. I am rendering this

<custom-vuetify-component/>

in index.html it is not rendering.

https://codesandbox.io/s/jjnnv3qk2w

[karol-f]

I can see that it's rendering. Whats the problem exactly?

[Meenakshise]

[Meenakshise]

just look at the problems

[Meenakshise]

Just refresh the url. You will get the errors..

[karol-f]

Yes, you didn't register anywhere v-container, v-layout etc. (#86 (comment))

Just add Vuetify to main.js file like in Vuetify docs:

import Vuetify from 'vuetify'
Vue.use(Vuetify)

Check https://codesandbox.io/s/32v82v04xq

And it works. Regards

[Meenakshise]

Thanks Karol. It worked now. I think i created the project with the scaffolding template of vuetify. That is the problem. Even there i had this 2 lines. But it didn't work. Now i created with vue init webpack template. It works perfectly. But there is an issue again.

If you register 2 custom vuetify component. Then only one is appearing. Not the both. Though i have displayed both the html tags in the index.html.

`<custom-vuetify-component/>`
	` <custom-vuetifytwo-component/>`

The only difference in both the components is the below sentence.

First, 2nd problem . Then, write the code. - <custom-vuetifytwo-component/>
First, solve the problem. Then, write the code. - <custom-vuetify-component/>

[karol-f]

@Meenakshise Can you share the not working example?

[Meenakshise]

oh.. <div><custom-vuetify-component/></div> <div><custom-vuetifytwo-component/></div> If you put it separate div it is working.. else it is not..

same sandbox link
https://codesandbox.io/s/50v0pzyqql

[Meenakshise]

Is that the expected behavior

[Meenakshise]

Again this div scenario works only in the vue project. If you put it in a plain html and refer the script files then it is breaking there again. I only see one component

[karol-f]

I can see that it's working - https://codesandbox.io/s/8yj5rpjyol

Don't forget to use proper HTML - don't use self closing Custom Element tags in HTML.

[Meenakshise]

No it is not working Karol. even after using proper html

<custom-vuetify-component><custom-vuetify-component/> <custom-vuetifytwo-component><custom-vuetifytwo-component/> <!-- built files will be auto injected -->

[Meenakshise]

Please check this link https://codesandbox.io/s/50v0pzyqql

I could see only one component rendered

[karol-f]

@Meenakshise Because you didn't close HTML tags properly - https://codesandbox.io/s/0pj0xr2wv

It should be

<custom-vuetify-component></custom-vuetify-component>
<custom-vuetifytwo-component></custom-vuetifytwo-component>

Regards

[Meenakshise]

yes Karol i figured it out actually. Thanks a lot for your help throughout. It is working perfectly now..

[karol-f]

@Meenakshise Great, regards

[do-web]

The links are borken, have anyone a working example with vuetify and custom components?

[karol-f]

@do-web Hi, sorry for the inconvenience - do You have specific problem? Can You prepare repo on e.g. CodeSandbox?

[do-web]

I'am looking for a best practice to use vuetify in custom components.

[karol-f]

@do-web Just use it as You would in normal Vue component. There's no need to make every one custom element. Treat vue-custom-element custom elements as mini apps.

[do-web]

@karol-f If i try this:

import Vue from 'vue';
import vueCustomElement from 'vue-custom-element'
import Vuetify from 'vuetify/lib';

Vue.use(Vuetify);

Vue.use(vueCustomElement);

Vue.customElement('test-view', () => new Promise((resolve) => {
    require(['./components/test-view'], (lazyComponent) => resolve(lazyComponent.default));
}), {props: []});

iam getting errors:

Error in nextTick: "TypeError: Cannot read property 'smAndDown' of undefined"
Error in getter for watcher "isDark": "TypeError: Cannot read property 'dark' of undefined"

In test-view i use vuetify components

[karol-f]

@do-web I would like to help but without proper CodeSandbox or Github repo with example it's hard to solve anything. Regards

[lalzart]

@karol-f Do you know of this issue? It seems related to this as it is a fork vue-web-component. I am having trouble with the nested carousel items not rendering. https://github.com/lalzart/shopify-vue/blob/master/src/vue/components/landing-page/A