morellexf13 / vite-boilerplate

⚡️ A Vue 3 Starter Boilerplate with Vue Router 4, Pinia 2, Vite 5, Sass, Axios, Jest 29 and More

⚡️

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?
• Single-File Components
• Reactivity Fundamentals
• Computed Properties
• Props Declaration
• Slots
• Performance Overview
• Pinia - What is a Store?
• Pinia - State
• Pinia - Getters
• Pinia - Actions
• Vuex Router - Getting Started
• Vuex Router - Navigation Guard
• Jest Unit Tests (Spanish only)

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

npm install

npm run dev

🧪 Unit tests

npm run test