Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Boilerplate to get started with Quasar Framework, Hasura GraphQL engine as CMS and postgres as database using the quasar-cli and vue-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 node modules:

    yarn install
  • Open src/plugins/apollo.js and configure Hasura's GraphQL Endpoint as follows:

import { ApolloClient } from 'apollo-client'
import { InMemoryCache } from 'apollo-cache-inmemory'
import VueApollo from 'vue-apollo'
import fetch from 'node-fetch'
import { createHttpLink } from 'apollo-link-http'

const httpLink = createHttpLink({ uri: '', fetch: fetch })

// Create the apollo client
const apolloClient = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
  connectToDevTools: true

In the httpLink, replace with your own Heroku URL of Hasura GraphQL Engine.

  • We have defined the graphql query for fetching author list in src/layouts/MyLayout.vue.

    • GraphQL query
    const authorQuery = gql`
      query {
        author {
    • In pages/Articles.vue, we have defined a graphql query for articles
    const articleQuery = gql`
      query articleQuery($authorId: Int!) {
        article(where:{author_id: {_eq: $authorId}}) {
    export default {
      data () {
        return {
          authorId: this.$route.params.authorId
      name: 'Articles',
      apollo: {
        // Simple query that will update the 'article' vue property
        article: {
          query: articleQuery,
          prefetch: false,
          variables () {
            return { authorId: this.authorId }
      watch: {
        '$route.params.authorId': {
          handler: function (authorId) {
            if (this.$apollo.queries.article) { this.$apollo.queries.article.refetch({ authorId: authorId }) }
          deep: true,
          immediate: true
  • Run the app:

    quasar dev
  • Test the app Visit http://localhost:8080 to view the app

For detailed explanation on how things work, checkout Quasar Framework docs.

You can’t perform that action at this time.