Integrating hgrid-css in a Vue 3 project with Vite

Hgrid Documentation

https://hgrid.io/documentation/integrate/#vue

Repository

https://github.com/ahansson/hgrid-css-vue-vite

Minimal setup of Vue with Sass compilation for hgrid-css.

What is hgrid-css ?

A lightweight and practical CSS utility kit with zero config and a flat learning curve.

Repo: https://github.com/ahansson/hgrid-css

Installation

Installs the required node_modules, including hgrid-css.

npm install

Development

Starts the development server with Sass compilation for hgrid and serves your site from the public folder on localhost:3000 (if available).

npm run dev

Build

npm run build

Also check the (general) tips on reducing the output size of your CSS.

Template Setup

The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Recommended IDE Setup

• VSCode + Volar