Getting started with vue.js Gridsome Framework

Before we get started on setting up the Gridsome, let’s have a brief summary of what this framework does. And if you’re thinking of building your static site soon, I highly recommend using a static site generator such as Gridsome, Gatsby, Hugo, etc. But for this tutorial, we will talk about Gridsome.

So what is Gridsome? Gridsome is a powerful static site generator. It helps the developers to create a website easy and fun.

Features of Gridsome

  1. Fast by default ⚡️
  2. It’s PWA ready 🚀
  3. Prefetching 💪
  4. Code Splitting is done automatically ✂️


You should have basic knowledge about HTML, CSS, Vue.js and how to use the Terminal. Knowing how GraphQL works is a plus, but not required. Gridsome is a great way to learn it.

Gridsome requires Node.js (v8.3+) and recommends Yarn.

How to install

1. Install Gridsome CLI tool

  • Using YARN:yarn global add @gridsome/cli
  • Using NPM:npm install --global @gridsome/cli

2. Create a Gridsome project

  1. gridsome create my-gridsome-site to create a new project
  2. cd my-gridsome-site to open folder
  3. gridsome develop to start local dev server at http://localhost:8080
  4. Happy coding 🎉🙌

3. Next steps

  1. Create .vue components in the src/pages directory to create page routes.
  2. Use gridsome build to generate static files in a /dist folder

Directory structure

After the installation a basic Gridsome project would be structured like this:

For more information about Gridsome, you can always check their documentation which is very easy to follow.

Check out this simple To-do App project which is using Gridsome framework. Tutorial on how to build this app will be posted soon.

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox