Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kaandesu/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
https://github.com/kaandesu/vite-vue-ultimate-starter
playwright pwa sass tailwindcss typescript vite vitest vue-jsx vue-template-project vue3
Last synced: 3 months ago
JSON representation
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
- Host: GitHub
- URL: https://github.com/kaandesu/vite-vue-ultimate-starter
- Owner: kaandesu
- License: mit
- Created: 2023-04-22T15:52:29.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2023-04-25T18:48:17.000Z (almost 2 years ago)
- Last Synced: 2024-05-18T07:45:30.030Z (9 months ago)
- Topics: playwright, pwa, sass, tailwindcss, typescript, vite, vitest, vue-jsx, vue-template-project, vue3
- Language: Vue
- Homepage:
- Size: 509 KB
- Stars: 17
- Watchers: 2
- Forks: 4
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
# vite-vue-ultimate-starter
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](https://kaandesu.github.io/vite-vue-ultimate-starter/)
## Out of the box
### Vue3
- #### [PWA Plugin](https://www.npmjs.com/package/vite-plugin-pwa): 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](https://github.com/vuejs/router): A router library that helps you handle client-side navigation in your application.
- #### [Typescript](https://github.com/vuejs/language-tools): Adds static type checking to your javascript code.
### Testing
- #### [Playwright](https://playwright.dev/): A testing library for running end-to-end tests in your application.
- #### [Vitest](https://vitest.dev/): A unit testing library, can also be used to test components with `vue test utils`.
### Styling
- #### [Tailwind CSS](https://tailwindui.com/): A utility-first CSS framework that helps you build custom user interfaces.
- #### [DaisyUI](https://daisyui.com/): A minimalistic component library for tailwind CSS. It offers a simple and clean design for your application's UI.
- #### [Sass](https://sass-lang.com/): A CSS preprocessor that allows you to use variables and functions in your CSS.
### Code Quality
- #### [ESLint](https://eslint.org/): A linting tool for JavaScript and TypeScript code.
- #### [Prettier](https://prettier.io/): 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](https://daisyui.com/docs/themes/).
Create your own custom daisy ui theme [here](https://daisyui.com/theme-generator/) and add it to the
`tailwind.config.js` file!
You can find the detailed [API documentation here](https://github.com/kaandesu/vite-vue-ultimate-starter/tree/master/src/plugins/themeManager/README.md).
## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur & built-in typescript) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
## Customize configuration
See [Vite Configuration Reference](https://vitejs.dev/config/).
## Project Setup
```sh
npm install
```
### Compile and Hot-Reload for Development
```sh
npm run dev
```
### Type-Check, Compile and Minify for Production
```sh
# 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](https://vitest.dev/)
```sh
# 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](https://playwright.dev)
```sh
# 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
```sh
# Inspect the vite build on localhost
npm run vite:inspect
# Inspect the rollup bundle on localhost
npm run rollup:inspect
```
### Lint with [ESLint](https://eslint.org/)
```sh
npm run lint
```
### Help
```sh
npm run help
```
## Contributing
Contributions to the project is highly appreciated.
If you have any suggestions/questions/requests please consider
[opening an issue](https://github.com/kaandesu/vite-vue-ultimate-starter/issues/new). 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](CONTRIBUTING.md).
## License
This project is licensed under `MIT License` if you want to see more, please check [LICENSE](LICENSE) for more information.
## Credits
This project is created and actively maintained by [kaandesu](https://github.com/kaandesu)