1.1.2 โข Published 2 months ago
vue-bolt v1.1.2
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