Wednesday, 20 March, 2019 UTC
Summary
TL;DR
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, Hybdrid 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 apolloAnd 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.Read more about build targets here
I have put together a boilerplate and tutorial so that you can get started quickly!
Check it out on github.
Take it for a spin and let us know what you think. If you have any questions or run into any trouble, feel free to reach out to us on twitter, github or on our discord server.