May 24th, 2024

Getting Started with Your First Nuxt 3 Project

Hey there! Ready to dive into the exciting world of Nuxt 3? Whether you're a seasoned developer or just getting started with web development, Nuxt 3 makes building modern web applications a breeze. In this article, I'll guide you through setting up your first Nuxt 3 project, complete with Server-Side Rendering (SSR) and Tailwind CSS for styling. Let's get started!

What is Nuxt 3?

Nuxt 3 is a powerful framework built on top of Vue 3, designed to make building universal Vue applications simple and enjoyable. It provides features like SSR, static site generation, and a modular architecture to help you create performant and scalable applications.

Prerequisites

Before we begin, make sure you have the following installed on your machine:

• Node.js (v14 or higher)
• npm or yarn (package managers)

Step 1: Setting Up the Nuxt 3 Project

First, you'll need to create a new Nuxt 3 project. Open your terminal and run:

npx nuxi init my-nuxt-app
cd my-nuxt-app
npm install

This will create a new directory called my-nuxt-app with all the necessary files and dependencies. Once the installation is complete, navigate into the project directory and install the dependencies.

Step 2: Running the Development Server

To see your new project in action, start the development server:

npm run dev

Open your browser and navigate to http://localhost:3000. You should see the default Nuxt 3 welcome page. Congrats, your Nuxt 3 app is up and running!

Step 3: Adding Tailwind CSS

Tailwind CSS is a utility-first CSS framework that makes it easy to style your application. Let's add Tailwind CSS to our Nuxt 3 project.

First, install Tailwind CSS and its dependencies:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Next, configure Tailwind by editing the tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './components/**/*.{vue,js}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './nuxt.config.{js,ts}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Create a css folder in your assets directory and add a main.css file with the following content:

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

Finally, import this CSS file in your nuxt.config.js:

export default defineNuxtConfig({
  css: ['@/assets/css/main.css'],
  build: {
    postcss: {
      postcssOptions: require('./postcss.config.js'),
    },
  },
});

Now you can use Tailwind classes throughout your application!

Step 5: Exploring More Features

Congratulations! You've set up a Nuxt 3 project with Tailwind CSS and Pinia for state management. From here, you can explore more Nuxt 3 features like:

• API Routes: Create server-side API endpoints with ease.
• Middleware: Add custom logic to route navigation.
• Plugins: Extend the functionality of your application with custom plugins.

Nuxt 3's documentation is a fantastic resource for diving deeper into these topics.

Conclusion

You've successfully created your first Nuxt 3 project! We've covered setting up the project, running the development server, adding Tailwind CSS for styling, and using Pinia for state management. With these basics in place, you're ready to build amazing web applications with Nuxt 3. Happy coding!

Feel free to reach out if you have any questions or need further assistance. Enjoy your Nuxt 3 journey!