Skip to content
Branch: master
Find file History
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
public
src add vuetify-vuex-todo-graphql sample app (#1866) Mar 26, 2019
.browserslistrc add vuetify-vuex-todo-graphql sample app (#1866) Mar 26, 2019
.eslintrc.js add vuetify-vuex-todo-graphql sample app (#1866) Mar 26, 2019
.gitignore
.postcssrc.js add vuetify-vuex-todo-graphql sample app (#1866) Mar 26, 2019
README.md
babel.config.js add vuetify-vuex-todo-graphql sample app (#1866) Mar 26, 2019
package-lock.json add vuetify-vuex-todo-graphql sample app (#1866) Mar 26, 2019
package.json add vuetify-vuex-todo-graphql sample app (#1866) Mar 26, 2019
vue.config.js

README.md

vuetify-vuex-todo-graphql

A simple Todo PWA (Progressive Web App) inspired by TodoMVC, Vue.js, Vuex and Vuetify technologies, forked from davidgararo/vuetify-todo-pwa, adding Hasura GraphQL integration

Tutorial

  • Deploy Postgres and GraphQL Engine on Heroku:

    Deploy to heroku

    Please checkout our docs for other deployment methods

  • Get the Heroku app URL (say my-app.herokuapp.com)

  • Create todos table:

    Open Hasura console: visit https://my-app.herokuapp.com on a browser
    Navigate to Data section in the top nav bar and create a table as follows:

    Create todos table

  • Clone this repo:

    git clone https://github.com/hasura/graphql-engine
    cd graphql-engine/community/sample-apps/vuetify-vuex-todo-graphql
  • Install node modules:

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

import Vue from 'vue'
import VueApollo from 'vue-apollo'
import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'

const httpLink = new HttpLink({
  // You should use an absolute URL here
  uri: 'https://myapp.herokuapp.com/v1alpha1/graphql'
})

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

const apolloProvider = new VueApollo({
  defaultClient: apolloClient
})

// Install the vue plugin
Vue.use(VueApollo)

export default apolloProvider

In the httpLink, replace myapp.herokuapp.com with your own Heroku URL of Hasura GraphQL Engine that you deployed above

  • Compile and hot-reload for development
  npm run serve
  • Production Build
  npm run build
You can’t perform that action at this time.