How can I generate dynamic Nuxt/Vue routes for pages?

Technical Questions
1

I would like to be able to create a dynamic path to a page inside a Nuxt.js application. Currently, I have to use a static folder name to accommodate pages built in builder.io. Example:

pages/
  landing-page/
     _page.vue

The above architecture yields the expected result when a Builder.io landing-page content type follows the following page-url value: /landing-page/some-page-name. But I don’t really want all our landing pages to use the same URL patterns. I would like /ads/some-page-name or partners/some-page-name within the same Builder content model. I would like our content creators to determine the full URL. ​

Here’s what I’ve tried…

Adjusted my Nuxt directory structure to accept dynamic values folder and file names

/* 
new directory structure
pages/
 ​_id/
    ​_page.vue
*/

Adjusted Builder Render component to read dynamic values:

/* Nuxt template */
<RenderContent
 ​:key="`/{$route.params.id}/{$route.params.page}`"
  ​model="landing-page"
  ​@contentLoaded="contentLoaded"
  ​@contentError="contentError"
  ​:options="{
    ​url: `/{$route.params.id}/{$route.params.page}`,
  ​}"
/>

Updated the targeting from ‘is’ to ‘contains’

image

I’ve tried every variation of this with no success.

In theory, that seems like it should work if my key and option values match. Or should it?

My attempt at solving this in Nuxt.js has been unsuccessful, so I’m reaching out to ask for help. I’ve tried a bunch of different options, but each yields a variety of Nuxt data errors. I cannot find documentation on the RenderContent method and what options/props are available to use with it. Can someone point me to that documentation?

2

Hey @somecallmejosh - this absolutely should work the way you are expecting. Have you made any progress on debugging this? Can you link me to the Builder page you are using? (builder.io/content/…)

1 Like
3

@steve, unfortunately I have not. Will follow up with a link in the morning. Thanks for following up.