Build super fast, modern websites with Vue.js

Gridsome is a Vue-powered static site generator for building CDN-ready websites and apps for any headless CMS, local files or APIs

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

Logos

Bring your own data

Load data from any CMS, APIs, static files, a database, or from multiple places at once. Gridsome combines them all into a simple, centralized GraphQL data layer that pages and components can access.

Fast by default

Gridsome automatically optimizes your website to load and perform fast. You get code-splitting & progressive image support built-in to get close to perfect Lighthouse scores.

PWA offline-ready

Gridsome loads only the critical HTML, CSS, so your site loads as fast as possible. Once loaded, the next pages are prefetched so clicking around the site feels incredibly fast. It even works offline.

Simple, safe deployment

Gridsome sites are pre-rendered at build time and can be entirely hosted on a CDN. It can handle thousands to millions of hits without breaking - and at no expensive server costs.

SEO-friendly SPA

Gridsome sites render as pure HTML before Vue.js is loaded and SPA kicks in. This makes search engines able to crawl content and give better SEO ranking because of the super fast loading.

Instant hot-reloading

Enjoy modern dev tools like Vue.js,
GraphQL & webpack. Get instant hot-reloading for any data change while developing. Gridsome makes building websites fun again.

How Gridsome works

Connect to any CMS or data source and use Vue.js for frontend. Deploy to any static web host for super fast, scalable, cheap and secure hosting.

Data sources

CMSs

WordPress, Contentful, Drupal, Prismic, GraphCMS, etc.

Local files

Markdown, YAML, CSV, JSON, Image folders, etc.

APIs

AirTable, Google Spreadsheet, MongoDB, Prisma, etc.

Develop

GraphQL
data layer
Vue.js
webpack
Hot-reloading
Deploy

Static web hosting

Generate static files and deploy to any global CDN or FTP.

deploy-logosLearn more about deployment

All your data in one place

Gridsome brings all your data into a unified GraphQL data layer. The data can be browsed and explored in a simple local interface (GraphQL Playground) and inserted to any Vue Component.

  • Pull data from any CMS, files or data APIs
  • Browse data and test queries locally
  • Query only the data fields you need
  • Built-in pagination support for queries
GraphQL Browser

Build with Vue.js

Vue.js is an approachable, fast and lightweight front-end framework. It's incredibly popular, got a huge community behind it and is used by major companies. Vue.js builds upon classic web technologies meaning that the learning curve for development teams are small.

  • Instant hot-reloading for incredible developer experience
  • Sanitize your stack. Same frontend framework for any project
  • Approachable for any team member. It's just HTML and CSS
  • Awesome developer community. Find a library for any use case
<template>
  <Layout>
    <h1 v-html="$page.post.title"/>
    <div v-html="$page.post.content"/>
  </Layout>
</template>

<style lang="scss">
	h1 { font-size: 32px }
</style>

<page-query>
query WordPressPost ($path: String!) {
  post: wordPressPost (path: $path) {
    title
    content
  }
}
</page-query>

The future of the web is on the CDN

No servers. No databases. Only files. Nothing beats static, pre-rendered sites when it comes to speed and security. Deploy your entire site to a CDN and forget about it. Traffic or hacking will never break your site. The future of the web is on the CDN. Combine dynamic and static data with the power of Vue.js.

  • Super fast generating. Build thousands of pages in seconds
  • Better Performance. Faster page loading by default
  • Higher Security. Very few surface areas for attacks
  • Cheaper, Easier Scaling. Static files are the cheapest to host
Safe deployment

High performance baked-in βš‘οΈπŸš€

Gridsome builds the fastest possible websites. It pre-builds all pages at build time using the PRPL-pattern to get close to perfect page scores.

  • No render-blocking assets
  • Super fast Time to Interactive
  • Automatic code-splitting
  • Automatic critical CSS
  • Automatic next page prefetching
  • Navigate without page reloads
  • PWA-ready out-of-the-box
  • Progressive image loading
  • Automatic image resizing
  • Pre-rendered SEO-friendly markup

Latest posts

Say hello to Gridsome πŸ‘ΆπŸŽ‰πŸ’š

Posted 10. October 2018 by Tommy Vedvik - 1 min read

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!

Read more