Nuxt Weather Module

A Nuxt module for displaying dynamic weather icons from the Open-Meteo API.

• ✨  Release Notes
• 🏀 Online playground
• 📖  Documentation

Features

• Dynamic Icons: Automatically updates the weather icon based on current weather conditions and time of day.
• Open-Meteo API: Uses the free and open-source Open-Meteo API for weather data.
• Customizable: Configure the location, icon size, and more.
• TypeScript Support: Fully typed for a better development experience.
• Easy to Use: Just add the component to your page and it works.

Quick Setup

Install the module to your Nuxt application with one command:

npx nuxi module add nuxt-weather-module

That's it! You can now use the DynamicWeather component in your Nuxt app.

Configuration

The module can be configured in your nuxt.config.ts file:

export default defineNuxtConfig({
  modules: ['nuxt-weather-module'],
  weatherModule: {
    latitude: 55.676098, // Copenhagen
    longitude: 12.568337, // Copenhagen
    iconSize: 'clamp(30px, 5vw, 50px)',
  },
})

| Option | Type | Default | Description | |-------------|----------|---------------------------------|------------------------------------| | latitude | number | 55.676098 (Copenhagen) | Latitude for the weather location. | | longitude | number | 12.568337 (Copenhagen) | Longitude for the weather location.| | iconSize | string | 'clamp(30px, 5vw, 50px)' | CSS value for the icon size. |

Usage

Simply add the <DynamicWeather /> component to any page or component:

<template>
  <div>
    <h1>My Awesome App</h1>
    <DynamicWeather />
  </div>
</template>

API Reference

Components

DynamicWeather

A client-side component that displays the weather icon. It fetches data from the Open-Meteo API and dynamically selects the appropriate icon from the bundled collection.

Types

The module exports the following types for use in your application:

• WeatherIcon
• OpenMeteoResponse
• CurrentWeather
• CurrentWeatherDetail
• CurrentWeatherUnits

You can import them from nuxt-weather-module:

import type { WeatherIcon } from 'nuxt-weather-module'

Notes

• Rate Limits: The Open-Meteo API is free and does not require an API key. However, it is subject to rate limits. Please refer to the Open-Meteo documentation for more information.
• Client-Only: The DynamicWeather component is client-only and will only be rendered on the client-side. This is because it fetches data from the Open-Meteo API in the browser.

Contribution

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release