/vue-turbo-starter

Starter monorepo using pnpm, Turborepo, Vite, Vue3, Nuxt3 and Storybook for a nice development experience

Primary LanguageTypeScriptMIT LicenseMIT

Demo - Nuxt: Netlify Status

Demo - Storybook: Netlify Status

Vue3 | Nuxt3 | Storybook v7 | 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

Each package/app is TypeScript ready.

uses:

  • pnpm
  • turborepo
  • vue3
  • nuxt3
  • vite
  • storybook v7
  • unoCSS (presetWind - tailwind/windi)
  • vitest

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 < 16.10)

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 < 16.10)
  • 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>
# Nuxt Dockerfile
docker build -f apps/nuxt/Dockerfile .
docker run -d -p 3000:3000 <image-id>