CODEWITHSUNDEEP
laravelvue.jsvuejs2vue-componentvue-router
DevonDahon
DevonDahon

Reputation: 8350

Vue.component vs import to load a component

Why when I use Vue.component to load the two commented components below, I get the following error in the javascript console while it works with import ?

Uncaught ReferenceError: dashboard is not defined

app.js:

Vue.component('left-menu', require('./components/LeftMenu.vue').default);
// Vue.component('dashboard', require('./components/foo/dashboard.vue').default);
// Vue.component('members', require('./components/foo/members.vue').default);
import dashboard from './components/foo/dashboard.vue';
import members from './components/foo/members.vue';

const routes = [
    {
        path: '/dashboard',
        component: dashboard
    },
    // {
    //     path: '/members',
    //     component: members
    // }
];

Upvotes: 0

Views: 52

Answers (2)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

In the example that generates errors the components are not recognized as variables, so you should do something like :

const dashboard = {
  template: `<div>Dashboard</div>` ,

}

const routes = [
    {
        path: '/dashboard',
        component: dashboard
    },
    // {
    //     path: '/members',
    //     component: members
    // }
];

Upvotes: 1

Shizzen83
Shizzen83

Reputation: 3529

Because you use dashboard variable in your routes, this variable exists in "import way" but not in "Vue component way"

Upvotes: 1

Related Questions