Vue3 | Nuxt3 | Storybook v7 | Histoire | Mono-/Turborepo starter using pnpm

What's inside?

This turborepo uses pnpm as a packages manager. It includes the following packages/apps:

Apps and Packages

nuxt: another Nuxt3 app - https://localhost:3000/
storybook: another Storybook - https://localhost:6006/
histoire: Histoire - https://localhost:6007/
ui: a stub Vue component library shared by nuxt, vite and storybook applications
config: eslint configurations (includes nuxt/eslint-config standardjs flavor)

Each package/app is TypeScript ready.

uses:

pnpm
turborepo
vue3
nuxt3
vite
storybook v8
histoire
unoCSS (presetWind - tailwind/windi)
vitest (monorepo setup)
playwright for e2e tests

GitHub Template

Create a repo from this template on GitHub.

Clone to local

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

npx degit samydoesit/vue-turbo-starter my-vue-turbo-starter-monorepo
cd my-vue-turbo-starter-monorepo
pnpm i # If you don't have pnpm installed, run: `corepack enable` (or use `npm i -g corepack` for Node.js < 20)

Checklist

When you use this template, try follow the checklist to update your info properly

Change the author name in LICENSE
Change App.vue
Change/Edit vite.config.ts | nuxt.config.ts
Change the favicon in public
Remove the .github folder which contains the funding info
Clean up the READMEs and remove demo content

💻 Development

Enable Corepack using corepack enable (use npm i -g corepack for Node.js < 20)
Install dependencies using pnpm install
Run development servers pnpm dev

🚀 Build

Build for production pnpm build

Docker Container

To build docker images it is necessary to pass monorepo root as context.

cd <repo-root>
# Storybook Dockerfile
docker build -f apps/storybook/Dockerfile .
docker run -d -p 6006:6006 <image-id>
# Histoire Dockerfile
docker build -f apps/histoire/Dockerfile .
docker run -d -p 6006:6006 <image-id>
# Nuxt Dockerfile
docker build -f apps/nuxt/Dockerfile .
docker run -d -p 3000:3000 <image-id>

cqazsxer/vue-turbo-starter