How to import Vue.js correctly

Question

I am starting with Vue.js, and I am wondering how to import it properly, in order to bundle it with Webpack. All the examples in the documentation seem to assume that a Vue object is already present.

This is what I tried:

const Vue = require('vue')

and also

const Vue = require('vue').Vue

and then

var app = new Vue({ <options> })

This file is then bundled with Webpack and referenced in my HTML index file. But I am getting this error in the browser (in both cases):

Uncaught TypeError: Vue is not a constructor

@Fabjan Thanks, I have seen that. I would prefer to keep my existing Webpack build, which I have just set up. See the about-to-get-accepted answer. — Thomas Hirsch
– Thomas Hirsch, Commented Nov 12, 2019 at 19:11

Synamatics · Accepted Answer · 2019-11-12 17:36:27Z

2

I think the best way, if you are using ES6, is to use

import Vue from 'vue'; var app = new Vue({ <options> })

answered Nov 12, 2019 at 17:36

Synamatics

13612 bronze badges

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

4 Comments

Thomas Hirsch Over a year ago

This looks better, I was not even aware that import and require would work differently. Now I am getting this error: "[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." Do you know how to fix that also?

Synamatics Over a year ago

I think you still have to install and configure vue template compiler with WebPack vuejs.org/v2/guide/…

Synamatics Over a year ago

If you solved the issue, please accept as answer! Cheers!

Thomas Hirsch Over a year ago

That last link you sent part, the Webpack section, is presumably what I have been missing. I will not forget to accept your answer once I verified it. This seems to be the solution that I am looking for in the context of my existing Webpack build.

Collectives™ on Stack Overflow

How to import Vue.js correctly

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related