TL;DR:

Server side render websites using Nuxt.js and GraphQL APIs over postgres using Hasura GraphQL Engine. Instant setup. Tutorial/boilerplate 👉 nuxtjs-postgres-graphql

Building universal apps is generally touted to be hard and Nuxt.js is here to solve this for Vue.js apps by being performant and modular. Hasura GraphQL Engine makes it easy to get GraphQL APIs on top of Postgres database. In this post, we will look at how these two can be integrated.

Nuxt.js

Nuxt.js gives full support for SSR apps and takes care of the common pitfalls. Being a universal app makes it more exciting; the page is server rendered and then SPA takes over. This is how it works:

Pages:

Nuxt is opinionated on the project directory structure. It will transform every .vue file inside the pages directory as a route for the application. The community has embraced the opinionated directory structure with different projects (looking at you Gatsby, Next.js) and its quite easy to get familiar with. In the boilerplate example, you can see how the pages are structured. For more information on the directory structure that Nuxt enforces, read more here.

Server side data fetching:

Nuxt community has built this apollo-module that sets up apollo client for a GraphQL endpoint. So in the index.vue page, we add the apollo snippet inside script as follows:

Here, author is a graphql query which fetches the list of authors from the database and updates the author property in vue. This GraphQL query is executed on the server and the data is available in template which allows the page to be rendered server side. The same query is then executed on the client side as well, making it universal/isomorphic. apollo-module in Nuxt accepts a clientConfig which can be used to configure endpoint, authentication and other parameters as well.

Nuxt.js + Hasura + apollo-module = Universal apps with GraphQL!

I have put together a boilerplate and tutorial so that you can get started quickly!

Check it out on github.