Building a Simple Weather App with Nuxt 3 and TailwindCSS - Part 1: Setup & Configuration Estimated read time: 7 minute(s)

Introduction

In this tutorial series, we're going to build a simple weather app using Nuxt 3 and TailwindCSS. We'll cover the following:

• How to initialize a Nuxt app;
• How to add TailwindCSS to the Nuxt app;
• How to add Google Fonts to the Nuxt app;
• How to fetch data from an external API;
• And how to have a clean and organized project structure.

Bonus: I'll share my favorite SVG icons system, and show you how to use Google Fonts within the Nuxt app.

Let's jump in to the first part of this tutorial - preparing our environment.

Prerequisites

To proceed with the development, we need to make sure that we have the latest LTS version of Node installed. You can install it using Node Version Manager if you're under Unix, macOS, or Windows WSL.

For native Windows setup, just install the latest LTS version of Node by downloading the official installer.

Before we proceed, let's verify that our Node is installed and working by executing the node --version command. You should get your installed Node version as the command output.

v20.16.0

Initializing Nuxt App

As the very first step, let's initialize our app, which will be our working directory.

You can create a working directory yourself, navigate to that directory within your terminal, and then execute the following command:

npx nuxi@latest init .

or you can create the directory during initialization by executing the following command:

npx nuxi@latest init weather-app

The executed command will guide you through the app initialization process.

Need to install the following packages:
[email protected]
Ok to proceed? (y) # You can just press enter in this step

✔ Which package manager would you like to use?
npm # Choose npm as a package manager
◐ Installing dependencies...
...
> postinstall
> nuxt prepare

✔ Types generated in .nuxt                                                                                 8:53:27 PM

added 642 packages, and audited 644 packages in 35s

128 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
✔ Installation completed.                                                                                  8:53:27 PM

✔ Initialize git repository?
No # You can choose yes, if you need a repository, if you don't need it, just select no.
                                                                                                           8:53:45 PM
✨ Nuxt project has been created with the v3 template. Next steps:
 › cd weather-app                                                                                          8:53:45 PM
 › Start development server with npm run dev

As stated in the command output, navigate into weather-app directory and start the development server with npm run dev command.

By visiting your http://localhost:3000, you should see the Nuxt welcome page in your browser.

Before proceeding with the next steps, I would recommend taking at least a quick walk through the Official Nuxt Documentation.

Installing Dependencies

Next, we need to install our dependencies, which include TailwindCSS and Google Fonts modules for Nuxt 3.

TailwindCSS

Let's install and initialize the Nuxt Tailwind module by executing the following command:

npx nuxi@latest module add tailwindcss
npx tailwindcss init

Then, create a file in the app's root directory at the following path: assets/css/main.css, with the following content:

@tailwind base;
@tailwind components;
@tailwind utilities;

Lastly, include our CSS in the app by editing the nuxt.config.ts file. We should end up with something like this:

export default defineNuxtConfig({
  css: ["~/assets/css/main.css"],
  compatibilityDate: "2024-04-03",
  devtools: { enabled: true },
  modules: ["@nuxtjs/tailwindcss"],
});

Congratulations! You now have Nuxt 3 with TailwindCSS set up and ready for development. Let's proceed with the next steps.

Google Fonts

To make Google Fonts available within our app, we need to install the Nuxt Google Fonts module and apply some modifications to our Nuxt configuration. You can install the Google Fonts module by executing the following command:

npx nuxi@latest module add google-fonts

After that, modify the nuxt.config.ts file to configure the Google Fonts module. I'll be using the Nunito font, but you can try setting any other Google Font if you feel comfortable doing so.

export default defineNuxtConfig({
  css: ["~/assets/css/main.css"],
  compatibilityDate: "2024-04-03",
  devtools: { enabled: true },
  googleFonts: {
    download: true,
    families: {
      Nunito: "400..700",
    },
    fontsDir: "",
    overwriting: true,
    outputDir: "assets/fonts",
    stylePath: "nunito.css",
  },
  modules: ["@nuxtjs/tailwindcss", "@nuxtjs/google-fonts"],
});

Lastly, modify the tailwind.config.js file to set our font as default font:

import defaultTheme from "tailwindcss/defaultTheme";

/** @type {import("tailwindcss").Config} */
export default {
  content: [],
  theme: {
    extend: {
      fontFamily: {
        sans: ["Nunito", ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [],
};

That's it! We're now ready to proceed with part 2, which will be posted as soon as it is ready.

Final words

In Part 1 of this tutorial, we initialized and prepared our Nuxt 3 app for development. In Part 2, we will build a static weather app using dummy, hardcoded data, which will serve as a foundation before integrating an external API.

I'm doing my best to get Part 2 ready as soon as possible, and I'll update this post with a link to the Part 2 once it's available.