November Happy Hour will be moved to Thursday December 5th.

Use Content Delivery API from existing Vue/Nuxt app?

Ian
Ian
Vote:
 

I am completely new to Optimizely and I am climbing the learning curve as quickly as I can but I have been in software development for over two decades and have worked with many CMS platforms.

I have an existing Vue/Nuxt app that relies on SSR. It is connected to a legacy CMS that we want to replace with Optimizely. We don't have any commerce. Users mostly filter lists of data (not content) and view the data. My users don't want to manage the site structure / routing at all and I have many Vue components unrelated to content.

From reading in this forum and elsewhere, it seems like I should be able to use the Content Delivery API to retrieve content (using Optimizely as a headless CMS). Alternatively, I could create a new Optimizely site and incorporate my existing Vue components.

So far, it seems like the first option (headless CMS into existing Vue app) would be the most advantageous since I would not be re-creating everything, just the CMS calls. Further, I understand that OPE is possible in an SSR site (from David Knipe's post "Video: Set up Optimizely Foundation Single Page Application reference").

Is there anything else I should consider before I proceed? Are there alternatives I am missing?

Thanks in advance - all thoughts are welcome.

#296457
Edited, Feb 13, 2023 17:45
Eric Herlitz - Feb 13, 2023 21:29
There's an older sample Vue-site in Optimizelys GitHub repo, using an older CMS (11) but still a great starting point from what you are describing. https://github.com/episerver/musicfestival-vue-template
Ian - Feb 13, 2023 21:32
Eric, Thanks for the note. Yes, I've been digging through that repo (and Foundation which seems newer). It's the MusicFestival example that has me mostly convinced that my approach can work. Have you done anything with Optimizely Content Delivery API in a Vue context?
Eric Herlitz - Feb 13, 2023 21:41
We mainly use Blazor with Content Delivery in my organization. The Content Delivery parts are still the same for sure, we do however always separate Content Creation and Delivery into different apps, avoiding running the front end in the same container.
Ian - Feb 13, 2023 21:44
That makes sense. Was that choice due to problems you encountered or did it just seem like a safer choice? Thanks again
Eric Herlitz - Feb 13, 2023 21:51
In no way a safer choice. It's more of a philosophical thing where we'd like to see the CMS as one plattform delivering content to our sites and apps.
Vote:
 

We have implemented an headless solution using NextJS with Optimizely Content Delivery API - Advantages were it handled the routing for us, so we were able to call Content Delivery API quite simply by : 

`/api/episerver/v3.0/content/?contentUrl=${culture}${ctx.resolvedUrl}&expand=*`;

Our Front and Backend were de-coupled Apps and to get Optimizely Preview and OPE to work we had to utilise EPiServer.CMS.UI package (12.4.0 - Onwards). This new package contains the first release of the OPE in a decoupled cross domain scenario.

You will need to reference /Util/javascript/communicationInjector.js and Util/javascript/deliveryPropertyRenderer.js, in your front end application. 

Ref: https://docs.developers.optimizely.com/content-cloud/v12.0.0-content-cloud/docs/on-page-editing-with-client-side-rendering?_gl=1*1sw5q67*_ga*MTA1ODE3NDIxNi4xNjc0ODEzODIz*_ga_C7SLJ6HMJ5*MTY3NjMyODAxNy41MC4xLjE2NzYzMzAyNjguNTcuMC4w#re-render

#296467
Edited, Feb 13, 2023 22:59
Ian - Feb 14, 2023 14:16
Minesh, Thanks for all the detail. I'll be reading about all of that today.
Ian - Feb 14, 2023 17:38
It seems the OPE attributes were updated in 2019 so a single attribute is all you need: https://world.optimizely.com/blogs/john-philip-johansson/dates/2019/1/one-ope-attribute-to-rule-them-all-data-epi-edit-cms-ui-11-16-0/

Still reading about packages you listed.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.