https://github.com/shamscorner/vue-3-stackter
A Vue3 starter project setup with Vite, Vue-meta, Router, Pinia, Eslint, Prettier, Tailwind CSS, and some custom preferences. Also, there is a TypeScript branch of this same setup.
https://github.com/shamscorner/vue-3-stackter
pinia tailwindcss typescript vite vue-router vue-router4 vue3
Last synced: 6 months ago
JSON representation
A Vue3 starter project setup with Vite, Vue-meta, Router, Pinia, Eslint, Prettier, Tailwind CSS, and some custom preferences. Also, there is a TypeScript branch of this same setup.
- Host: GitHub
- URL: https://github.com/shamscorner/vue-3-stackter
- Owner: shamscorner
- License: mit
- Created: 2021-07-12T03:23:06.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-12-04T17:57:18.000Z (almost 3 years ago)
- Last Synced: 2025-03-28T04:39:18.665Z (7 months ago)
- Topics: pinia, tailwindcss, typescript, vite, vue-router, vue-router4, vue3
- Language: Vue
- Homepage:
- Size: 164 KB
- Stars: 122
- Watchers: 7
- Forks: 30
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: License
Awesome Lists containing this project
README
# vue-3-stackter
A Vue3 starter project setup with these following components,
- [Vite](https://vitejs.dev/)
- vue-meta-3.0.0-alpha.8
- Router
- [Pinia](https://pinia.vuejs.org/) (Vue 3 default)
- Eslint
- Prettier
- [Tailwind CSS](https://tailwindcss.com/)
- File based routing with [vite-plugin-pages](https://github.com/hannoeru/vite-plugin-pages). (Like [Nuxt file system routing](https://nuxtjs.org/docs/2.x/features/file-system-routing))
- Layout system with [vite-plugin-vue-layouts](https://github.com/JohnCampionJr/vite-plugin-vue-layouts). (Like [Nuxt layouts](https://nuxtjs.org/docs/2.x/directory-structure/layouts))
- Components auto importing with [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components)
- `~/` alias for `/src`. So we don't have to write something like `../../../SomeModule` to import modules.
- and some custom setups.
[Check out Typescript version here](https://github.com/shamscorner/vitesse-stackter-clean-architect)
[Check out Nuxt 3 starter template](https://github.com/shamscorner/nuxt-3-stackter)
### Run this project:
```
yarn
yarn dev
```
### Change site name
In `App.vue` change the following,
```Javascript
const siteName = 'Vite App' // add your site name here
```
### Layouts
You can add layouts in your project if you want. You will find `default.vue` and `404.vue` layout examples in this project. For more details, check out [vite-plugin-vue-layouts](https://github.com/JohnCampionJr/vite-plugin-vue-layouts). (Like [Nuxt layouts](https://nuxtjs.org/docs/2.x/directory-structure/layouts) system).
### Pages
You can add pages to your project. You will find some example pages in the `pages` directory (`index.vue`, `about/[name].vue`, and `[...all].vue`). For more details, check out [vite-plugin-pages](https://github.com/hannoeru/vite-plugin-pages). (Like [Nuxt file system routing](https://nuxtjs.org/docs/2.x/features/file-system-routing)).
### Meta info
You can add meta information in your pages. Here is an example,
```Javascript
import { useMeta } from 'vue-meta'
useMeta({
title: 'Homepage',
})
...
```
## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar). Make sure to:
- Disable [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur) for the current workspace
- Disable built in `TypeScript and JavaScript Language Features` for the current workspace to enable take-over mode.