vue-bolt
v1.1.3
Published
A Vue 3 Starter Boilerplate with Vue Router 4, Pinia 2, Vite 5, Sass, Axios, Jest and More.
Downloads
10
Maintainers
Readme
Create a cutting-edge website using the latest technologies available. Vue Bolt, 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
vue-bolt
├─ .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