Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mukhriddin-dev/vue-typescript-starter-application
VueJS+TypeScript starter application
https://github.com/mukhriddin-dev/vue-typescript-starter-application
e2e pinia playwright scss tailwindcss tanstack-query typescript vite vue
Last synced: 3 days ago
JSON representation
VueJS+TypeScript starter application
- Host: GitHub
- URL: https://github.com/mukhriddin-dev/vue-typescript-starter-application
- Owner: mukhriddin-dev
- License: mit
- Created: 2024-04-14T07:57:52.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-07-12T11:58:45.000Z (4 months ago)
- Last Synced: 2024-07-12T13:48:16.696Z (4 months ago)
- Topics: e2e, pinia, playwright, scss, tailwindcss, tanstack-query, typescript, vite, vue
- Language: TypeScript
- Homepage:
- Size: 1.78 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Vue+TS starter Application
This template should help get you started developing with Vue 3 in Vite.
## Folder structure
```
└── 📁src
└── App.vue
└── 📁assets
└── base.css
└── 📁fonts
└── 📁images
└── index.ts
└── logo.svg
└── main.css
└── 📁components
└── 📁__tests__
└── HelloWorld.spec.ts
└── 📁containers
└── index.ts
└── 📁icons
└── IconCommunity.vue
└── IconDocumentation.vue
└── IconEcosystem.vue
└── IconSupport.vue
└── IconTooling.vue
└── index.ts
└── index.ts
└── 📁ui
└── index.ts
└── 📁composables
└── index.ts
└── 📁constants
└── index.ts
└── 📁helpers
└── index.ts
└── 📁layouts
└── 📁auth
└── index.vue
└── style.scss
└── 📁dashboard
└── index.vue
└── style.scss
└── index.ts
└── main.ts
└── 📁middleware
└── index.ts
└── 📁plugins
└── index.ts
└── 📁router
└── index.ts
└── 📁services
└── config.ts
└── index.ts
└── 📁post
└── index.ts
└── readme.md
└── 📁stores
└── counter.ts
└── index.ts
└── 📁templates
└── index.ts
└── 📁types
└── 📁enums
└── index.ts
└── index.ts
└── 📁interfaces
└── index.ts
└── 📁models
└── index.ts
└── 📁types
└── index.ts
└── 📁utils
└── 📁dev-tool
└── index.vue
└── index.ts
└── 📁use-mutation
└── index.ts
└── 📁views
└── 📁home
└── index.vue
└── index.ts
```
## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
## Type Support for `.vue` Imports in TS
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
## 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
npm run build
```
### Run Unit Tests with [Vitest](https://vitest.dev/)
```sh
npm run test:unit
```
### 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 the end-to-end tests
npm run test:e2e
# Runs the tests only on Chromium
npm run test:e2e -- --project=chromium
# Runs the tests of a specific file
npm run test:e2e -- tests/example.spec.ts
# Runs the tests in debug mode
npm run test:e2e -- --debug
```
### Lint with [ESLint](https://eslint.org/)
```sh
npm run lint
```