vuejs / vue-element

register a custom element with Vue.js.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Problem when using webcomponents.js in firefox

ricardoseriani opened this issue · comments

PS: Actually, now I tested without vue-elements and the problem is in vue.js and not in vue-elements, so I already open a issue in Vue.js

I'm using the latest version of vuejs, vue-element and webcomponents.js and when I try to load a simple component in firefox he throws a error com console.

example.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <script src="bower_components/vue/dist/vue.js"></script>
    <script src="bower_components/vue-element/vue-element.js"></script>
</head>
<body>
<my-component></my-component>
</body>
<script>
    Vue.element('my-component', {
        template: '<span> Hello From My {{ name  } }Component </span>',
        data: function(){
            return {
                name: ' test '
            }
        },
        shadow: true
    });

    var vue = new Vue({
        el: 'body',
    });
</script>
</html>

bower.json dependencies

  "dependencies": {
    "vue": "~0.12",
    "vue-element": "~1.0.1",
    "webcomponentsjs": "~0.7.5"
  }

console log

TypeError: text.replace is not a function - vue.js:2790:0
commented

I have the same problem with you, How do you solve it?@ricardoseriani

@LXVC Please check this PR and check if problem still occurs - #9

Just download
https://cdnjs.cloudflare.com/ajax/libs/document-register-element/1.3.0/document-register-element.js
https://github.com/karol-f/vue-element/blob/wip/master/vue_2_element/dist/vue-element.js

and add it to page.