Why importing the Vue.js source works, but not the module?

Question

The following HTML code

<!DOCTYPE html>
<html lang="en">
    <body>
        Greeting below: 
        <div id="time">
            {{greetings}}
        </div>
        <script src='bundle.js'></script>
    </body>
</html>

together with the entry.js file

// either the import or the require work
Vue = require('./vue.js')
//import Vue from './vue.js'
new Vue({
    el: "#time",
    data: {
        greetings: "hello world"
    }
})

and the webpack.config.js

module.exports = {
    entry: './entry.js',
    output: {
        filename: 'bundle.js'
    }
}

works fine (vue.js is locally downloaded from the site or a CDN).

I then tried to use the vue module installed via npm install vue --save-dev by changing entry.js to

import Vue from 'vue'
new Vue({
    el: "#time",
    data: {
        greetings: "hello world"
    }
})

This version does not work anymore: the whole <div> is not rendered (only Greeting below is displayed).

What should be done so that Vue.js can be used with webpack?

The Vue documentation mentions webpack a few times, but only in the context of components or production builds.

Native imports are now supported in recent browser versions. So webpack and other node/npm baggage may no longer be necessary for simple apps: developers.google.com/web/fundamentals/primers/modules — Tom Russell
– Tom Russell, Commented Feb 22, 2019 at 6:51

Dmitry S. · Accepted Answer · 2017-07-23 20:55:31Z

4

You can import the compiled (dist) version of vue instead.

import Vue from 'vue/dist/vue.js'

answered Jul 23, 2017 at 20:55

Dmitry S.

8,5532 gold badges41 silver badges53 bronze badges

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

2 Comments

Tom Russell Over a year ago

Isn't the module specifier supposed to be prefaced with './' or whatnot?

Dmitry S. Over a year ago

The assumption in the example is that you are importing it from the node_modules folder.

tony19 · Accepted Answer · 2022-07-16 01:08:58Z

1

To diagnose the problem it's a good idea to look for any errors, whether it's from the build tool on the command line or in the devtools in the browser. If you open the devtools console you'll see the following warning from Vue:

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

Vue has a two different builds, Runtime + Compiler vs. Runtime-only. If you have templates in the DOM, they need to be compiled in order to use them. By default Vue contains only the runtime, because its more light-weight and usually the templates are already pre-compiled to JavaScript at build time.

To also include the compiler you need to import vue/dist/vue.esm:

import Vue from 'vue/dist/vue.esm'

This is the same version as the one from the CDN, except that it uses ES modules, which webpack will handle and you should prefer it over vue/dist/vue.js, which is exactly the one from the CDN.

Alternatively you can use webpacks resolve.alias to define an alias, so when you import vue it will import vue/dist/vue.esm instead.

resolve: {
    alias: {
        'vue$': 'vue/dist/vue.esm.js'
    }
}

To be able to use the runtime-only build, you can use Single File Components with a .vue file. For that you will have to configure vue-loader, which will pre-compile the templates at build time.

edited Jul 16, 2022 at 1:08

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jul 23, 2017 at 22:25

Michael Jungo

33.2k4 gold badges97 silver badges87 bronze badges

2 Comments

WoJ Over a year ago

Thank you for the complete answer - but I do not use components. As you can see in the question, this is just a basic Vue.js app to learn integration with Vue.js. In that context: what is wrong with using import Vue from 'vue' ?

Michael Jungo Over a year ago

I'm aware that you're not using any components. But you are using a template in the DOM: <div id="time">{{greetings}}</div> and that requires the template compiler, which is not in the regular import (vue), but it is available in vue/dist/vue.esm.js in the npm package. The source you downloaded does contain the template compiler.

Collectives™ on Stack Overflow

Why importing the Vue.js source works, but not the module?

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related