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 ✂️

Prerequisites

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. https://maizek-todo-app.netlify.com/

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox