Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.


Boilerplate to get started with Nuxt.js, Hasura GraphQL engine as CMS and postgres as database using the create-nuxt-app and @nuxtjs/apollo module.


  • Deploy Postgres and GraphQL Engine on Heroku:

    Deploy to heroku

    Please checkout our docs for other deployment methods

  • Get the Heroku app URL (say

  • Create author table:

    Open Hasura console: visit on a browser
    Navigate to Data section in the top nav bar and create a table as follows:

    Create author table

  • Insert sample data into author table:

    Insert data into author table

    Verify if the row is inserted successfully

    Insert data into author table

  • Similarly, create an article table with the following data model: table: article columns: id, title, content, author_id (foreign key to author table's id)

  • Clone this repo:

    git clone
    cd graphql-engine/community/sample-apps/nuxtjs-postgres-graphql
  • Install npm modules:

    npm install
  • Open apollo/clientConfig.js and configure Hasura's GraphQL Endpoint as follows:

      import { InMemoryCache } from "apollo-cache-inmemory";
      export default function(context){
        return {
              httpLinkOptions: {
                  uri: '',
                  credentials: 'same-origin'
              cache: new InMemoryCache(),
              wsEndpoint: 'ws://',
  • We have defined the graphql query in apollo/queries/fetchAuthor.gql.

    • GraphQL query
    query {
      author {
    • In pages/index.vue, we import author query.
    import author from '~/apollo/queries/fetchAuthor'
    export default {
      apollo: {
        author: {
          prefetch: true,
          query: author
      head: {
        title: 'Authors of Blog'
  • Run the app:

    npm run dev
  • Test the app Visit http://localhost:3000 to view the app

For detailed explanation on how things work, checkout Nuxt.js docs.