vue-3-stackter - GitLite

KO | EN

gitlite — search

#react #ai #llm #go #rust #docker #macos #nodejs #cli #kubernetes #security #ios #openai #open-source

vue-3-stackter

(★ 121)

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.

File Explorer

Download Latest Version (.zip)

- favicon.ico
- - logo.png
- - VButton.vue
- - 404.vue
  - default.vue
- - [...all].vue
  - index.vue
- - useUsersStore.js
- App.vue
- index.css
- main.js
.eslintrc.js
.gitignore
.prettierrc.js
index.html
License
package.json
postcss.config.js
README.md
tailwind.config.js
vite.config.js
yarn.lock

# Installation Guide

1. Get the code

git clone https://github.com/shamscorner/vue-3-stackter

Downloads the entire project code from GitHub to your computer.

cd vue-3-stackter

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

yarn

Downloads and installs the libraries listed in package.json.

yarn dev

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# vue-3-stackter

![Cover Image](https://raw.githubusercontent.com/shamscorner/images/main/vite-vue-3-tailwind.png)

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
<script setup>
import { useMeta } from 'vue-meta'

useMeta({
    title: 'Homepage',
})
...

</script>
```

## 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.