🚀 Opinionated Nuxt, Tailwind & Storybook monorepo for Nuxt 3 frontend webapps
- 💚 Nuxt 3 - SSR, ESR, File-based routing, components auto importing, modules, etc.
- 🤓 Optimized for VSCode usage
- ⚡️ Vite - Instant HMR
- ✨ Vitest - A blazing fast unit test framework
- 🚝 Monorepo - workspace setup using pnpm
- 🌬️ Tailwind 3 - the utility-first CSS framework
- 🖌️ Storybook - build UI components and pages in isolation
- 🔥 The
<script setup>syntax - 🍍 State Management via Pinia, see ./stores/AuthStore.ts
- 🧹 Vue Macros 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 - JavaScript, but strongly typed and better
Contains all general logic that is tightly coupled with nuxt
All platform specific applications
Design System, contains abstract vue components & logic that couples applications with design elements
Build Modules and so forth
All general logic that isn't tightly coupled to vue or nuxt and could be used in other JS/Node contexts.
All Translations
- VueUse - collection of useful composition APIs.
- Pinia - intuitive, type safe, light and flexible Store for Vue.
- Nuxt Devtools - Unleash Nuxt Developer Experience.
This Template is designed to provide great DX with VS Code and Volar.
TBD
There are several ways to run the monorepo project:
pnpm devfrom monorepo root - run all apps together as well as run storybook. Each app accessible viahttp://localhost:{port}/. List of ports can be found inpackage.json.pnpm %app% devfrom monorepo root - run specific app (e.g.pnpm webapp dev). App accessible viahttp://localhost:3000/.- run app from specific app folder (e.g.
cd apps/webapp && pnpm dev).
By launching all applications or one is strictly recommended to run pnpm install or pnpm i to install all dependencies beforehand. It needs because of renovate plugin that constantly updates dependencies in all packages.