Vue 3 Support - Githubissues

githubnikola commented 2 years ago

Hello,

This weekend I have been trying to implement this plugin with Vue 3, but I keep getting an error in the browser's console:

Uncaught TypeError: Cannot read properties of undefined (reading 'extend')
    at createVueInstance (vue-custom-element.esm.js?c894:367)
    at HTMLElement.connectedCallback (vue-custom-element.esm.js?c894:505)
    at HTMLElement.connectedCallback (vue-custom-element.esm.js?c894:57)
    at define (vue-custom-element.esm.js?c894:70)
    at registerCustomElement (vue-custom-element.esm.js?c894:104)
    at Object.vueCustomElement [as customElement] (vue-custom-element.esm.js?c894:481)
    at eval (main.js?56d7:18)
    at Module../src/main.js (app-preview.v0.js:2477)
    at __webpack_require__ (app-preview.v0.js:790)
    at fn (app-preview.v0.js:101)

It looks as if this plugin is relying on exposed util methods in Vue 2.*, and Vue 3 is missing them. I might be completely looking in the wrong direction, so I was hoping that someone here knows if this plugin supports Vue3 and if it does what is the implementation.

This is the setup in main.js

import "document-register-element/build/document-register-element";
import "@ungap/custom-element";
import vueCustomElement from "vue-custom-element";
import { createApp } from "vue";
import App from './App.vue'

const app = createApp()

app.use(vueCustomElement)
app.customElement("custom-element", App);

and the package.json

"dependencies": {
    "@ungap/custom-elements": "^0.1.12",
    "core-js": "^3.6.5",
    "document-register-element": "^1.14.10",
    "vue": "^3.0.0",
    "vue-custom-element": "^3.3.0",
    "vue-router": "^4.0.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0"
  },

Thank you very much! EDIT: I know this might not be an "issue" here on github, but i didn't know where else to ask this question.

karol-f commented 2 years ago

Hi, Vue@3 migration was planned for this lib, hovewer there is built in solution already - https://blog.vuejs.org/posts/vue-3.2.html

githubnikola commented 2 years ago

@karol-f Thank you for the info. That is good to know. Anyways, the docs are too confusing on the vue.blog regarding this topic, and in the past it did prove to work as i needed it. However, I am going to give it one more shot.

dbaumannlt commented 2 years ago

@karol-f the built-in Vue 3 solution doesn't support shadow: false option that the vue-custom-element library does. I am building components that will be rendered by CMS where the CMS provides the styles in the page <head>. I need those styles to apply to the custom components out-of-the-box. Being able to disable the shadowroot is absolutely critical in this scenario.

Also I have found in Vue 3 that when using a 3rd party library, such as mdbvue, that the custom elements like MdbButton do not get translated into primitive html tags in Vue 3. Therefore the browser doesn't know how to render them. This could be a problem with the default transpile config. However, it works out-of-the-box with vue-custom-element and the Vue 2 version of the MDB library.

karol-f / vue-custom-element

Vue 3 Support #259