Member-only story
Build a Full Stack Application With Vue.js, GraphQL, Fastify and MongoDB
Deploy a fully functional full-stack application from scratch. Part 3 of 4.
- Part 1: How To Build Blazing-Fast REST APIs with Node.js, MongoDB, Fastify, and Swagger
- Part 2: How To Build a Blazing-Fast GraphQL API with Node.js, MongoDB, Fastify, and GraphQL
- Part 3: Coupling Vue.js With a GraphQL API (You are here.)
- Part 4: Deploying a GraphQL API and Vue.js Front-End Application (Coming Soon).
In this tutorial, we will connect a GraphQL API with a decoupled Vue.js front-end.
Introduction
Vue.js is a progressive JavaScript framework allowing anyone with HTML, CSS, and JavaScript knowledge to quickly bootstrap an application.
Vue.js is said to have taken the best parts from Angular and React and then improved on them to create Vue.js. I personally find Vue.js really intuitive to work with, for both back- and front-end developers.
Here is a great blog post going into more detail about Vue.js, and if you are brand new to Vue.js, be sure to watch the video below:
Prerequisites
If you have completed the second part of this series, you should be up to speed with the required JavaScript knowledge needed to complete this tutorial.
HTML and CSS knowledge is good to have, but we won’t go too much into it — we will focus more on the JavaScript and Vue.js parts. Be sure to familiarize yourself with the Vue.js templating syntax.
To follow along, you will need to complete Part 2 of this series or clone the repository from Git. I would highly recommend at least skimming through Part 2 to get an overall idea of what data we are working with.
Let’s Get Started
git clone https://github.com/siegfriedgrimbeek/fastify-graphql-api.git…
