Vue versions interfering
See original GitHub issueIt’s my understanding that I should be able to run Vue v1.x globally on the page and use a custom element using Vue v2.x, since the custom element is sandboxed inside itself.
My main.js
looks as such:
import Vue from 'vue'
import vueCustomElement from 'vue-custom-element/src/vue-custom-element'
Vue.use(vueCustomElement)
import App from './App'
Vue.customElement('test-app', App)
My index.html
looks as such:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-custom-element</title>
<script src="https://unpkg.com/vue@1.0.28/dist/vue.min.js"></script>
</head>
<body>
<test-app></test-app>
<!-- built files will be auto injected -->
</body>
</html>
I’m simply loading in Vue v1.0.28 as a proof of concept, however I get a webpack error in the browser, after a successful compile, “customElement is not a function”. After some digging and debugging, the instance of Vue
that’s available to the vue-custom-element
install method is actually the Vue v1 instance.
Issue Analytics
- State:
- Created 6 years ago
- Comments:7 (3 by maintainers)
Top Results From Across the Web
Vue packages version mismatch · Issue #4394 - GitHub
I think it's interfering with the global @vue/cli installation somehow, though I can't reproduce this issue.
Read more >Vue Router interfering with Javascript fetch - Stack Overflow
I'm trying to use fetch in my Vue 2 project, but when I try to access file.json in the root directory, it instead...
Read more >Transition | Vue.js
When an element in a <Transition> component is inserted or removed, this is what happens: Vue will automatically sniff whether the target element...
Read more >When VueJS Can't Help You - Vue.js Developers
Any part that might be interfered with by other scripts or plugins is a no-go for Vue. This means the head and body...
Read more >spine-web-player doen't work properly on my Vue project
If everything works in vanilla JS, it's likely that Vue is interfering. Post Tue Jan 18, 2022 10:57 am.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Hm, I bet it’s because Vue.use doesn’t invoke install if plugin.installed == true, and it sets plugin.installed = true. Thus, it’s being installed on window.Vue upon import, and not when I call Vue.use in my main.js. Simple fix: set vueCustomElement.installed = false before I call Vue.use. However, I still don’t like that it even has access to window, since I really want the entirety of the component to be sandboxed.
Thanks,
Adam.
–
Adam Engebretson
Sent from https://polymail.io/
On Thu, Apr 06, 2017 at 2:40 AM “Karol Fabjańczuk”
< mailto:
a, pre, code, a:link, body { word-wrap: break-word !important; }
https://github.com/adamgoose Ok, I’ll try to check it today or tommorow. For now please use your own ‘tweaked’ version.
—
You are receiving this because you were mentioned.
Reply to this email directly, https://github.com/karol-f/vue-custom-element/issues/12#issuecomment-292094533 , or https://github.com/notifications/unsubscribe-auth/AAlS_C_G-PIsJ4FPF0QpeHpdF9-7fLJmks5rtJcLgaJpZM4M1J2g .
@adamgoose Ok, I’ll try to check it today or tommorow. For now please use your own ‘tweaked’ version.