0

The current project is a Single page application developed in Vue. As of now, the content is pretty much static but some data is available via REST APIs.

Now the ask that came up is to maintain the uniformity in terms of design, utilize the Header & Footer menu ( along with HTML & CSS structure) as-is in SPA from Drupal which serves static pages of the other app. There is no correlation between these two web apps.

I have read articles on headless CMS on how they serve the content to the frontend, but since this is a SPA and not Server-side driven, keen to know how to make this happen.

Of course, exposing via REST is an option but it will not be a great UX.

Kindly let me know your views on how to approach this better or what are various options that can be thought of.

Robin

Parag Diwan
  • 3,007
  • 2
  • 19
  • 37

2 Answers2

0

You'll have to hit endpoint at some point from your Vue app.

Either compile regularly the application and consume it as part of the build process so it's static and bundled or make it dynamic by consuming the endpoint via JS.

rovr138
  • 695
  • 6
  • 9
0

So there are multiple solutions I can think of,

  1. Make an SSR Node js script which will generate the header & footer and place it in index.html placeholder as a part of the build script. ( Downside is: - Frequent production update based on the changes in Drupal end. )

  2. Make SPA as Server-side render and Respond with updated index.html.

  3. Have an endpoint that will give the menu content assuming the common HTML structure at Drupal & SPA app.

Please let me know if there is a better approach to this.

Thanks

Parag Diwan
  • 3,007
  • 2
  • 19
  • 37