Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/regenrek/weather-forecast-nuxt3

🌤️ weather forecast app written with nuxt3, tailwindcss, leaflet, openweathermap, maptiler🌤️
https://github.com/regenrek/weather-forecast-nuxt3

leaflet maptiler nuxt nuxt3 openweathermap tailwindcss vue vue3

Last synced: 3 days ago
JSON representation

🌤️ weather forecast app written with nuxt3, tailwindcss, leaflet, openweathermap, maptiler🌤️

Awesome Lists containing this project

README

        

# Weather Forecast Nuxt4

Welcome to the Nuxt 4 Starter project! This starter template is designed to help you quickly set up a Nuxt 4 application with essential features and best practices.

## Features

- **Nuxt 3 (Compatibility Mode)**: Leverage the power of Nuxt 3 while maintaining compatibility with Nuxt 4.
- **Nuxt UI**: Utilize Nuxt UI components for a seamless development experience.
- **Tailwind CSS**: Style your application with the utility-first CSS framework.
- **Nuxt Content**: Manage your content with ease using Nuxt Content.
- **Custom Fonts**: Easily integrate custom fonts into your project.
- **Optimized Images**: Use WebP format and lazy loading for better performance.
- **nuxt-og-image**: Generate Open Graph images dynamically.

## Installation

To get started, clone the repository and install the dependencies:

```bash
pnpm install
```

## Usage

### Development

Run the development server:

```bash
pnpm run dev
```

### Build

Build the application for production:

```bash
pnpm run build
```

## Configuration

### Custom Fonts

Add your custom fonts in the `assets` directory and configure them in your `tailwind.config.js`:

```javascript:tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
custom: ['YourCustomFont', 'sans-serif'],
},
},
},
};
```

### Optimized Images

Use WebP format and lazy loading for images. Example:

```html
Description
```

## Links to Packages

- [Nuxt 3](https://nuxt.com/)
- [Nuxt UI](https://ui.nuxtjs.org/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Nuxt Content](https://content.nuxtjs.org/)
- [nuxt-og-image](https://github.com/nuxt-community/nuxt-og-image)

## License

This project is licensed under the MIT License.

## Follow Me

Follow me on X [@kregenrek](https://x.com/kregenrek)
# weather-forecast-nuxt3