question lazy load

javialon26
90
javialon26
commented 2 years ago

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

0
Atinux
23.1k
Atinux
commented 2 years ago

@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
      }
    ]
  })
}
3
Atinux
23.1k
Atinux
commented 2 years ago

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
      }
    ]
  })
}
0
javialon26
90
javialon26
commented 2 years ago

@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

---> <Anonymous>
<Nuxt> at .nuxt/components/nuxt.vue
<Default> at layouts/default.vue
<Root>
[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 Vue from 'vue'
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

0
Atinux
23.1k
Atinux
commented 2 years ago

@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
      }
    ]
  })
}
3
javialon26
90
javialon26
commented 2 years ago

@Atinux work like a charm, thank you!

0
sschadwick
5
sschadwick
commented 7 months ago

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!

0
Informations
Question โ€ข Resolved
#c2 - Created 2 years ago