Prismic with Vue (Pre render routes)

Without using NUXT or GRIDSOME, can i pre render my vue app with my prismic blog pages? Currently pages, where my prismic blog is located, shows a long loading spinner, then after 4 - 5 seconds shows the blog content. I would love to pre render this data and save it to a html file and serve that through any static server.

Having pages that need to wait for content seems like a tradeoff, my data doesn't change that often, so i would be happy to do it at build time, but dont need all the features of nuxt or gridsome for this.

Thanks.

Hi @rishi ,

Thanks for posting this question, and welcome to the Prismic community :slight_smile:

Vue does not natively support prerendering, so you would probably need a plugin for it. There's a list of prerendering plugins, here:

I hope this helps!

Sam

Thanks for your reply.

Sadly most of those packages have no maintainer nor have they been updated within the last 2-3 years, with dependencies being out of date. I spoke to a few of the ex-maintainers and even they wouldn't use their package anymore. (this includes the "un-offical" vue pre-rendering package mentioned in the vue docs.

My only other option now is to roll my own puppeteer headless chrome and see how that works out, but that will be an uphill battle.

I have prismic installed on a route '/about' for example, and google cant index it saying it's showing as a 404 page.

I wonder what everybody else here is doing with single-page applications with any headless cms including Prismic. They can't surely all be running SSR with nuxt or next, that can't be true, these solutions are overkill just for simple pre-rendering. I was hoping to come here and find somebody else that has already figured out a solution that is scalable and has been tested,.

if you have any other options, please let me know what i could try.

Thanks

Just to follow up on my use case.

I am looking for a CMS that ideally can fetch data at build time, hence there wouldn't be a requirement to fetch via on run-time. Can i do this with prismic cli?

Hey @rishi ,

Most of our users use Nuxt, Next, or Gatsby, as opposed to just React or Vue. Prismic can definitely provide data at build time or run time, but I don't believe that Vue is designed to serve static files on its own.

If you're looking for a simple solution for a static site, maybe you could check out Eleventy. There's a new open source Prismic–Eleventy plugin, and I'm sure the developers would welcome feedback.

Alternatively, we just published a tutorial for building a site with SvelteKit, which can build very small statically-generated web apps, with or without client-side routing. Let me know if you want more information about that.

Sam

Hi Sam,

Appreciate the time taken to reply and provide insight.

Thanks, I'm not using nuxt because we don't need or require SSR (i.e a node server to host). Instead we host on a static web server like aws s3, which scales far better. Vue creates a single page application which can be hosted on s3 or any static host, without any other software, same like React or Angular.

But since its a SPA all 'content' will need to be fetched at run time from prismic hence my dilemma. Users have to wait for content to be loaded as opposed to it being there already when i had it without prismic , (content was previously hard coded in the html files)

We also dont need the other features provided by Nuxt, gatsby, gridsome etc. All we need is for the files to built statically. I am sure i cant be the only person with this use case.

Yes vue does not provide any tooling for pre-rendering (apart from some out of date 3pl) because they are focused on being a single-page application, and they try to force you on to Nuxt when actually you probably don't really need a framework on top of the framework, but you just need to pre-render certain routes on build time.. Hope I am making sense.

I cant use sveltekit because our app has been built with vue already.

I will check out your other options.

Another final way is to use a headless chrome puppeteer and manually integrate it with webpack build to built out the routes..

This is what Im looking for:

  1. 'npm run build'
  2. webpack build files as normal
  3. build will detect that certain routes require to be pre-rendered or being made static for example /about /index /contact
  4. fetch all apis, await for data (i.e prismic routes)
  5. create .html files for each of those files
  6. save files in /dist folder
  7. do the rest of the things that webpack does.

once again i realize that prismic is a headless cms, and was only hoping that you have come across users who need content to be built at build time injected in to the html and served on a static host.

Thanks so much again.

Hey @rishi ,

I think Nuxt might be the best option for what you're describing. Nuxt is actually very popular as a static site generator. Nuxt+Netlify is a very popular stack, and Netlify is a serverless platform. Here, Netlify has a post about using static rendering with Nuxt. With Prismic, you can regenerate your static site with webhooks.

So, if you add Nuxt to your project, it will provide your bundling and static generation without SSR.

One potential downside is that Nuxt comes with a router built-in. You might be able to disable the router, though I'm not sure.

Let me know what you think! I'm happy to ask my coworkers for more ideas if you don't think Nuxt could work.

Best,
Sam

Thanks Sam

appreciate your response, yes nuxt would be good if I was starting out with nuxt, but we're too far in the app now to install nuxt just for pre-rendering, it would pose a lot of refactoring and re-writes to our existing router and application layout, including a change in folder structure etc.

I am right now looking at 11ty to see how nicely it integrates with vue first. Vue has something called Vuepress which is a static site generator and looks like it could work, but then I read it only grabs data from markdown files, and not from api's. (as far as I know)

yes if your coworkers have any other suggestions, let me know.

P.S.If you ever wrote a blog post titled 'Vue + Pre rendering/Static Site + Prismic' you will get a tonne of hits to your site.

thanks.

1 Like

Thanks @rishi ,

I'll consider the blog post. Please let me know what you end up doing!

Sam

Hi Sam,

i tried 11ty, but the docs say templating engine does not support .vue files and it will be hard to get it going with a framework unless I use .md or .pug etc.

Im currently trying out vue press but that only works with mark down files. Which means I will have to write my content in mark down and keep the content stored locally (and that means no primsic) well ill let you know.

thanks.

Hey @rishi ,

I spoke with a coworker, and she suggested this plugin:

Let me know if that helps :slight_smile:

Best,
Sam