🍦

Vanilla Tuto (Deprecated)

A Vue 2 Starter Boilerplate with Vue Router 3, Vuex 3, Webpack 5, Axios, Jest and More.

Tuto is the short of Tutorial and the best/easier way to start creating a SPA using the best frameworks out there!

👨🏻‍🏫 Basic topics

• What is Vue?
• Single-File Components
• Reactivity in Depth
• Computed Properties and Watchers
• Props
• Slots
• Vuex Store v3 - Getting Started
• Vue Router v3 - Getting Started
• Jest Unit Tests (🇪🇸)

💎 Features

• Basic login/logout state definition using Vuex Store v3.x.
• Basic Store configured using Vuex and Persist Plugin (stores/index.js).
• Basic "Home" and "Login" pages defined (src/pages/).
• 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.
• API Unit test included.
• Path alias defined (webpack.config.js).
• GitHub actions workflow example defined.

🏛 Project Structure

tuto
├─ .babelrc
├─ LICENSE
├─ README.md
├─ babel.config.json
├─ jest.config.js // 🃏 Unit tests configuration
├─ jsconfig.json
├─ package-lock.json
├─ package.json
├─ router.js // 🧭 Handle page routes
├─ src
│  ├─ App.vue
│  ├─ assets
│  │  ├─ css
│  │  │  └─ index.css // 🎨 Main stylesheet file
│  │  ├─ favicon.ico
│  │  ├─ logo.png
│  │  ├─ screenshots
│  │  │  └─ login.png
│  │  └─ scripts
│  │     └─ api.js // 📡 Handle api calls
│  ├─ components
│  │  ├─ MainSection.vue
│  │  └─ UserSessionLink.vue
│  ├─ index.html
│  ├─ 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
│  └─ unit
│     └─ spotify.spec.js
├─ vue.config.js // 🍦 Vue framework setup
└─ webpack.config.js // 📦 Bundler setup, alias and more

🚀 Install

Install it locally in your project

npm install

npm run dev

🧪 Unit tests

npm run test