Page Inspect

Modern Site Generator for Vue.js - Gridsome

DocsStartersPluginsBlog

v0.7.23

Core Repository Core Changelog Core Issues Gridsome Roadmap Website Repository

# A Jamstack framework for Vue.js

Gridsome makes it easy for developers to build static generated websites & apps that are fast by default 🚀

Get started

Open-source MIT Licensed. GitHub (v0.7.23)

Bring your data

#### CMSs

Any Headless CMS, Contentful, WordPress, Drupal, Sanity.io, etc.

#### Data

Any APIs, Databases, AirTable, YAML, CSV, JSON, etc.

#### Markdown

Any Git-based CMS, Forestry, Netlify CMS, Blogs, Documentation.

Build

Powered by
**GraphQL**

- HTML
- Vue.js
- CSS

Deploy

#### Static Web Hosts & CDNs

Netlify, AWS Amplify, Vercel, Amazon S3, Surge.sh, Aerobatic, 21YunBox & many more.

- Pre-rendered HTML
- Automatic Code Splitting
- Follows PRPL-pattern
- Smart link prefetching
- Progressive Images

### Easy, local development

Build websites with modern tools like
Vue.js, GraphQL & all the power of Node.js & the JavaScript ecosystem. Develop locally and get instant **hot-reloading** for any code change.

### Fast by default

Gridsome builds ultra performance into every page by using the PRPL pattern. You get **code splitting, asset optimization, progressive images, and link prefetching** out of the box. Gridsome sites get almost perfect page speed scores by default.

### PWA-ready

Gridsome generates static PWAs. Only critical HTML, CSS, and JavaScript get loaded first. The next pages are then prefetched so users can click around incredibly fast without page reloads, even when offline.

### Build on the Jamstack

The future of the web is JavaScript, APIs, and Markup - the Jamstack. Gridsome uses the power of blazing fast static site generation, JavaScript and APIs to create stunning modern web experiences.

### Simple, safe deployment

**No servers. No databases. Only files.** Deploy your entire site to a CDN and forget about it. A Gridsome site can handle thousands to millions of hits without breaking - and no expensive server costs.

### SEO-friendly

Gridsome sites load as static HTML before they hydrate into fully Vue.js-powered SPAs. This makes it possible for search engines to be able to crawl content and give better SEO ranking, and still have all the power of Vue.js.

## Connect the modern web

The modern web is decoupled and modular. Gridsome makes it painlessly easy to build Jamstack websites using data from multiple sources such as Content API's, Headless CMSs, and other web services.

Browse Gridsome Plugins

## A better way to build websites & apps

Gridsome makes it simple & fast to build modern websites for any data source.

Build with Vue.js & GraphQL Use data from any APIs Get data from CMS & APIs with source plugins File-based page routing File-based dynamic routing Use Markdown for data Built-in Pagination support Taxonomy pages Programmatically generate pages Progressive Images

src/pages/Blog.vue

<template>
<Layout>
<h1>My blog</h1>
<div v-for="{ node } in $page.allPost.edges" :key="node.id">
<h3>{{ node.title }}</h3>
<g-link :to="node.path">Read more</g-link>
</div>
</Layout>
</template>

<!-- Query from local GraphQL data layer. -->
<page-query>
query {
allPost {
edges {
node {
id
title
path
}
}
}
}
</page-query>

Get started

## Gridsome Sponsors

Thanks to Netlify for sponsoring Gridsome hosting infrastructure.

Thanks to Algolia for sponsoring search for Plugins and Documentation

## Latest from Gridsome blog

Read more

### How to integrate Infinite Loading with Gridsome

Infinite loading is an alternative strategy for loading additional nodes/content onto a page without the use of traditional pagination. Infinite loading instead loads the next batch of content when a user scrolls to the bottom of a web page.

Posted 8. October 2019 by

Cody Barr - **3 min read**

Read more

### Gridsome v0.7

Version 0.7 is finally here! Enjoy Vue Components in Markdown, new Schema API, File-based dynamic routing, better Template config, Custom App.vue, Shareable Network URL and more!

Posted 17. September 2019 by

Hans-Jørgen Vedvik and

Tommy Vedvik - **6 min read**

Read more

### Gridsome v0.6

Gridsome 0.6 introduces a Pages API that gives you full control of page creation. It also has an API that lets you fetch internal pages into other pages and components. This is perfect for lightboxes or «Click for more» pagination etc. 0.6 also improves build times and has a smaller core JS bundle size!

Posted 10. May 2019 by

Hans-Jørgen Vedvik and

Tommy Vedvik - **3 min read**

Read more

### Gridsome v0.5

We're really excited to release Gridsome 0.5. The biggest update yet. It has many important features that make data handling easier and a lot more flexible. It opens up a whole new world of what you can build with Gridsome. Easily build Taxonomy pages and connections for any data.

Posted 19. February 2019 by

Hans-Jørgen Vedvik and

Tommy Vedvik - **2 min read**

Read more

### Say hello to Gridsome 👶🎉💚

A new static site generator baby is born. It's highly inspired by Gatsby.js (React based) but built on top of Vue.js. We have been working on it for a year and will have a beta ready soon. You can expect this baby to grow up fast!

Posted 10. October 2018 by

Tommy Vedvik - **3 min read**

**👋 Stay in the loop.** Subscribe to Gridsome newsletter!

Subscribe

An open source project by @hjvedvik, @tommyvedvik and Contributors. Logo & assets