Learn about Gridsome, a Jamstack framework for Vue.js. This static site generator (SSG) has all the speed and efficiency you need to build modern, efficient websites. Learn how to fetch markdown content with GraphQL.
Gridsome is a Jamstack framework for Vue.js that's growing in popularity among SSGs for its speed and efficiency.
Whenever you are running into performance issues with your single-page applications, you might consider using a static site generator to offload some performance overhead. There are hundreds of static site generators out there, and Gridsome is one of the most popular with over 7000 stars on Github. Gridsome is certainly worth a detailed look, so let’s get started.
In this article, we will be taking a closer look at Gridsome: how it works, how to get started, how to use Gridsome to create websites and apps that are fast by default, and finally, learn how to fetch markdown content with GraphQL.
This tutorial is specifically for developers who want to get started with Gridsome and already use Vue.js. By the end of this tutorial, you will understand how to make use of Gridsome’s many functionalities — along with a few “gotchas” and things to keep in mind along the way.
To get started with Gridsome, you’ll need to make sure you have the following tools installed:
To confirm that you have Node installed, you can run
node --versionin the Terminal
Knowing how GraphQL works is a plus, though their documentation has plenty of examples for quick review.
Gridsome is a free and open-source Vue-powered static site generator (SSG) for building fast, modern websites and apps
In this tutorial, we will be using Vuex and ApolloClient connected to a GraphQL API to handle authentication in our Vuejs app.
Vue File Upload Using vue-dropzone Tutorial is the leading topic. For this example, I am using Vue 3 and vue-dropzone library. We will create a simple form component through the user can upload the image, and we will store in the Laravel 5.6 server.
In this article, I will collect 10 Vue icon component to bring more interactivity, better UI design to your Vue application.