Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Vue versions interfering

See original GitHub issue

It’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 GitHub Comments

1reaction

adamgoosecommented, Apr 6, 2017

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: