Nuxt 3 Setup: TailwindCSS, Pinia, ESLint & TypeScript

by Rajiv Sharma 54 views

Hey guys! Today, we're diving deep into setting up a robust Nuxt 3 baseline that includes some of the coolest technologies out there: TailwindCSS for styling, Pinia for state management, and ESLint/TypeScript for maintaining code quality. This setup will give you a solid foundation to build your next amazing web application. Let's get started!

Why This Stack?

Before we jump into the how-to, let's quickly chat about why this particular combination of technologies is so powerful. Nuxt 3, the latest iteration of the popular Vue.js framework, brings a ton of improvements, including better performance and a more streamlined developer experience. TailwindCSS offers a utility-first CSS approach, making styling a breeze. Pinia provides a simple and intuitive state management solution, and ESLint with TypeScript ensures that your code is clean, maintainable, and less prone to errors. This stack is all about modern web development best practices, and it's a game-changer for building scalable and maintainable applications. Embracing these technologies can significantly boost your productivity and the overall quality of your projects.

Acceptance Criteria: What We Aim to Achieve

To ensure we’re on the right track, let’s outline our acceptance criteria. By the end of this setup, we want to have:

  • A Nuxt 3 application running locally in Server-Side Rendering (SSR) mode.
  • TailwindCSS fully integrated and functioning, ready to make our app look awesome.
  • A Pinia store set up and tested with a simple example to manage our application state.
  • ESLint and TypeScript configured correctly, ensuring our code is lint-free and type-safe.

These criteria will serve as our guiding stars throughout the setup process, ensuring we hit all the essential milestones for a well-structured Nuxt 3 application. Meeting these objectives means we'll have a solid foundation upon which to build more complex features and functionalities.

Tasks: Breaking It Down

To achieve our goals, we'll break the process down into manageable tasks. This approach will help us stay organized and make the entire setup process less daunting. Here's the task list we'll be tackling:

  1. Initialize a Nuxt 3 project.
  2. Install TailwindCSS and configure it, including setting up our theme colors.
  3. Add Pinia store setup in the plugins directory.
  4. Configure ESLint and TypeScript to work seamlessly with our Nuxt 3 project.
  5. Create an example page that utilizes both TailwindCSS and Pinia to demonstrate their integration.

Each of these tasks is crucial in building our baseline, and we'll go through each one step-by-step.

Step-by-Step Guide to Setting Up Your Nuxt 3 Project

Alright, let's roll up our sleeves and dive into the practical steps. We're going to walk through each task in detail, so you can follow along and build your own Nuxt 3 project with TailwindCSS, Pinia, and ESLint/TypeScript.

1. Initializing the Nuxt 3 Project

The first step is to get a fresh Nuxt 3 project up and running. Nuxt 3 simplifies the initial setup process, making it quick and easy to get started.

Open your terminal and run the following command:

npx nuxi init nuxt3-tailwind-pinia-eslint

Replace nuxt3-tailwind-pinia-eslint with your desired project name. Once the command finishes, navigate into your new project directory:

cd nuxt3-tailwind-pinia-eslint

Next, install the project dependencies using your favorite package manager. We recommend using npm or yarn:

npm install
# or
yarn install

With the dependencies installed, you can now run the development server to ensure everything is working correctly:

npm run dev
# or
yarn dev

Open your browser and go to http://localhost:3000. You should see the default Nuxt 3 welcome page. If you do, congratulations! You've successfully initialized your Nuxt 3 project. This foundational step is crucial, as it sets the stage for all the exciting features we'll be adding next.

2. Installing and Configuring TailwindCSS

Now, let's bring some style to our application with TailwindCSS. TailwindCSS is a utility-first CSS framework that allows you to rapidly style your application without writing custom CSS. It provides a set of pre-defined classes that you can use directly in your HTML.

First, install TailwindCSS and its peer dependencies using npm or yarn:

npm install -D tailwindcss postcss autoprefixer
# or
yarn add -D tailwindcss postcss autoprefixer

Next, generate the tailwind.config.js and postcss.config.js files by running:

npx tailwindcss init -p

This command creates two important configuration files in your project root. Now, let's configure TailwindCSS to work with Nuxt 3.

Open tailwind.config.js and modify the content array to include the paths to your project's files where you'll be using TailwindCSS classes:

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

This configuration tells TailwindCSS to scan these files for any TailwindCSS classes and include them in the final CSS output.

Next, we need to add the TailwindCSS directives to our global CSS file. Create a file named assets/css/global.css if it doesn't already exist, and add the following:

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

Finally, import this CSS file in your nuxt.config.ts file. Open nuxt.config.ts and add the following to the css array:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  css: ['~/assets/css/global.css'],
})

To customize the theme colors, you can modify the theme.extend section in tailwind.config.js. For example, to add a custom primary color, you can do the following:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./app.vue",
  ],
  theme: {
    extend: {
      colors: {
        primary: '#1E3A8A', // Custom primary color
      },
    },
  },
  plugins: [],
}

Now, you can use your custom primary color in your components using TailwindCSS classes like text-primary or bg-primary. TailwindCSS is now fully integrated into your Nuxt 3 project, giving you a powerful toolkit for styling your application.

3. Setting Up Pinia for State Management

State management is crucial for building complex applications. Pinia is a fantastic state management library for Vue.js, and it integrates seamlessly with Nuxt 3. It's intuitive, type-safe, and makes managing your application's state a breeze.

To get started with Pinia, first, install the @pinia/nuxt module:

npm install @pinia/nuxt @pinia
# or
yarn add @pinia/nuxt @pinia

Next, add @pinia/nuxt to the modules array in your nuxt.config.ts file:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@pinia/nuxt'],
  css: ['~/assets/css/global.css'],
})

With the module installed, we can now create our first Pinia store. Create a directory named stores in your project root if it doesn't exist. Inside the stores directory, create a file named counter.ts:

// stores/counter.ts
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++
    },
  },
})

This code defines a simple Pinia store named counter with a count state and an increment action. Now, let's use this store in a component. Open your pages/index.vue file and modify it as follows:

<template>
  <div>
    <h1>Counter: {{ counter.count }}</h1>
    <button @click="counter.increment()">Increment</button>
  </div>
</template>

<script setup lang="ts">
import { useCounterStore } from '~/stores/counter'

const counter = useCounterStore()
</script>

This component imports the useCounterStore and uses it to display the current count and provide a button to increment the count. If you run your Nuxt 3 application and navigate to the home page, you should see the counter and be able to increment it by clicking the button. Pinia is now set up and working in your Nuxt 3 project, providing a robust solution for state management.

4. Configuring ESLint and TypeScript

Ensuring code quality is paramount for any project, and that's where ESLint and TypeScript come in. ESLint helps you maintain consistent code style and catch potential errors, while TypeScript adds static typing to your JavaScript code, making it more robust and easier to maintain.

First, let's install the necessary ESLint and TypeScript packages:

npm install -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-vue typescript
# or
yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-vue typescript

Next, we need to configure ESLint for our project. Create an .eslintrc.js file in your project root with the following content:

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es2021: true,
  },
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2021,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  plugins: [
    'vue',
    '@typescript-eslint',
  ],
  rules: {
    // Add custom rules here
  },
}

This configuration sets up ESLint to use the TypeScript parser, extends the recommended Vue.js and TypeScript rules, and includes the necessary plugins. You can customize the rules section to add your own linting rules.

To enable ESLint in your Nuxt 3 project, add a script to your package.json file:

// package.json
{
  "scripts": {
    "lint": "eslint . --ext .js,.ts,.vue",
  }
}

Now, you can run npm run lint or yarn lint to lint your project files. To automatically fix linting errors, you can add a --fix flag to the lint script:

// package.json
{
  "scripts": {
    "lint": "eslint . --ext .js,.ts,.vue --fix",
  }
}

TypeScript is automatically configured in Nuxt 3 projects, so you don't need to do any additional setup. However, you can customize the TypeScript configuration by creating a tsconfig.json file in your project root if needed.

With ESLint and TypeScript configured, you can now write cleaner and more maintainable code. Running the linting script regularly will help you catch and fix potential issues early in the development process.

5. Adding an Example Page Using Tailwind and Pinia

To showcase the integration of TailwindCSS and Pinia, let's create an example page that utilizes both. This will give you a practical understanding of how these technologies work together in a Nuxt 3 application.

We already have a basic example in pages/index.vue with the counter. Let's enhance it with some TailwindCSS styling. Open pages/index.vue and modify the template as follows:

<template>
  <div class="flex flex-col items-center justify-center h-screen bg-gray-100">
    <h1 class="text-2xl font-bold mb-4">Counter: {{ counter.count }}</h1>
    <button
      @click="counter.increment()"
      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
    >
      Increment
    </button>
  </div>
</template>

<script setup lang="ts">
import { useCounterStore } from '~/stores/counter'

const counter = useCounterStore()
</script>

In this updated template, we've added TailwindCSS classes to style the container, heading, and button. The flex, flex-col, items-center, and justify-center classes are used to center the content on the page. The bg-gray-100 class sets the background color, and the text-2xl and font-bold classes style the heading. The button is styled with bg-blue-500, hover:bg-blue-700, text-white, font-bold, py-2, px-4, and rounded classes to give it a modern appearance.

Run your Nuxt 3 application and navigate to the home page. You should see the styled counter with the increment button. This example demonstrates how easily you can use TailwindCSS classes to style your components and Pinia to manage your application state.

Conclusion: Your Nuxt 3 Baseline is Ready!

Awesome! You've successfully set up a Nuxt 3 baseline with TailwindCSS, Pinia, and ESLint/TypeScript. This robust foundation will help you build amazing web applications with confidence. Remember, the key to mastering these technologies is practice, so keep experimenting and building!

By following this guide, you've not only set up your project but also gained a deeper understanding of how these technologies work together. You're now well-equipped to tackle more complex features and build scalable, maintainable applications. Keep up the great work, and happy coding!