How it works
A quick walk-through of the core concepts of Gridsome
The GraphQL data layer
The GraphQL data layer makes it very easy to work with data, and you don't need to deal with rest APIs. You don't need to know much about GraphQL to get started.
Vue.js for templating
Built-in Progressive Image support
Gridsome has a built-in
<g-image> component with built-in progressive image support.
Learn more here
Page pre-fetching for fast browsing
Gridsome pre-fetches next pages so browsing around goes fast. It uses the built-in
<g-link> component to lazy-load prefetching when the link is in view. Learn more here.
- Learn more about Deploying.
Built-in performance optimization
Gridsome follows the PRPL-pattern by Google. and optimizes your site automatically. You don't need to be a performance expert to make fast websites with Gridsome. Your site gets almost perfect scores on Google lighthouse out-of-the-box. These are some of the performance steps that Gridsome takes care of:
- Progressive Image support ⚡️
- CSS & JS minification ⚡️
- Code-splitting ⚡️
- HTML compressing ⚡️
- Critical CSS (Plugin) ⚡️
- Full PWA & Offline-support (plugin) ⚡️
- VuePress. Another static site generator for Vue.js. It uses local markdown files for content and is perfect for documentation sites. It is possible to build anything in VuePress and Markdown (Like a blog f.ex).
- Nuxt. A Universal Vue.js Framework for server-side rendered (SSR) apps and websites. It also has a static site generator feature, but the main focus is SSR.
- Gatsby.js Gridsome is highly inspired by Gatsby.js (React.js based), which collects data sources and generates a static site from it. Gridsome is an alternative for Gatsby.js.