Pokemon Sprite Fetcher

A Vue 3 component package for fetching and displaying Pokemon sprites from the PokeAPI.

Features

• 🎮 Text input for Pokemon name
• 🔍 Validates Pokemon names using PokeAPI
• 🖼️ Fetches and displays Pokemon sprites
• ❌ Clear error messages for invalid Pokemon names
• 🎨 Styled and ready to use
• 📦 Easy to import and integrate

Installation

npm install pokesprite-fetcher

Usage

In a Vue 3 project

<template>
  <div>
    <h1>My Pokemon App</h1>
    <PokemonSpriteFetcher />
  </div>
</template>

<script>
import PokemonSpriteFetcher from 'pokesprite-fetcher';
import 'pokesprite-fetcher/style.css';

export default {
  components: {
    PokemonSpriteFetcher
  }
}
</script>

With Composition API

<script setup>
import PokemonSpriteFetcher from 'pokesprite-fetcher';
import 'pokesprite-fetcher/style.css';
</script>

<template>
  <PokemonSpriteFetcher />
</template>

How it Works

1. User enters a Pokemon name in the text input
2. Clicks "Fetch Sprite" button (or presses Enter)
3. Component validates the name using PokeAPI
4. If valid, displays the Pokemon sprite and name
5. If invalid, shows an error message

Development

Install dependencies

npm install

Build the package

npm run build

Development mode

npm run dev

Publishing to NPM

1. Update the version in package.json
2. Build the package:

   npm run build

3. Login to npm (if not already logged in):

   npm login

4. Publish the package:

   npm publish

API

The component uses the PokeAPI to fetch Pokemon data. No API key is required.

License

MIT

Author

Your Name