Skip to content
/ turbo-start Public template

Turbo Template is a monorepo project structured using Turborepo and pnpm workspaces. It provides a scalable and modular architecture for building applications with Vue 3 and Nuxt 3, leveraging various libraries and utilities to enhance development efficiency and maintainability.

License

Notifications You must be signed in to change notification settings

hrynevychroman/turbo-start

Repository files navigation

Turbo Template

Important ‼️

Delete /.github/workflows/auto-sync.yml file, it is used to sync this repo with organization one.

Description 📖

Turbo Template is a monorepo project structured using Turborepo and pnpm workspaces. It provides a scalable and modular architecture for building applications with Vue 3 and Nuxt 3, leveraging various libraries and utilities to enhance development efficiency and maintainability.

Global Settings 🌐

You can globally replace @gwlab/ with your own package name, for example @my-company/. So all packages naming will start with @my-company/.

Features 🚀

  • Monorepo Structure: Uses Turborepo and pnpm workspaces to manage multiple packages and applications.
  • Vue 3: The main framework used for building applications.
  • Nuxt 3: For applications that require server-side rendering (SSR) and other advanced features.
  • Shared Utilities: Common utilities, components, and functions are stored in the core package for reuse across different apps.
  • Custom ESLint Config: Shared ESLint configuration based on antfu's config.
  • Custom Icons: Defined custom icons based on the @iconify/vue library.
  • PostCSS and TailwindCSS: Global styles and configurations using PostCSS and TailwindCSS.
  • TypeScript: Ensures type safety across the project.
  • Commitlint and Git Hooks: Enforces commit message standards and runs type-check and lint scripts before every commit.

Recommended Setup 💻

  • ni - Use the right package manager

Installation

To set up the project locally, follow these steps:

  1. Clone the repository:
git clone <repository_url> turbo-company-name
cd turbo-company-name
  1. Install dependencies :
ni
  1. Set up Git hooks :
nr prepare

Usage 📚

Development 👷

To start the development server:

nr dev

Building 🏗️

To build the project:

nr build

Linting 🔎

To lint the project:

nr lint

To fix linting issues:

nr lint:fix

To check types:

nr check-types

Cleaning 🧹

To delete recursively all the node_modules:

nr clean

Based on turborepo we can chain commands for lint and check-types

nr lint check-types

All this commands will run in parallel, so it will be faster. You can find configuration in turbo.json file.

Directory Structure 📁

turbo-template/
├── apps/              # Applications
│   ├── vue-start/     # Vue 3 startup project with enhanced DX
│   └── nuxt-start/    # Nuxt 3 startup project for SSR and advanced features
├── packages/          # Shared packages
│   ├── core/          # Common utilities, components, and functions
│   ├── eslint-config/ # Shared ESLint configuration
│   ├── icons/         # Custom icons
│   ├── postcss-config # PostCSS configuration
│   ├── tailwind/      # TailwindCSS configuration
│   ├── types/         # TypeScript interfaces
│   └── ui/            # shadcn-vue library based on radix-vue
├── package.json       # Root package.json with project scripts and dependencies
└── turbo.json         # Turborepo configuration

Applications 📱

Vue Start

Added vue-start template, maybe in future we will need some Vue application. This project includes:

  • Vue Router : Automatically imports Vue Router and converts route names to kebab-case.

  • Vue : Integrates the Vue 3 framework.

  • Vue DevTools : Enables Vue DevTools for better debugging.

  • Auto Imports : Automatically imports commonly used modules like Vue Router, VueUse, Vue I18n, and Pinia.

  • Components Auto Import : Automatically imports components from specified directories, including custom components from @gwlab/ui and radix-vue.

  • Vue I18n Plugin : Integrates Vue I18n for internationalization support.

  • Layouts : Supports layouts with vite-plugin-vue-layouts.

  • TypeScript Checker : Integrates TypeScript checker to ensure type safety.

  • Alias Configuration : Sets up path aliases for cleaner imports.

  • Server Configuration : Sets the development server port to 5177.

Nuxt Start

nuxt-start is a Nuxt based application. This project includes:

  • Compatibility Date : Set for 2024-04-03.

  • DevTools : Enabled for development.

  • Modules : Includes @nuxt/eslint and @nuxtjs/tailwindcss.

  • ESLint Configuration : Shared ESLint configuration for all applications.

  • Tailwind CSS : Global styles and configurations using PostCSS and TailwindCSS.

  • UI Components Auto Import : Automatically imports components from specified directories, including custom components from @gwlab/ui.

Shared Packages 📦

All these applications infer packages from packages/** where the following are defined:

  • Core : Here we will have some shared functions, utils, composables, and components that are used inside different applications. 🔧

  • ESLint config : As I mentioned previously, we will use only ESLint with stylistic rules, so these rules are used inside all applications too. ✅

  • Icons : Based on @iconify/vue library, we also have the ability to define custom components. 🎨

  • PostCSS config : Used for TailwindCSS and also has some predefined adaptive-calc functions for better responsive design. 🎩

  • Tailwind : Here we define the TailwindCSS config that will be used inside all applications. 🙌

  • Types : Here we define TypeScript interfaces for all API schemas and use them inside every application.

  • UI : Here we create and assemble all UI components, custom ones based on radix-vue library.

Chore 🌳

  • Commitlint : Added commitlint, so all developers need to write all commits based on standard conventional commits.

  • Simple Git Hooks : Added simple-git-hooks, before every commit it will run type-check and lint scripts inside every package and application, ensuring our codebase is consistent and error-free. ☺️

License 📄

This project is licensed under the MIT License.

About

Turbo Template is a monorepo project structured using Turborepo and pnpm workspaces. It provides a scalable and modular architecture for building applications with Vue 3 and Nuxt 3, leveraging various libraries and utilities to enhance development efficiency and maintainability.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published