Home » vue » Safari shows a component error while the other browsers do not

Safari shows a component error while the other browsers do not

Posted by: admin November 26, 2021 Leave a comment

Questions:

I have some very simple vue code as shown below:

Vue.component('tabs', {
    template: `
        <div class="">
            <div class="tabs">
              <ul>
                <li><a>Music</a></li>
                <li><a>Videos</a></li>
                <li><a>Documents</a></li>
              </ul>
            </div>

            <div class="tab-detail">
                <slot></slot>
            </div>
        </div>
    `
});

new Vue ({
    el: '#root'
});

and HTML code

<div id="root" class="container">

    <tabs>

    </tabs>

</div>

the problem I have is that the safari throws a warning:

[Vue warn]: Unknown custom element: <tabs> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in <Root>)

I am a Vue beginner so I was looking for the solution but the answer I got was that I should just declare the new Vue after the component. That I did but I am still getting this error.

Answers:

This is because Safari does not support es6 template string syntax . In order to fix it you should use Webpack or just a Babel to add support for new es6 features.