Extly's XT Vite Vue3 Tailwind CSS Starter

Features

• ⚡️ Vue 3, Vite 2

• 🗂 File based routing

• 🍍 State Management via Pinia

• 📑 Layout system

• 🎨 Tailwind CSS - A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

• 😃 Use icons from any icon sets, with no compromise

• 🌍 I18n ready

• 🔥 Use the new <script setup> syntax

• 🦾 TypeScript

Pre-packed

UI Frameworks

• TailwindCSS
• headlessui/vue plugin
• tailwindcss/aspect-ratio plugin
• tailwindcss/forms plugin
• tailwindcss/line-clamp plugin
• tailwindcss/typography plugin

Icons

• Iconify - use icons from any icon sets 🔍Icônes

Plugins

• Vue Router
  • vite-plugin-pages - file system based routing
  • vite-plugin-vue-layouts - layouts for pages
• Pinia - Intuitive, type safe, light and flexible Store for Vue using the composition api
• Vue I18n - Internationalization
  • vite-plugin-vue-i18n - Vite plugin for Vue I18n
• VueUse - collection of useful composition APIs
• @vueuse/head - manipulate document head reactively

Coding Style

• Use Composition API with <script setup> SFC syntax
• ESLint with Airbnb JavaScript Style Guide(), single quotes, semi.

Dev tools

• TypeScript

Standardized directory structure

  ├── public/
  └── src/
      ├── assets/                    // store static resources
      ├── common/                    // general library
      ├── components/                // general components
      ├── router/                    // routers for Vue Router
      ├── store/                     // state for Vuex
      ├── style/                     // general CSS file
      ├── utils/                     // utils function
      ├── views/                     // pages
      ├── App.vue
      ├── main.ts
      ├── shims-vue.d.ts
  ├── tests/                         // unit test
  ├── index.html
  ├── tsconfig.json                  // TypeScript config file
  ├── vite.config.ts                 // Vite config file
  └── package.json

References

• https://github.com/antfu/vitesse - Opinionated Vite Starter Template
• https://github.com/antfu/vitesse-lite - Lightweight version of Vitesse
• https://github.com/zynth17/vitailse - Opinionated Vite starter template with TailwindCSS
• https://github.com/alvarosaburido/vitesome - A simple opinionated Vue3 Starter Template with Vite.js
• https://github.com/web2033/vite-vue3-tailwind-starter - Vite + Vue 3 + Tailwind CSS (starter)
• https://github.com/Uninen/vite-ts-tailwind-starter - Opinionated Vite + Vue 3 + TypeScript + Tailwind CSS starter template w/ tests and CI.
• https://github.com/logustra/vivu - A highly scalable vue boilerplate using vite
• Set up Vue3 Enterprise-Level Development Environments with Vite: Step by Step Guide - https://github.com/BytefishMedium/vite-vue3-starter