Rick and Morty API - Vue.js

This project is built using Vue.js 3, powered by Vite, and utilizes the Rick and Morty API to display characters, locations, and episodes from the show.

📌 Features

✅ Fetch and display Rick and Morty characters, locations, and episodes.
✅ Vue Router for navigation between different pages.
✅ State management using Vuex.
✅ API calls handled with Axios.
✅ UI components powered by Naive UI.
✅ Authentication with token-based auth and Navigation Guards.

---

🛠 Technologies Used

• Vue.js 3 – Progressive JavaScript framework.
• Vite – Fast build tool for modern web projects.
• TypeScript – Strongly typed JavaScript alternative.
• Vuex – State management pattern and library.
• Vue Router – Official router for Vue.js applications.
• Naive UI – Modern UI components for Vue 3.
• Axios – HTTP client for making API requests.

---

💻 Recommended IDE Setup

• VS Code

---

🚀 Project Setup

1️⃣ Clone the Repository

git clone https://github.com/bishworup11/rick-and-morty-api-vue-js.git
cd rick-and-morty-api-vue-js

2️⃣ Install Dependencies

npm install

3️⃣ Setup Environment Variables

Create a .env file in the root directory and add:

VITE_APP_SECRET=secret@123

Note: Never expose sensitive API keys in the frontend.

4️⃣ Run the Development Server

npm run dev

This will start the application locally at http://localhost:5173/.

5️⃣ Build for Production

npm run build

This generates an optimized production build in the dist/ folder.

---

📄 API Reference

• Rick and Morty API – rickandmortyapi.com
• Authentication API – dummyjson.com/auth

---