question lazy load

[javialon26]

hello @Atinux with this module are the routes still lazy?

_{This question is available on Nuxt.js community (#c2)}

[Atinux]

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
      }
    ]
  })
}

[javialon26]

@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

[Atinux]

@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
      }
    ]
  })
}

[javialon26]

@Atinux work like a charm, thank you!

[sschadwick]

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!

[ghost]

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

[mrleblanc101]

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