Skip to content

bishworup11/rick-and-morty-api-vue-js

Repository files navigation

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


🚀 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