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.
✅ 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.
- 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.
git clone https://github.com/bishworup11/rick-and-morty-api-vue-js.git
cd rick-and-morty-api-vue-js
npm install
Create a .env
file in the root directory and add:
VITE_APP_SECRET=secret@123
Note: Never expose sensitive API keys in the frontend.
npm run dev
This will start the application locally at http://localhost:5173/
.
npm run build
This generates an optimized production build in the dist/
folder.
- Rick and Morty API – rickandmortyapi.com
- Authentication API – dummyjson.com/auth