question lazy load about router-module HOT 7 CLOSED

@javialon26 Sorry I forgot something, try with:

import Router from 'vue-router'

// import HomePage from '@/components/pages/index.vue'

const HomePage = () => import('@/components/pages/index.vue').then(m => m.default || m)
const HelpPage = () => import('@/components/pages/ayuda.vue').then(m => m.default || m)

Vue.use(Router)

export function createRouter () {
  return new Router({
    mode: 'history',
    routes: [
      {
        path: '/',
        name: 'home',
        component: HomePage
      },
      {
        path: '/ayuda',
        name: 'ayuda',
        component: HelpPage
      }
    ]
  })
}

from router-module.

Ran into the same issue when attempting to customize code-splitting. Can confirm that the solution provided by @Atinux (.then(m => m.default || m)) works!

from router-module.

Should this be documented somewhere in the doc ?
I had a (probably) the same issue but with a slightly different error message and @Atinux solution solved it.
render function or template not defined in component: anonymous

from router-module.

Hi @javialon26

Actually no, you have to do it manually, example:

import Vue from 'vue'
import Router from 'vue-router'

// lazy load the pages
const MyPage = () => import('~/components/my-page')

Vue.use(Router)

export function createRouter() {
  return new Router({
    mode: 'history',
    routes: [
      {
        path: '/',
        component: MyPage
      }
    ]
  })
}

from router-module.

@Atinux i have an error with this config:

[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.
found in

--->
at .nuxt/components/nuxt.vue
at layouts/default.vue

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside

, or missing . Bailing hydration and performing full client-side render.

this is my router.js

import Router from 'vue-router'

// import HomePage from '@/components/pages/index.vue'

const HomePage = () => import('@/components/pages/index.vue')
const HelpPage = () => import('@/components/pages/ayuda.vue')

Vue.use(Router)

export function createRouter () {
  return new Router({
    mode: 'history',
    routes: [
      {
        path: '/',
        name: 'home',
        component: HomePage
      },
      {
        path: '/ayuda',
        name: 'ayuda',
        component: HelpPage
      }
    ]
  })
}

thank you

from router-module.

@Atinux work like a charm, thank you!

from router-module.

This question has been resolved by @Atinux, see answer.

from router-module.