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 Apito'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.