Nuxt.js: Lazy loading

[dan-gamble]

Is it possible to only execute certain bits of code like we can with base webpack or vue-router require.ensure, System.import? If so would this be possible after generate too?

My use case is using highlight.js but i'd only wanna load this on certain routes

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

[zspecza]

Hi @dan-gamble - I haven't used Nuxt.js much but @Atinux and I discussed this a lot a few weeks ago so based on that my assumption is it should be possible - and the in the code it looks like it is the default for the client build: https://github.com/nuxt/nuxt.js/blob/master/lib/app/router.js#L9

[Atinux]

@dan-gamble if you want to use highlight.js only on a specific page component, juste import it in your page component:

pages/about.vue:

<script>
import highlightjs from 'highlight.js'

export default {
}
</script>

Make sure that you don't use highlight.js in your config.build.vendor and config.plugins.

This way, highlight.js will be in the bundle of the /about page and we will be imported only when loading this route 👍

This is due to the code splitting we define in the router of Nuxt.js, like @declandewet described in his comment.

[dan-gamble]

Awesome, thanks guys.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.