Import Vue breaks Vue

Question

Can someone explain the WHY of how Import Vue from 'vue' breaks the rendering of the template? I've seen other answers on how to work around this, but none of them have gone into the details of why it breaks.

I ran npm init and npm install vue, not using the CLI.

I created an index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>

    <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <first-task></first-task>
        {{msg}}
    </div>
    <script src="app.js"></script>
</body>
</html>

and an app.js looking like:

import Vue from 'vue/dist/vue.js'; //Remove to fix

Vue.component('first-task', {
  template: '<p>Hello World!</p>'
});

var app = new Vue({
    el: '#app',
    data: {
      msg: "Hello World"
    }
});

Removing the import, it renders fine, but it's unclear to me why this happens. My only guesses are that the default new Vue doesn't reference the full build, or that the implicit Render() doesn't get called, but I'm unsure of how to look into this more.

Bravo · Accepted Answer · 2019-11-24 01:09:11Z

1

import statements may only appear in a javascript module

<script type="module" src="app.js"></script>

Should fix it, though you would not need to import Vue with your current code anyway, as you have seen

answered Nov 24, 2019 at 1:09

Bravo

6,3271 gold badge14 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Import Vue breaks Vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related