Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/morellexf13/vite-boilerplate
⚡️ A Vue 3 Starter Boilerplate with Vue Router 4, Pinia 2, Vite 5, Sass, Axios, Jest 29 and More
https://github.com/morellexf13/vite-boilerplate
boilerplate-template in-portfolio starter-template vite5 vue3 vuejs without-vue-cli
Last synced: about 22 hours ago
JSON representation
⚡️ A Vue 3 Starter Boilerplate with Vue Router 4, Pinia 2, Vite 5, Sass, Axios, Jest 29 and More
- Host: GitHub
- URL: https://github.com/morellexf13/vite-boilerplate
- Owner: morellexf13
- License: mit
- Created: 2022-05-15T02:17:47.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-06T11:32:18.000Z (3 months ago)
- Last Synced: 2025-01-08T23:35:42.019Z (15 days ago)
- Topics: boilerplate-template, in-portfolio, starter-template, vite5, vue3, vuejs, without-vue-cli
- Language: JavaScript
- Homepage:
- Size: 3.35 MB
- Stars: 15
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Vite Boilerplate
A Vue 3 Starter Boilerplate with Vue Router 4, Pinia 2, Vite 5, Sass, Axios, Jest 29 and More.
Create a cutting-edge website using the latest technologies available. Vite Boilerplate, an all-inclusive solution, will provide you with essential features such as framework integration, state management, routing, API communication, unit testing, and much more.
## Learn More
- [What is Vue?](https://vuejs.org/guide/introduction.html#what-is-vue)
- [Single-File Components](https://vuejs.org/guide/introduction.html#single-file-components)
- [Reactivity Fundamentals](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#reactivity-fundamentals)
- [Computed Properties](https://vuejs.org/guide/essentials/computed.html#computed-properties)
- [Props Declaration](https://vuejs.org/guide/components/props.html#props-declaration)
- [Slots](https://vuejs.org/guide/components/slots.html#slots)
- [Performance Overview](https://vuejs.org/guide/best-practices/performance.html#overview)
- [Pinia - What is a Store?](https://pinia.vuejs.org/getting-started.html#what-is-a-store)
- [Pinia - State](https://pinia.vuejs.org/core-concepts/state.html#state)
- [Pinia - Getters](https://pinia.vuejs.org/core-concepts/getters.html#getters)
- [Pinia - Actions](https://pinia.vuejs.org/core-concepts/actions.html)
- [Vuex Router - Getting Started](https://router.vuejs.org/guide/#getting-started)
- [Vuex Router - Navigation Guard](https://router.vuejs.org/guide/advanced/navigation-guards.html#navigation-guards)
- [Jest Unit Tests (Spanish only)](https://medium.com/@agustinmorelle01/las-7-claves-del-%C3%A9xito-tests-unitarios-de-frontend-vue-js-y-jest-28988ae561ac)
## Features
- Basic login/logout state definition using Pinia.
- Basic Store configured using Pinia and Persist Plugin (stores/index.js).
- Basic "Home" and "Login" pages defined (src/pages/).
- Basic "Title" and "Button" components defined using slots and custom properties.
- Basic router configuration defined (/router.js).
- Basic GET request using Axios (Spotify Tracker API). This request needs an [Authorization Bearer Token ](https://developer.spotify.com/console/get-users-currently-playing-track/). For security purposes you can just set this token on environment files.
- Environment file example.
- Jest configuration defined.
- Unit test suite per each defined page, API test included.
- Path alias defined (vite.config.js).
- GitHub actions workflow example defined.
## Folder Structure
```
vite-boilerplate
├─ .gitignore
├─ LICENSE
├─ README.md
├─ babel.config.json
├─ index.html
├─ jest.config.js // Unit tests configuration
├─ jsconfig.json
├─ package-lock.json
├─ package.json
├─ public
│ └─ favicon.ico
├─ router.js // Handle page routes
├─ src
│ ├─ App.vue
│ ├─ assets
│ │ ├─ css
│ │ │ └─ index.css // Main stylesheet file
│ │ ├─ logo.png
│ │ ├─ screenshots
│ │ │ └─ login.png
│ │ └─ scripts
│ │ ├─ api.js // Handle api calls
│ │ └─ session.js // Handle user session
│ ├─ components
│ │ ├─ Button.vue
│ │ ├─ MainSection.vue
│ │ ├─ Title.vue
│ │ └─ UserSessionLink.vue
│ ├─ main.js // Application's entry point
│ └─ pages
│ ├─ Home.vue
│ ├─ Login.vue
│ └─ SpotifyTracker.vue
├─ stores
│ └─ index.js // Save general state of the app
├─ tests // Unit tests
│ ├─ routerMock.js
│ └─ unit
│ ├─ spotify.spec.js
│ └─ user-session.spec.js
└─ vite.config.js // Bundler setup, alias and more
```
## 🚀 Install
Install it locally in your project
```bash
npm install
npm run dev
```
## 🧪 Unit tests
```
npm run test
```