Skip to main content

Integrate NuxtJS with Apito

NuxtJS is known as The Intuitive Vue Framework. Nuxt is shipped with plenty of features to boost developer productivity, and the end user experience.

  • Clone this repo:
git clone https://github.com/apito/nuxtjs-apito-todo-app.git
cd nuxtjs-apito-todo-app
  • Install npm modules:
yarn 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: 'https://api.apito.io/secured/graphql',
credentials: 'same-origin'
},
cache: new InMemoryCache()
}
}
  • We have defined the graphql query in apollo/queries/fetchAuthor.gql.

    • GraphQL query

    query {
    author {
    id
    name
    }
    }

    • In pages/index.vue, we import author query.

    <script>
    import author from '~/apollo/queries/fetchAuthor'

    export default {
    apollo: {
    author: {
    prefetch: true,
    query: author
    }
    },
    head: {
    title: 'Authors of Blog'
    }
    }
    </script>

  • Run the app:

npm run dev

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