Skip to main content
This guide will help you set up your local development environment to start working on the Pokedex Vue 3 application.

​
Prerequisites

Before you begin, ensure you have the following installed:
  • Node.js (v18 or higher recommended)
  • npm (comes with Node.js)
  • Git for version control
For the best development experience, we recommend:
VSCode + Volar ExtensionInstall VSCode with the Volar extension for Vue 3 support.If you have Vetur installed, make sure to disable it to avoid conflicts.

​
Installation Steps

1

Clone the repository

Clone the project repository to your local machine:
git clone <repository-url>
cd router
2

Install dependencies

Install all required npm packages:
npm install
This will install the following key dependencies:
  • Vue 3 (^3.5.13) - The progressive JavaScript framework
  • Vue Router (^4.5.0) - Official router for Vue.js
  • Pinia (^2.3.1) - State management for Vue
  • Axios (^1.7.9) - HTTP client for API requests
  • Vite (^6.0.5) - Next generation frontend tooling
3

Start the development server

Run the development server with hot-reload:
npm run dev
The application will be available at http://localhost:5173 (or another port if 5173 is in use).

​
Available Scripts

The following npm scripts are available in package.json: 
npm run dev

​
Script Descriptions

  • npm run dev - Starts the Vite development server with hot module replacement (HMR)
  • npm run build - Builds the application for production with optimizations
  • npm run preview - Locally preview the production build

​
Project Structure

Once set up, your project structure will look like this: 
router/
├── src/
│   ├── assets/          # Static assets
│   ├── components/      # Vue components
│   ├── composables/     # Vue composables (useGetData)
│   ├── router/          # Vue Router configuration
│   ├── stores/          # Pinia stores
│   ├── views/           # Page components
│   ├── App.vue          # Root component
│   └── main.js          # Application entry point
├── public/              # Public static assets
├── index.html           # HTML entry point
├── package.json         # Dependencies and scripts
└── vite.config.js       # Vite configuration

​
Vite Configuration

The project uses Vite with the following configuration (vite.config.js): 
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

​
Key Configuration Features

  • Vue Plugin: Enables Vue 3 single-file component support
  • Vue DevTools: Integrated browser DevTools for Vue debugging
  • Path Alias: @ is aliased to the src/ directory for cleaner imports

​
Development Tools

The project includes vite-plugin-vue-devtools (^7.6.8) which provides an enhanced debugging experience during development.

​
Next Steps

Now that your environment is set up:
  1. Explore the PokeAPI Integration to understand how data is fetched
  2. Learn about Building and Deployment when you’re ready to deploy
  3. Review the source code in src/ to understand the application structure

​
Troubleshooting

If you encounter port conflicts, Vite will automatically use the next available port. Check your terminal output for the actual URL.

​
Common Issues

  • Module not found errors: Run npm install again to ensure all dependencies are installed
  • Volar not working: Make sure to disable the Vetur extension if installed
  • Port already in use: Vite will automatically select another port or you can specify one in vite.config.js

Build docs developers (and LLMs) love

Get started for freeTalk to us