prismicio/prismic-vue

SSR Capable?

Closed this issue · 13 comments

johndigital commented

Love that you guys are working on this, going to be so helpful! I've noticed all the documentation assumes a browser environment, but I'm using Nuxt so my Vue components are getting rendered on the server. Any chance there are plans to make this SSR capable?

Maybe it is now but I couldn't get it working, I tried but it was throwing errors. For now I'm just using the prismic-javascript package to handle my data.

debiasio commented

Hello @johndigital,

Thanks for your kind words. Yes, we would like to make the prismic-vue SSR capable. We haven't work on it immediately for not delaying the release of the plugin and the docs. I am now working on a refactoring of the plugin that will allow to use it without the need to include the vue-compiler.

benoitemile commented

Hello @johndigital,

We're also using nuxt x prismic, and it's working real fine.
What we did :

  • set up an xhr service that fetches data from prismic API with prismic-javascript, we're making the prismic predicates things here
  • created a dedicated page for those content pages and called our previously created service with url query params in asyncData nuxt hook (with a try catch to show a proper 404 just in case)
  • created a static map object to be able to link a slice/template with .vue component
  • then in the dedicated page, a resolver uses the map to resolve and dynamically import components depending on data that prismic returns

Hope that is explicit enough, if not, maybe i'll bootstrap a sample nuxt x prismic project so people can onboard with no hassle.

johndigital commented

Hey @benoitemile,

Thank you, I appreciate the help! I think I've done something quite similar in my case, essentially wrapping the prismic-javascript package into a service that can be used throughout my app in both node and browser environments.

It works great, but I really like the idea of this prismic-vue plugin so I could use all the helper methods that have been built. The workflow outlined in this documentation using the injected $prismic namespace seems really nice to me.

debiasio commented

Hello @johndigital and @benoitemile,

Today I have made a test to include the prismic-vue plugin in a Nuxt project, so I confirm it doesn't work. In the future I will update the plugin to make it work with Nuxt. For now you have to manage yourself a way to use our prismic-javascript kit in your Nuxt project and refer to our generic JavaScript documentation.

@benoitemile It would be great if you can publish on GitHub a sample project Nuxt + Prismic that uses the prismic-javascript kit.

johndigital commented

Thanks @jbdebiasio I appreciate this update! Would love to help if possible, let me know if there's some part of this I could work on easily and maybe I can put together a PR.

The biggest obstacle for me is that everything seems to be working off the assumption that the prismic library is installed on the window global. I'm not sure how you would best want to decouple that and have it continue to work with your other tooling/libraries.

benoitemile commented

hi @jbdebiasio,

I also would love to help on achieving prismic-vue to be nuxt compliant, let's make it happen.
About sample project, i'm totally okay, do you have a "prismic test" repository ?

dan-gamble commented

Hey @johndigital and @benoitemile i'm also interested in SSR rendering. Luckily i came across this repo. This has an example of the prismic javascript kit implemented to work with SSR. Mainly the prismic-configuration and plugins/prismic.

Hope this is helpful until this plugin supports SSR.

  • 👍3
johndigital commented

This is really cool @dan-gamble, great find and thank you for sharing!

  • 👍1
uglow commented

Hi @jbdebiasio, any progress on making this library compatible with Nuxt.js? We are evaluating using Prismic for a government client at the moment. Easy integration with Nuxt.js is a key capability for us.

debiasio commented

Hi @uglow, I want to do it before December, I am busy on other projects now. I will let you know.

mcrider commented

I just integrated prismic with my nuxt app using https://github.com/jamespegg/prismic-nuxt -- Just ran some tests and it looks to be working well with SSR, not sure if I'll run into any gotchas at some point but its a pretty straightforward plugin.

Ralph-Imholz commented

@jbdebiasio any update on this?

  • 👀1
phillysnow commented

You can now use the Nuxt.js branch of the Vue Kit for SSR

npm install https://github.com/prismicio/prismic-vue.git#nuxt

  • 🎉2