- Vue.js for frontend - The simplest & most approachable frontend framework.
- Data sourcing - Use any Headless CMSs, APIs or Markdown-files for data.
- Local development with hot-reloading - See code changes in real-time.
- File-based page routing - Any
src/pagesis a static route.
- Dynamic routing - Any
src/pagesis a dynamic route.
- Static file generation - Deploy securely to any CDN or static web host.
- GraphQL data layer - Simpler data management with a centralized data layer.
- Automatic Code Splitting - Builds ultra performance into every page.
- Plugin ecosystem - Find a plugin for any job.
What is the Jamstack?
Gridsome is a Jamstack framework. Jamstack lets you build fast and secure sites and apps delivered by pre-rendering files and serving them directly from a CDN, removing the requirement to manage or run web servers.
How it works
Gridsome generates static html that hydrates into a Vue SPA once loaded in the browser. This means you can build both static websites & dynamic apps with Gridsome.
Gridsome builds one
.html file and one
.json file for every page. After first page load it only uses the
.json files to prefetch and load data for the next pages. It also builds a
.js bundle for each page that needs it (code splitting).
Gridsome adds a
57kB min gzip JS bundle size by default.(vue.js, vue-router, vue-meta and some for image lazy loading).
How to install
1. Install Gridsome CLI tool
- Using YARN:
yarn global add @gridsome/cli
- Using NPM:
npm install --global @gridsome/cli
2. Create a Gridsome project
gridsome create my-gridsome-siteto create a new project
cd my-gridsome-siteto move into project directory
gridsome developto start local dev server at
- Happy coding
3. Next steps
.vuecomponents in the
src/pagesdirectory to create page routes.
gridsome buildto generate static files in a
import Newsletter from '@/components/Newsletter.vue'
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.