Vue router 2 modules.js:52861 [vue-router] Route with name 'xxx' does not exist warn @ modules.js:52861


#1

I have installed:

Vuejs2, Vue router 2 and Vuetify

My problem is the router:

modules.js:52861 [vue-router] Route with name ‘xxx’ does not exist
warn @ modules.js:52861

client/routes.js

export default [
  {
    path: '',
    name: 'xxx',
    component: '/imports/ui/xxx.vue'

  },
 
];

imports/routes.js

// Import the router
import { RouterFactory, nativeScrollBehavior } from 'meteor/akryum:vue-router2'

// Create router instance
const routerFactory = new RouterFactory({
  mode: 'history',
  scrollBehavior: nativeScrollBehavior
});

// Not found
import NotFound from '/imports/ui/NotFound.vue';

RouterFactory.configure(router => {
  router.addRoute({
    path: '*',
    component: NotFound,
  });
}, -1);

export default routerFactory;

I’m doing something wrong but what?


#2

You need to name the file with a name and then .routes.js, for example foo.routes.js.


#3

its like the link work but the template dont come up.

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <Anonymous>
       <VApp>
         <AppLayout>
           <Root>
component: '/imports/ui/xxx.vue',

xxx.vue

<template>
<v-layout row wrap>
xxx
 </v-layout>
</template

#4

Do you have a reproduction to share?


#5

Try rendering the app like this:

new Vue({
    router,
    render: h => h( AppLayout ),
}).$mount( 'app' );

This worked for me!


#6

sorry no complete code to share.

I use in main.js:

// Libs
import {Meteor} from 'meteor/meteor';
import {Vue} from 'meteor/akryum:vue';
import routerFactory from '/imports/routes.js';
require('../node_modules/vuetify/dist/vuetify.min.css')
require('../node_modules/vuetify/dist/vuetify.min.js')

// App layout
import AppLayout from '/imports/ui/AppLayout.vue';

// App start
Meteor.startup(() => {
  // Start the router
  const router = routerFactory.create();
  new Vue({
    router,
    render: h => h(AppLayout),
  }).$mount('app');
});

#7

My code is very similar, apart from I’m not using Akryum’s Vue package:

import Vue from 'vue';

Have you run meteor npm install in your app directory? I had an issue where Vue hadn’t installed properly which caused errors as well.


#8

I have done a meteor npm install

Its like the route in the URL works but no content comes ind the

<router-view></router-view>

I still get this warning

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <Anonymous>
       <VApp>
         <AppLayout>
           <Root>

warn @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:1505
mountComponent @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:3573
Vue$3.$mount @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:8548
init @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:4592
createComponent @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:6241
createElm @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:6184
updateChildren @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:6466
patchVnode @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:6546
updateChildren @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:6443
patchVnode @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:6546
updateChildren @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:6443
patchVnode @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:6546
patch @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:6695
Vue._update @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:3489
updateComponent @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:3603
get @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:3946
run @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:4023
flushSchedulerQueue @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:3789
(anonymous) @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:1727
nextTickHandler @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:1674
(anonymous) @ meteor.js?hash=6d285d84547b3dad9717a7c89c664b61b45ea3d8:1117
Async Call
Promise.then @ promise.js?hash=261fbb1a71d50832b0d246ec9cd24609adb1b684:97
timerFunc @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:1689
queueNextTick @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:1737
queueWatcher @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:3876
update @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:4013
notify @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:1804
reactiveSetter @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:2026
(anonymous) @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:55235
(anonymous) @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:55234
updateRoute @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:54769
(anonymous) @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:54647
(anonymous) @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:54756
step @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:54494
step @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:54501
runQueue @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:54505
(anonymous) @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:54751
step @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:54494
(anonymous) @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:54498
(anonymous) @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:54736
(anonymous) @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:54572
iterator @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:54715
step @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:54497
step @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:54501
step @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:54501
runQueue @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:54505
confirmTransition @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:54744
transitionTo @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:54646
push @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:54944
push @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:55261
handler @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:53249
invoker @ modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:2850
modules.js?hash=21d0d2ec3adb12fef0d9e8f0dc281e93bd194139:52861

[vue-router] Route with name 'xxx' does not exist

#9

Double-check that all your components have a <template> section or a render function.


#10

applayout:

<template>
<div>

    <v-app id="example-1" toolbar footer>
      <v-navigation-drawer class="grey darken-4" style="background-image: url(/images/bg-dark-pattern.png); background-repeat: repeat; position: fixed;" persistent v-model="drawer" light enable-resize-watcher absolute>
        <img style="width:50%; margin-left:25%;padding-top:10px;padding-bottom:20px;" src="/images/logo-transparent.png">

  <!-- Menu -->
  <app-menu></app-menu>

  <!-- Route content -->

  
      </v-navigation-drawer>
      <v-toolbar class="white fixed">
        <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>

        <v-spacer></v-spacer>

        <v-select append-icon="search" v-bind:items="states" v-model="a1" autocomplete></v-select>


      </v-toolbar>
      <main>

        <v-container fluid>
           
  <router-view></router-view>
  
        </v-container>

      </main>
      <v-footer class="grey darken-4 text-xs-center">
        <span class="white--text ">logo © 2017</span>
      </v-footer>
    </v-app>

  </div>


</template>

<script>
import AppMenu from '/imports/ui/AppMenu.vue';



export default {

  components: {
    AppMenu
  },

  data() {
    return {
      components: {
      AppMenu
      },
      cards: [
        { title: 'Pre-fab homes', src: 'https://www.maduniverset.dk/images/11047-grillet-pizza-kartoffelskiver-mascarpone.jpg', flex: 6 },
        { title: 'Favorite road trips', src: 'https://www.maduniverset.dk/images/11047-grillet-pizza-kartoffelskiver-mascarpone.jpg', flex: 6 },
        { title: 'Favorite road trips', src: 'https://www.maduniverset.dk/images/11047-grillet-pizza-kartoffelskiver-mascarpone.jpg', flex: 6 },
        { title: 'Favorite road trips', src: 'https://www.maduniverset.dk/images/11047-grillet-pizza-kartoffelskiver-mascarpone.jpg', flex: 6 },
        { title: 'Favorite road trips', src: 'https://www.maduniverset.dk/images/11047-grillet-pizza-kartoffelskiver-mascarpone.jpg', flex: 6 },
        { title: 'Favorite road trips', src: 'https://www.maduniverset.dk/images/11047-grillet-pizza-kartoffelskiver-mascarpone.jpg', flex: 6 },
        { title: 'Best airlines', src: 'https://www.maduniverset.dk/images/11047-grillet-pizza-kartoffelskiver-mascarpone.jpg', flex: 6 }

      ],
      a1: null,
      states: [
        "Alabama",
        "Alaska",
        "American Samoa",
        "Arizona",
        "kylling",
        "California",
        "Colorado",
        "Connecticut",
        "Delaware",
        "District of Columbia",
        "Federated States of Micronesia",
        "Florida",
        "Georgia",
        "Guam",
        "Hawaii",
        "Idaho",
        "Illinois",
        "Indiana",
        "Iowa",
        "Kansas",
        "Kentucky",
        "Louisiana",
        "Maine",
        "Marshall Islands",
        "Maryland",
        "Massachusetts",
        "Michigan",
        "Minnesota",
        "Mississippi",
        "Missouri",
        "Montana",
        "Nebraska",
        "Nevada",
        "New Hampshire",
        "New Jersey",
        "New Mexico",
        "New York",
        "North Carolina",
        "North Dakota",
        "Northern Mariana Islands",
        "Ohio",
        "Oklahoma",
        "Oregon",
        "Palau",
        "Pennsylvania",
        "Puerto Rico",
        "Rhode Island",
        "South Carolina",
        "South Dakota",
        "Tennessee",
        "Texas",
        "Utah",
        "Vermont",
        "Virgin Island",
        "Virginia",
        "Washington",
        "West Virginia",
        "Wisconsin",
        "Wyoming"
      ],
      drawer: true,
      
      computed: {
        binding() {
          const binding = {}

          if (this.$vuetify.breakpoint.mdAndUp) binding.column = true

          return binding
        }
      }
    }
  }
}
</script>

Routes.js

// Import the router
import { RouterFactory, nativeScrollBehavior } from 'meteor/akryum:vue-router2'

// Create router instance
const routerFactory = new RouterFactory({
  mode: 'history',
  scrollBehavior: nativeScrollBehavior
});

// Not found
import NotFound from '/imports/ui/NotFound.vue';

RouterFactory.configure(router => {
  router.addRoute({
    path: '*',
    component: NotFound,
  });
}, -1);

export default routerFactory;

Forside.vue (frontpage)

<template>
  
         

        <v-layout row wrap>

            <v-flex style="padding:4px;" v-bind="{ [`xs${card.flex}`]: true }" v-for="card in cards" :key="card.title" xs12 sm6 md3 order-md1 order-sm3>
              <v-card>
                <v-card-media :src="card.src" height="200px">
                  <v-container fill-height fluid>
                    <v-layout fill-height>
                      <v-flex xs12 align-end flexbox>
                        <span class="headline white--text" v-text="card.title"></span>
                      </v-flex>
                    </v-layout>
                  </v-container>
                </v-card-media>
                <v-card-actions class="white">
                  <v-spacer></v-spacer>
                  <v-btn icon>
                    <v-icon>favorite</v-icon>
                  </v-btn>
                  <v-btn icon>
                    <v-icon>bookmark</v-icon>
                  </v-btn>
                  <v-btn icon>
                    <v-icon>share</v-icon>
                  </v-btn>
                </v-card-actions>
              </v-card>
            </v-flex>

            <v-flex xs12 sm12 class="my-3">
            <div class="text-sm-center">
              <h2 class="headline">Nyeste opskrifter</h2>
              <span class="subheading">
                Nyeste opskrifter på Maduniverset  
              </span>
            </div>
          </v-flex>
          
          </v-layout>

          
</template>



<script>

export default {
  data() {
    return {

      cards: [
        { title: 'Pre-fab homes', src: 'https://www..dk/images/11047-grillet-pizza-kartoffelskiver-mascarpone.jpg', flex: 6 },
        { title: 'Favorite road trips', src: 'https://www..dk/images/11047-grillet-pizza-kartoffelskiver-mascarpone.jpg', flex: 6 },
        { title: 'Favorite road trips', src: 'https://www..dk/images/11047-grillet-pizza-kartoffelskiver-mascarpone.jpg', flex: 6 },
        { title: 'Favorite road trips', src: 'https://www..dk/images/11047-grillet-pizza-kartoffelskiver-mascarpone.jpg', flex: 6 },
        { title: 'Favorite road trips', src: 'https://www..dk/images/11047-grillet-pizza-kartoffelskiver-mascarpone.jpg', flex: 6 },
        { title: 'Favorite road trips', src: 'https://www..dk/images/11047-grillet-pizza-kartoffelskiver-mascarpone.jpg', flex: 6 },
        { title: 'Best airlines', src: 'https://www..dk/images/11047-grillet-pizza-kartoffelskiver-mascarpone.jpg', flex: 6 }

      ],
      a1: null,
      states: [
        "Alabama",
        "Alaska",
        "American Samoa",
        "Arizona",
        "kylling",
        "California",
        "Colorado",
        "Connecticut",
        "Delaware",
        "District of Columbia",
        "Federated States of Micronesia",
        "Florida",
        "Georgia",
        "Guam",
        "Hawaii",
        "Idaho",
        "Illinois",
        "Indiana",
        "Iowa",
        "Kansas",
        "Kentucky",
        "Louisiana",
        "Maine",
        "Marshall Islands",
        "Maryland",
        "Massachusetts",
        "Michigan",
        "Minnesota",
        "Mississippi",
        "Missouri",
        "Montana",
        "Nebraska",
        "Nevada",
        "New Hampshire",
        "New Jersey",
        "New Mexico",
        "New York",
        "North Carolina",
        "North Dakota",
        "Northern Mariana Islands",
        "Ohio",
        "Oklahoma",
        "Oregon",
        "Palau",
        "Pennsylvania",
        "Puerto Rico",
        "Rhode Island",
        "South Carolina",
        "South Dakota",
        "Tennessee",
        "Texas",
        "Utah",
        "Vermont",
        "Virgin Island",
        "Virginia",
        "Washington",
        "West Virginia",
        "Wisconsin",
        "Wyoming"
      ],
      drawer: true,
      computed: {
        binding() {
          const binding = {}

          if (this.$vuetify.breakpoint.mdAndUp) binding.column = true

          return binding
        }
      }
    }
  }
}
</script>

AppMenu.vue

<template>

<div class="app-menu">
  <router-link :to="{ path: '/', name:'Forside', exact: true }"><span style="color:#fff;">Forside</span></router-link><br>
  <router-link :to="{ path: '/kategorier', name:'Kategorier' }"><span style="color:#fff;">Kategorier</span></router-link>

</div>

<!--
        <v-list dense style="background-color:transparent; color:#fff; /* For IE8 and earlier */" class="listnav">
          <v-list-tile @click="">
            <v-list-tile-action>
              <v-icon style="color: #fff;">home</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title style="color: #fff;">Forside</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
          <v-list-tile @click="">
            <v-list-tile-action>
              <v-icon style="color: #fff;">list</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title style="color:#fff;">Kategorier</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
          
        </v-list>
-->
</template>


main.js

// Libs
import {Meteor} from 'meteor/meteor';
import {Vue} from 'meteor/akryum:vue';
import routerFactory from '/imports/routes.js';
require('../node_modules/vuetify/dist/vuetify.min.css')
require('../node_modules/vuetify/dist/vuetify.min.js')

// App layout
import AppLayout from '/imports/ui/AppLayout.vue';

// App start
Meteor.startup(() => {
  // Start the router
  const router = routerFactory.create();
  new Vue({
    router,
    render: h => h(AppLayout),
  }).$mount('app');
});

main.routes.js

export default [
  {
    path: '',
    name: 'Forside',
    component: '/imports/ui/Forside.vue',

    path: 'Kategorier',
    name: 'Kategorier',
    component: '/imports/ui/Kategorier.vue',
  },
 
];

console.log("routes test 3");

#11

Its like it can not find main.routes.js

Where do Meteor know that it must use main.routes.js?


#12

How can I easy share reproduction to you?


#13

The best way would be a private Github repo on which you would add me.


#15

Got it to work with:

meteor npm i -g npm

And I forgot to put every route in {}

CORRECT

{
     path: '/categories',
    name: 'categories',
    component: '/imports/ui/categories.vue',
  },
  {
    path: '/frontpage',
    name: 'frontpage',
    component: '/imports/ui/frontpage.vue',
}

WRONG

{
     path: '/categories',
    name: 'categories',
    component: '/imports/ui/categories.vue',

    path: '/frontpage',
    name: 'frontpage',
    component: '/imports/ui/frontpage.vue',
}