Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/logue/vite-vuetify-ts-starter

@vitejs + @vuejs 3+@Vuetifyjs 3
https://github.com/logue/vite-vuetify-ts-starter

typescript vite vue vue-router vue-template vue3 vue3-typescript vuejs vuetify vuetify3 vuetifyjs vuex

Last synced: 6 days ago
JSON representation

@vitejs + @vuejs 3+@Vuetifyjs 3

Host: GitHub
URL: https://github.com/logue/vite-vuetify-ts-starter
Owner: logue
License: mit
Created: 2021-11-21T15:41:51.000Z (almost 3 years ago)
Default Branch: master
Last Pushed: 2024-11-01T11:00:23.000Z (7 days ago)
Last Synced: 2024-11-01T12:16:46.721Z (7 days ago)
Topics: typescript, vite, vue, vue-router, vue-template, vue3, vue3-typescript, vuejs, vuetify, vuetify3, vuetifyjs, vuex
Language: TypeScript
Homepage:
Size: 13.2 MB
Stars: 170
Watchers: 4
Forks: 37
Open Issues: 11
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

awesome - Vite Vuetify TS Starter - Starter template using Vite, vue-router and Pinia. ![Typescript](https://img.shields.io/badge/Typescript-3178C6.svg?logo=typescript&logoColor=white) (🙌 Projects using Vuetify <a name="projects"></a> / Vuetify 3)

README

        # Vue 3 + Typescript + Vite + Vuetify 3.3







This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 `` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

Includes [vue-router](https://router.vuejs.org/) and [Pinia](https://pinia.vuejs.org/) [^1].

In addition, [ESLint](https://eslint.org/), [Stylelint](https://stylelint.io/), and [Prettier](https://prettier.io/) are also included and are set to be executed automatically at runtime and commit. (Since these settings are set strictly, please relax yourself.)

Also, when the development server is executed, it is checked in real time by [vite-plugin-checker](https://github.com/fi3ework/vite-plugin-checker).

First define `VITE_APP_TITLE` in your `.env` file.

Versions 1.11 and later use pnpm as the package manager.

## Recommended IDE Setup

[VSCode](https://code.visualstudio.com/) + [Vue - Official](https://marketplace.visualstudio.com/items?itemName=vue.volar) (and disable Vetur).

## Commands

It is designed to be close to [create-vue](https://github.com/vuejs/create-vue-templates/tree/main/typescript-router-pinia-vitest) commands.

| Command       | Description                                            |

| ------------- | ------------------------------------------------------ |

| dev           | Start devserver.                                       |

| clean         | Clear devserver cache.                                 |

| type-check    | Check vue markup.                                      |

| lint          | Run ESLint and prettier.                               |

| lint:style    | Run Stylelint.                                         |

| test          | Run vitest                                             |

| test:unit     | Run Unit test                                          |

| coverage      | Output Coverage Report.                                |

| build         | Build for production.                                  |

| build:analyze | Execute Bundle Analyzer                                |

| build:clean   | Clear production build files.                          |

| build-only    | Build for production without checking. For Deploy use. |

| preview       | Run the program generated by the production build.     |

## Type Support For `.vue` Imports in TS

Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's `.vue` type support plugin by running `Volar: Switch TS Plugin on/off` from VSCode command palette.

[^1]: [Pinia](https://pinia.vuejs.org/) is the recommended state management library to replace [Vuex](https://vuex.vuejs.org/) in the next Vue. see <https://github.com/vuejs/rfcs/discussions/270#discussioncomment-2066856>

## Troubleshooting

When adding or deleting files, an error may occur and even if the error is corrected, it may not be reflected in devserver. In that case, stop devserver and delete all the files in the `node_modules/.vite` directory. You can also run it with the `clean` command.

It will not work properly if you are using Node v21.0.0. Please upgrade to 21.1.0 or later.

### Npm Scripts outputs `MODULE_NOT_FOUND`.

Due to [yarn issues](https://github.com/yarnpkg/berry/issues/4448), it may not work properly if the path contains non-ASCII characters (such as 日本語 or 한국어, 中文 etc.).

## Checklist

When you use this template, try follow the checklist to update your info properly

- [ ] Change the author name in `LICENSE`

- [ ] Change the favicon in `public`

- [ ] Remove the `.github` folder which contains the funding info

- [ ] Clean up the READMEs and remove routes

## See Also

- for Vue3

  - [vite-vue3-ts-starter](https://github.com/logue/vite-vue3-ts-starter)

  - [vite-elemental-plus-ts-starter](https://github.com/logue/vite-elemental-plus-ts-starter)

  - vite-bootstrap-vue-ts-starter - Comming soon.

- for Vue2

  - [vite-vue2-ts-starter](https://github.com/logue/vite-vue2-ts-starter) - Vite Vue2 starter.

  - [vite-vue2-vuetify-ts-starter](https://github.com/logue/vite-vue2-vuetify-ts-starter) - UI library using Vuetify2

  - [laravel9-vite-vue2-starter](https://github.com/logue/laravel9-vite-vue2-starter) - Vue2 for Laravel9 + Breeze.

  - [vite-vue2-ts-ssr-starter](https://github.com/logue/vite-vue2-ts-ssr-starter) - SSR (Server Side Rendering) Version.