Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/matijaoe/vue-starter
👽 Vue & UnoCSS starter template
https://github.com/matijaoe/vue-starter
iconify pinia pnpm postcss unocss unplugin-auto-import unplugin-vue-components unplugin-vue-macros unplugin-vue-router vite vue vueuse
Last synced: about 1 month ago
JSON representation
👽 Vue & UnoCSS starter template
- Host: GitHub
- URL: https://github.com/matijaoe/vue-starter
- Owner: matijaoe
- License: mit
- Created: 2023-01-11T21:28:22.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-11T17:05:01.000Z (8 months ago)
- Last Synced: 2024-04-11T21:59:08.647Z (8 months ago)
- Topics: iconify, pinia, pnpm, postcss, unocss, unplugin-auto-import, unplugin-vue-components, unplugin-vue-macros, unplugin-vue-router, vite, vue, vueuse
- Language: Vue
- Homepage: https://vue-uno-starter.vercel.app
- Size: 989 KB
- Stars: 8
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Vue ✕ UnoCSS starter template
> Fully featured Vue 3 starter template
|🌞|🌚|
|---|---|
|
|
|
## Features
- ⚡️ [Vue 3](https://github.com/vuejs/core), [Vite](https://github.com/vitejs/vite), [pnpm](https://pnpm.io/)
- 🗂 File based routing, fully typed
- 📦 Auto imported components
- 🫧 Auto imported APIs
- 🎨 [UnoCSS](https://github.com/antfu/unocss) - The instant on-demand atomic CSS engine
- 👽 Pure CSS icons powered by [Iconify](https://docs.iconify.design/icon-components/vue/) - Over 100,000 icons across 100+ icon packs
- 🍍 [Pinia](https://pinia.vuejs.org/) - The Vue Store that you will enjoy using
- 🛠️ [VueUse](https://vueuse.org/) - Collection of essential Vue Composition Utilities
- 💪🏻 TypeScript
- 🧹 ESLint / [matijaoe config](https://github.com/matijaoe/eslint-config)
- ☁️ Deploy with zero config
## Plugins
### UI Frameworks
- [UnoCSS](https://github.com/antfu/unocss) - The instant on-demand atomic CSS engine
- [`presetUno`](https://github.com/unocss/unocss/tree/main/packages/preset-uno) - Tailwind / Windi CSS compact preset
- [`presetAttributify`](https://github.com/unocss/unocss/tree/main/packages/preset-attributify) - Provides Attributify Mode to other presets and rules
- [`presetTypography`](https://github.com/unocss/unocss/tree/main/packages/preset-typography) - The typography preset
- [`presetIcons`](https://github.com/unocss/unocss/tree/main/packages/preset-icons) - Use any icons with Pure CSS for UnoCSS
- [`presetWebFonts`](https://github.com/unocss/unocss/tree/main/packages/preset-web-fonts) - Web fonts at ease
- [`transformerDirectives`](https://github.com/unocss/unocss/tree/main/packages/transformer-directives) - Transformer for `@apply`, `@screen` and `theme()` directives
- [`transformerVariantGroup`](https://github.com/unocss/unocss/tree/main/packages/transformer-variant-group) - Enables the [variant group feature of Windi CSS](https://windicss.org/features/variant-groups.html) for UnoCSS
- [Post CSS](https://postcss.org/)
- [`postcss-nesting`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting)
### Vite Plugins
- [`unplugin-vue-router`](https://github.com/posva/unplugin-vue-router) - Automatic file based routing in with TypeScript support
- [`unplugin-auto-import`](https://github.com/antfu/unplugin-auto-import) - Directly use Vue Composition API and other APIs without importing
- [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components) - Components auto import
## Use the template
### GitHub Template
[Create a repo from this template on GitHub](https://github.com/matijaoe/vue-starter/generate)
### Local
Clone the template locally, with no git history (powered by [`unjs/giget`](https://github.com/unjs/giget))
```bash
npx giget gh:matijaoe/vue-starter
```
```bash
# Install dependencies (if no pnpm installed, run: npm install -g pnpm)
pnpm i
# Start dev server
pnpm dev
# Build for production
pnpm build
# Deploy anywhere
pnpm deploy:vercel # vercel
pnpm deploy:ntl # netlify
pnpm deploy:surge # surge.sh
```
## 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 [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
1. Disable the built-in TypeScript Extension
1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
## Related
- 🧚🏻 [`nuxt-starter`](https://github.com/matijaoe/nuxt-starter)
- 🔮 [`vue-anu-starter`](https://github.com/matijaoe/vue-anu-starter)