Chia - Nuxt 3 Layer

⚠️ This repository is now archived, in favour of an upcoming Nuxt module called Deku.

Nuxt 3, Storybook (Vite), Vitest, Pico CSS starter layer.

Check out the Nuxt 3 documentation to learn more about Nuxt Layers.

Features

• 🎨 Pico.css minimal CSS framework
• 📚 Storybook
• 🏗️ 4 Starter components (c-grid, c-section, c-markup, c-button), with stories and unit tests
• 💚 Vite-friendly
• 😎 BYO everything else!
• ✨ pnpm by default

Usage @TODO: This part of the docs incomplete.

Install the package and its dependecy

pnpm add @picocss/pico

Extend the package in your Nuxt config with the extends keyword.

// nuxt.config.ts
export default defineNuxtConfig({
  extends: 'github:miclgael/chia'
})

You now have access to tested components and a very simple pre-configured Nuxt theme.

Screenshots

Contributing

Make sure to install the dependencies:

pnpm install --shamefully-hoist

Development Server

Start the development server on http://localhost:3000

pnpm run dev

Production

Early days for Nuxt 3, so please make sure the application builds before pushing:

pnpm run build

Locally preview production build:

pnpm run preview

Checkout the deployment documentation for more information.

Storybook

To work on components in isolation using Storybook:

pnpm run storybook

Testing

Run tests with Vitest and Vue test utils

pnpm run test

That's it!