vite vue ultimate starter

Vite based Vue3 (Typescript) template that uses, vue-router, PWA, daisyUI, tailwindcss, Playwright, vitest, vue-jsx, rollup-visual-visualizer, prettier, sass, vite inspect, vue-test-utils, test coverage, happy-dom

kaandesu
22
6
Vue

vite-vue-ultimate-starter

vite-vue-ultimate-starter-Logo

Vite
Vue.js
TypeScript
TailwindCSS
SASS
ESLint
RollupJS
GitHub Actions

Vite Vue3 Template is a starter template for building Vue3 applications using Vite as the build tool.
It comes pre-configured with
several essential dependencies that will help you get started with your Vue3 project right away.

Live Demo

Out of the box

Vue3

  • PWA Plugin: A Vite plugin that helps you build progressive web applications (PWA) by generating a service worker and a manifest file for your application.

  • Vue Router: A router library that helps you handle client-side navigation in your application.

  • Typescript: Adds static type checking to your javascript code.

Testing

  • Playwright: A testing library for running end-to-end tests in your application.

  • Vitest: A unit testing library, can also be used to test components with vue test utils.

Styling

  • Tailwind CSS: A utility-first CSS framework that helps you build custom user interfaces.

  • DaisyUI: A minimalistic component library for tailwind CSS. It offers a simple and clean design for your application’s UI.

  • Sass: A CSS preprocessor that allows you to use variables and functions in your CSS.

Code Quality

  • ESLint: A linting tool for JavaScript and TypeScript code.

  • Prettier: A code formatter that ensures consistency in your code style.

Custom Plugins

Vue DaisyUI Theme Manager

This plugin allows you to change the theme of your application at runtime.

It also allows you to watch for system theme changes and update the theme accordingly.

Initiate the plugin with the default theme and the dark theme.
Theme options are from Daisiy UI themes as well as some custom added themes.
Check all the built-in DaisyUI Themes.

Create your own custom daisy ui theme here and add it to the
tailwind.config.js file!

You can find the detailed API documentation here.

Recommended IDE Setup

VSCode + Volar (and disable Vetur & built-in typescript) + TypeScript Vue Plugin (Volar).

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

# Type-check and build the app
npm run build
# Built the app
npm run build-only
# Build the app and run the unit & e2e tests (headless)
npm run build-test

Run Unit Tests with Vitest

# Runs the unit tests
npm run test:unit
# Runs the tests in watch mode
npm run test:unit:watch
# Runs the tests in watch mode with coverage
npm run coverage

Run End-to-End Tests with Playwright

# Install browsers for the first run
npx playwright install
# When testing on CI, must build the project first
npm run build
# Runs all the end-to-end tests
npm run test:e2e
# Runs all the end-to-end tests headlessly
npm run test:e2e:headless
# Runs the tests only on Desktop
npm run test:e2e:desktop
# Runs the tests only on Mobile
npm run test:e2e:mobile

Inspect after build

# Inspect the vite build on localhost
npm run vite:inspect
# Inspect the rollup bundle on localhost
npm run rollup:inspect

Lint with ESLint

npm run lint

Help

npm run help

Contributing

Contributions to the project is highly appreciated.
If you have any suggestions/questions/requests please consider
opening an issue. If you want to contribute to the project, fixing an open issue is greatly recommended and appreciated. To see the all contribution rules please check the contribution rules.

License

This project is licensed under MIT License if you want to see more, please check LICENSE for more information.

Credits

This project is created and actively maintained by kaandesu