DEV Community

Neha Sharma
Neha Sharma

Posted on

Gridsome for Beginners #3: Core concepts

In the last 2 blogs we learned about:

1) What is Gridsome
2) Installation Guide

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

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

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

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

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

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

Attend JSLovers upcoming meetup on JAMStack and Vuejs.

Details:

1) JAMStack
2) Vuejs

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

Top comments (0)