Gridsome for Beginners #3: Core concepts
Neha Sharma
Posted on August 9, 2020
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:
In the next blog, we will learn about the Anatomy of the components
Posted on August 9, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.