CODEWITHSUNDEEP
vue.jsvuejs2
Balram Sharma
Balram Sharma

Reputation: 119

ES6 modules in browser

How to import component in existing HTML page, below is the example. I tried with require but no luck. `

<html>
<head>
  <script src="//unpkg.com/[email protected]/dist/vue.js"></script>
</head>
  <body>
    <div id="app">
     <my-component></my-component>
    </div>
    <script>
    import mycomponent from './components/mycomponent.vue'
    var vm = new Vue({
      el: '#app',
      components: {
        'my-component': mycomponent
        }
      })
    </script>
   </body>
</head>
</html>

` The import line says unexpected identifier! what went wrong here, please help.

Upvotes: 2

Views: 1305

Answers (1)

Yevhenii Herasymchuk
Yevhenii Herasymchuk

Reputation: 2137

You need type=module on the script element, and the browser will treat the inline or external script as an ECMAScript module. Here is how your code can be transformed

<html>
<head> 
  <script src="//unpkg.com/[email protected]/dist/vue.js"></script>
</head>
  <body>
    <div id="app">
     <my-component></my-component>
    </div>
    <script type="module">
    import mycomponent from './components/mycomponent.vue'
    var vm = new Vue({
      el: '#app',
      components: {
        'my-component': mycomponent
        }
      })
    </script>
   </body>
</head>
</html>

You can read more about ECMAScript modules in browsers here

Upvotes: 3

Related Questions