https://github.com/lautr/initium-nuxt

An opinionated starter for using Nuxt, Tailwind & Storybook.
https://github.com/lautr/initium-nuxt

Last synced: 5 days ago
JSON representation

An opinionated starter for using Nuxt, Tailwind & Storybook.

• Host: GitHub
• URL: https://github.com/lautr/initium-nuxt
• Owner: lautr
• Created: 2022-07-15T09:23:47.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-04-17T04:16:59.000Z (7 months ago)
• Last Synced: 2024-04-17T05:34:14.781Z (7 months ago)
• Language: TypeScript
• Homepage: https://initium-nuxt-webapp.vercel.app
• Size: 11.4 MB
• Stars: 29
• Watchers: 3
• Forks: 2
• Open Issues: 13
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
#  lautr/initium-nuxt 🔥


🚀 Opinionated Nuxt, Tailwind & Storybook monorepo template





> inspired by [antfu vitesse nuxt](https://github.com/antfu/vitesse-nuxt3)

## Features

- [💚 Nuxt 3](https://v3.nuxtjs.org) - SSR, ESR, File-based routing, components auto importing, modules, etc.

- 🤓 Optimized for VSCode usage

- [⚡️ Vite](https://vitejs.dev/) - Instant HMR

- [✨ Vitest](https://vitest.dev/guide/) - A blazing fast unit test framework

- [🚝 Monorepo](https://pnpm.io/workspaces) - workspace setup using [pnpm](https://pnpm.io/)

- [🌬️ Tailwind 3](https://tailwindcss.com/) - the utility-first CSS framework

- [🖌️ Storybook](https://storybook.js.org/) - build UI components and pages in isolation

- [🌓 Color Mode](https://github.com/nuxt-community/color-mode-module) - dark, light & custom mode integrated in Tailwind and Nuxt

- 🔥 The `` syntax

- [🍍 State Management via Pinia](https://pinia.esm.dev), see [./stores/AuthStore.ts](./stores/AuthStore.ts)

- [🧹 Vue Macros](https://vue-macros.sxzz.moe/) Explore and extend more macros and syntax sugar to Vue.

- 📥 APIs auto importing - for Composition API, VueUse, Components (localy & from design) and custom composables

- [🦾 TypeScript](https://www.typescriptlang.org/) - JavaScript, but strongly typed and better

## Plugins

### Nuxt Modules

- [VueUse](https://github.com/vueuse/vueuse) - collection of useful composition APIs.

- [ColorMode](https://github.com/nuxt-community/color-mode-module) - dark and Light mode with auto detection made easy with Nuxt.

- [Pinia](https://pinia.esm.dev/) - intuitive, type safe, light and flexible Store for Vue.

- [Nuxt Devools](https://devtools.nuxtjs.org/) - Unleash Nuxt Developer Experience.

## Commands

```

# install all dependencies of the monorepo

pnpm install

# start webapp & storybook

pnpm dev

# start dev webapp

pnpm webapp dev

# build webapp for prod

pnpm webapp build

# start webapp for prod

pnpm webapp start

# start dev storybook

pnpm design dev

```

## IDE

This Template is designed to provide great DX with [VS Code](https://code.visualstudio.com/) and [Volar](https://github.com/johnsoncodehk/volar).

## Usage

### GitHub Template

[Create a repo from this template on GitHub](https://github.com/lautr/initium-nuxt/generate).

### Clone to local

If you prefer to do it manually with the cleaner git history

```bash

npx degit lautr/initium-nuxt my-nuxt3-app

cd my-nuxt3-app

pnpm i # If you don't have pnpm installed, run: npm install -g pnpm

```