importing a package in ES6: “Failed to resolve module specifier ”vue“”

Question

Trying to follow some Vue tutorials and I can\'t currently import Vue in a .js file and then import this file in my index.html. This is how I\'m im

Answer 1

UPDATE (2020-05-10)

Using ES6 modules without Webpack

---

If you are working with ES6 then you should NOT manually inserting your main.js into index.html - this will be handled by Webpack. Actually, the simplest tutorial for Vue goes like this:

1. npm install -g vue-cli
2. vue init webpack my_project
3. npm run dev (and start developing - result is available on http://localhost:8080)
4. npm run build (result is available inside the ./dist folder of your project

Also, you should import Vue like this

import Vue from 'vue';

and not like this

import Vue from '../../node_modules/vue';

EDIT

Okay, if you insist on going through the beginners' path and not using Webpack and single-file Vue components - then you should start like this:

And your /app/app.js will look like this:

var badRoute = Vue.component('bad-route', {
    template: '
Page Not Found
Sorry, but the page you were trying to view does not exist.
'
});
var vue_router = new VueRouter({
    base: '/app'
    , mode: 'hash'
    , routes: [{
        path: '/'
        , redirect: '/login'
    }, {
        path: '/login'
        , component: loginForm
        , name: 'LOGIN'
    }, {
        path: '*', // should be last, otherwise matches everything
        component: badRoute
        , name: 'NOT FOUND'
    }]
});
// Main application
var vue_app = new Vue({
        router: vue_router
    , })
    .$mount('#app');

And your /app/login.js component will look like this:

var loginForm = Vue.component('login-form', {
    template: '#login', // should match the ID of template tag
    data: function() {
        var a = {
            username: ''
            , password: ''
        , };
        return a;
    }
    , methods: {}
});