Thursday, March 30, 2017

How to use multiple components on a Vue route

I am just starting out with Vue and am trying to use two components in a route - a navbar and some sales data. Laravel mix is bundling the assets with Webpack, and npm keeps failing.

index.php

<body>
    <div id="app">
        <router-view name="nav"></router-view>
        <router-view></router-view>
    </div>
    <script src=""></script>
</body>

app.js:

import './bootstrap';
import router from './routes';
const app = new Vue({
    el: '#app',
    router
});

routes.js:

import VueRouter    from 'vue-router';
import Sales        from './views/employer/sales/Sales.vue';
import MainNav      from './components/MainNav.vue';

let routes = [
    {
        path: '/sales',
        components: {
            default: Sales,
            nav: MainNav
        }
    }
];

export default new VueRouter({
    routes,
    linkActiveClass: 'is-active'
});

Sales.vue

<template>
    <p>This is the Sales view</p>
</template>

MainNav.vue

<template>
    <p>This is the MAIN NAVIGATION</p>
</template>

The error message from npm is not particularly enlightening:

Failed at the @ dev script 'node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

It goes on to suggest that I should check I am running the latest node and npm (which I am).

What am I doing wrong? Curiously, before attempting to include the navigation component this way, I was registering it as a global component. It seemed to register fine, but whenever I included its element tag in a template, npm would fail in the same manner as above.



via Kim Prince
Labels: ,

Advertisement