Gridsome for Beginners #3: Core concepts
Tags: vue, developer, webdeveloper
Published: 2020-08-09 06:35:52

---
title: Gridsome for Beginners #3: Core concepts
published: true
description: what are the core concepts in Gridsome? Let's explore them today
tags: vuejs, developer, webdeveloper
//cover_image: https://direct_url_to_image.jpg
---

In the last 2 blogs we learned about:

1) [What is Gridsome](https://dev.to/hellonehha/introduction-to-gridsome-vuejs-4f3p)
2) [Installation Guide](https://dev.to/hellonehha/gridsome-for-beginners-2-project-structure-walkthrough-2ehe)

In this post, we will learn about the **core concepts** of the Gridsome.

### Pages

Pages in Gridsome put in the page folder of the project. Pages are used for the file-based routing. In Gridsome there is Page API to create the programmatical pages

Every page has a URL and responsible to present the data. We can have static and dynamic generated pages too.

Read more [here](https://gridsome.org/docs/pages/)

### Collections

A collection is a group of nodes and each node contains fields with custom data. Collections are useful if you are going to have blog posts, tags, products, etc. on your site.

Collections can be added by using the Data Source API or by source plugins. 

This is going to be very useful in Gridsome.

Read more [here](https://gridsome.org/docs/collections/)

### Templates

Templates are used to create single pages for nodes in a collection. Nodes need a corresponding page in order to be presented on its own URL.

Example: Blog detail pages, you can have a template for that and display the nodes from the collection to create the blog detail page.

Available template options:

1) Name: Specify a name for the template to get the path in GraphQL.
2) Path: Define a dynamic route and use any node field as parameters.
3) Component: Component to use as a template for each page

Read more [here](https://gridsome.org/docs/templates/)

### Layouts

Layout component is used to wrap pages. Layouts should contain - Header, Footer, Sidebar or anything which is used across the site. Layout will be in the `src/Layouts/` folder.

Layout requires `<slot>` where the content will come.

We can have multiple Layout, Slot, as well as they, can accept the `props` too.

Read more [here](https://gridsome.org/docs/layouts/)

### Images

The beauty of the Gridsome is they have an inbuilt image component and handles a lot of hard work by itself:

1) Progressive optimized image
2) Resize image
3) A base64 blurred image loaded by default
4) lazy loading image by using `IntersectionObserver` when in view

Read more [here](https://gridsome.org/docs/images/)

### Link

The beauty of the Gridsome is they have an inbuilt link plugin `<g-link>`. This is globally available to all your Components, Pages, and Templates 

`<g-link>` also used `IntersectionObserver` to prefetch the linked pages when the link is in view and this makes the browsing fast as the clicked pages are already downloaded.

Read more [here](https://gridsome.org/docs/linking/)

## Attend JSLovers upcoming meetup on JAMStack and Vuejs. 

Details:

1) [JAMStack](https://www.meetup.com/jslovers-bengaluru/events/272330375/)
2) [Vuejs](https://www.meetup.com/jslovers-bengaluru/events/272442388/)

In the next blog, we will learn about the Anatomy of the components