Skip to content

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

License

Notifications You must be signed in to change notification settings

morellexf13/vite-boilerplate

Repository files navigation




Vite Boilerplate


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

Version


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


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