When building with APIs, it's important to start with a Minimum Viable Product (MVP) mindset. This means:

• Focus on core functionality first
• Get something working end-to-end quickly
• Add features incrementally
• Don't overcomplicate things

For this project, we'll build a weather app that shows current conditions for a given location. It's simple enough to complete quickly but complex enough to teach important concepts.

Let's create a new project in Cursor. You can either:

• Start with a template (recommended for beginners)
• Create a project from scratch (good for learning)

If you're starting from scratch, you'll need to:

# Create a new Vue project
npm create vue@latest

# Navigate to your project
cd your-project-name

# Install dependencies
npm install

# Start the development server
npm run dev

Reactivity

Reactivity

Vue's reactivity system is what makes it special. When you change data, the UI updates automatically:

<script setup>
import { ref } from 'vue'

const temperature = ref(72)
const location = ref('New York')

// When these values change, the UI updates automatically
</script>

<template>
  <div>
    <h2></h2>
    <p>°F</p>
  </div>
</template>

Components

Components are reusable pieces of UI. Here's a simple weather card component:

<!-- WeatherCard.vue -->
<script setup>
defineProps({
  temperature: Number,
  location: String,
  condition: String
})
</script>

<template>
  <div class="weather-card">
    <h3></h3>
    <p class="temp">°F</p>
    <p class="condition"></p>
  </div>
</template>

Performance

Vue is designed to be performant out of the box. It uses a virtual DOM and only updates what needs to change. Some tips:

• Use v-once for static content
• Use v-memo for expensive lists
• Lazy load components when possible

We'll use the OpenWeather API for this project. First, let's create a service to handle API calls:

// services/weather.js
const API_KEY = import.meta.env.VITE_WEATHER_API_KEY
const BASE_URL = 'https://api.openweathermap.org/data/2.5'

export async function getWeather(city) {
  const response = await fetch(
    `${BASE_URL}/weather?q=${city}&units=imperial&appid=${API_KEY}`
  )
  return response.json()
}

Then use it in your component:

<script setup>
import { ref, onMounted } from 'vue'
import { getWeather } from '@/services/weather'

const weather = ref(null)
const city = ref('New York')

async function fetchWeather() {
  try {
    weather.value = await getWeather(city.value)
  } catch (error) {
    console.error('Error fetching weather:', error)
  }
}

onMounted(fetchWeather)
</script>

Never expose your API keys in your code. Use environment variables instead:

• Create a .env file in your project root:

VITE_WEATHER_API_KEY=your_api_key_here

• Add .env to your .gitignore file
• Access the key in your code using import.meta.env.VITE_WEATHER_API_KEY

This is crucial! Here's how to keep your API key safe:

• Create a .env.example file with placeholder values
• Add .env to .gitignore
• Never commit the real .env file
• Share the .env.example file with your team

# .env.example
VITE_WEATHER_API_KEY=your_api_key_here

# .gitignore
.env
.env.local

When deploying to Netlify, you'll need to set up your environment variables:

• Go to your site settings in Netlify
• Navigate to "Environment variables"
• Add your API key with the same name as in your .env file
• Deploy your site

Your environment variables will be available in your deployed site, but they won't be visible in your code or to users.