2

I would like to know what is the best way to perform a dynamic import of component in my case.

We create components and we get their data from an API to create the pages content. API look like this:

{
  "id": 128272,
  "code": "firstComponent",
  "content": []
},
{
   "id": 128272,
   "code": "secondComponent",
   "content": []
},

I read that can use dynamic component to load created components, and add it using resolveComponent()

<component :is="" />

As we can't know at first the list of component used in a page, should I import them all in defineNuxtConfig ?

Project deep dive,

  • pages /press/_slug give choices between ten components on our CMS
  • pages /video/_slug only 5 of them
  • and landing pages (_.vue) allow to use them all (20)
kissu
  • 24,311
  • 11
  • 36
  • 67
GynoPelo
  • 21
  • 1
  • 1
    In Nuxt3, it should be `/press/[slug].vue`, otherwise you could [dynamically import](https://stackoverflow.com/a/67825061/8816585) the components. – kissu May 24 '22 at 10:43
  • Thanks for your answer. I could use onMounted, as I use Composition API. But may it cause issues for SEO ? – GynoPelo May 25 '22 at 18:51
  • `mounted` is only working on the client side indeed. Hence why, you will not get the benefit of server-side rendered content if only using this lifecycle hook. If you want to double check that one, you could disable the JS or inspect the source code to see what was generated. – kissu May 25 '22 at 19:01
  • Ok, I'll find another way – GynoPelo May 25 '22 at 19:09
  • You can use `asyncData` or `fetch` hooks. – kissu May 25 '22 at 19:11

0 Answers0