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.
MIT License
Delete /.github/workflows/auto-sync.yml
file, it is used to sync this repo with organization one.
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.
You can globally replace @gwlab/
with your own package name, for example @my-company/
. So all packages naming will start with @my-company/
.
core
package for reuse across different apps.@iconify/vue
library.To set up the project locally, follow these steps:
git clone <repository_url> turbo-company-name
cd turbo-company-name
ni
nr prepare
To start the development server:
nr dev
To build the project:
nr build
To lint the project:
nr lint
To fix linting issues:
nr lint:fix
To check types:
nr check-types
To delete recursively all the node_modules:
nr clean
nr lint check-types
All this commands will run in parallel, so it will be faster. You can find configuration in turbo.json
file.
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
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 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
.
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.
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. βΊοΈ
This project is licensed under the MIT License.