Prologue

Introduction Core concepts Fast by default Deployment

Basic Gridmix

Directory structure Project configuration Pages Collections Templates Layouts Components Linking Dynamic Routing Image processing Populating <head> Environment Variables

Working with data

GraphQL data layer Importing data Querying data Filtering data Taxonomy pages Paginate data Global metadata Client-side data

Styles and Assets

Use CSS in Gridmix Add custom fonts Add external scripts Add SVG icons

Guides

Add a form Add a search Add comments Add Netlify CMS Overriding index.html Overriding App.vue Page transitions body & html attributes

API Reference

Gridmix CLI Server API Data store API Schema API Pages API Client API Transformer API

Deploy

Netlify AWS Amplify Vercel Amazon S3 GitLab Pages GitHub Pages Google Cloud Platform Surge.sh 21YunBox Azure Static Web Apps IONOS Deploy Now

Contribute

How to contribute How to create a plugin Code of conduct

Help

Prerequisites How to upgrade Troubleshooting Dev tools FAQ

Introduction

Gridmix is a Vue.js powered Jamstack framework for building static generated websites & apps that are fast by default 🚀.

Why Gridmix?

  • 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 Name.vue file in src/pages is a static route.
  • Dynamic routing - Any [param].vue file in src/pages is 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?

Gridmix 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.

Learn more about the Jamstack.

How it works

Gridmix 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 Gridmix.

Gridmix 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).

It uses vue-router for SPA routing, and vue-meta for managing <head>.

Gridmix adds a 57kB min gzip JS bundle size by default.(vue.js, vue-router, vue-meta and some for image lazy loading).

Learn more about how it works.

Prerequisites

You should have basic knowledge about HTML, CSS, Vue.js and how to use the Terminal. Knowing how GraphQL works is a plus, but not required. Gridmix is a great way to learn it.

Gridmix requires Node.js (v22.18+) and recommends pnpm.

How to install

1. Install Gridmix CLI tool

  • Using YARN: yarn global add @gridmix/cli
  • Using NPM: npm install --global @gridmix/cli

2. Create a Gridmix project

  1. gridmix create my-gridmix-site to create a new project
  2. cd my-gridmix-site to move into project directory
  3. gridmix develop to start local dev server at http://localhost:8080
  4. Happy coding 🎉🙌

3. Next steps

  1. Create .vue components in the src/pages directory to create page routes.
  2. Use gridmix build to generate static files in a /dist folder

Learn more

Alternatives

  • 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 Gridmix is highly inspired by Gatsby.js (React.js based), which collects data sources and generates a static site from it. Gridmix is an alternative for Gatsby.js.

Edit this page on GitHub

On this page