Build Responsive Cross Platform Vue Apps with Quasar Framework and GraphQL

Published in

Hasura

3 min readMar 20, 2019

Build responsive SPAs, SSR Apps, PWAs, Hybrid Mobile / Electron Apps using a single codebase with Quasar Framework powered by Vue.js and GraphQL APIs over postgres using Hasura GraphQL Engine.

Instant setup. Tutorial/boilerplate 👉 quasar-framework-vue-graphql

Quasar Framework

Quasar Framework is a high performance full frontend stack allowing developers to maintain a single codebase to build different types of apps (SPA, SSR, Hybrid etc).

It is powered by Vue.js but comes with its own set of built-in web components that can be imported to quickly construct an interface for the app.

Hasura with Quasar

Hasura is an open-source engine that gives you realtime GraphQL APIs on new or existing Postgres databases, with built-in support for stitching custom GraphQL APIs and triggering webhooks on database changes.

Hasura GraphQL fits in neatly in this workflow of building cross platform apps. All the clients(mobile app/electron app) use the same set of APIs controlled by the same set of permissions and auth and can leverage the power of Postgres. Quasar gives endless possibilities with one codebase and a common GraphQL API from Hasura adds to the easier development workflow.

Now let’s see some implementation details for a simple author/article blog app:

Plugins

Quasar allows users to define app plugins which can be used to run code before the root Vue instance is instantiated.

quasar new plugin apollo

And we define the apollo plugin inside src/plugins/apollo.js and create the ApolloClient with Hasura GraphQL API Endpoint.

In this sample app, we are making use of this plugin to inject Apollo props to Vue prototype. So inside .vue files, we can make use of this.$apollo to execute any graphql specific actions.

We can configure quasar to add the new plugin by modifying quasar.conf and adding apollo in the plugins list as below:

module.exports = function (ctx) {
  return {
    // app plugins (/src/plugins)
    plugins: [
      'apollo'
    ],
  }
}

In the layouts, we have defined a layout drawer listing out the authors and a simple GraphQL query to fetch author has been used.

<script>
import { openURL } from 'quasar'
import gql from 'graphql-tag'

const authorQuery = gql`
  query {
    author {
      id
      name
    }
  }`
export default {
  name: 'MyLayout',
  data () {
    return {
      leftDrawerOpen: this.$q.platform.is.desktop
    }
  },
  methods: {
    openURL,
    fetchArticles (item) {
      this.$router.push('/author/' + item.id)
    }
  },
  apollo: {
    // Simple query that will update the 'author' vue property
    author: authorQuery
  }

}
</script>

This is still the same kind of code you would have written with Vue.js apps to make a GraphQL query with vue-apollo. But the difference is the <template> where quasar gives native-like components to build hybrid apps.

The author list is rendered on a <q-layout-drawer> and it is automatically responsive as with every quasar layout component. Quasar comes with all sorts of layout, button, form components and more that you can get you started quickly to create a native feel app.

Build Targets

Quasar requires you to specify the mode spa|ssr|pwa|cordova|electron of the app and the target cordova|electron (in case its a hybrid app). You can also specify themes like material, ios etc which will apply the styles for each component appropriately.

Build Responsive Cross Platform Vue Apps with Quasar Framework and GraphQL

Written by Hasura