Part 1 - Create a new project with Nuxt, TailwindCSS, NuxtContent, Nuxt i18n

Introduction

In this serious I will setup a Nuxt web application with a landing page a simple design with the help of TailwindCSS and a blogging section with the help of nuxt/content. The last step will be the configuration of nuxt/i18n so that you can add different languages to your web app. This part of the series focuses on creating a Nuxt project with the installation of the necessary additional packages using the command line (CLI).

Nuxt

Nuxt is a framework that builds on top of Vue.js, offering additional features like component auto-imports, file-based routing, and composables for server-side rendering (SSR) friendly usage. Here are the key benefits of Nuxt and how it differs from Vue 3:

What are the benefits of Nuxt

• Simplified Development: Nuxt simplifies the development of server-side rendered applications, allowing developers to focus on application logic rather than infrastructure.
• Performance Optimization: Nuxt 3, based on Vue 3, offers better performance with faster rendering due to improvements in the Vue Virtual DOM and optimized bundle sizes.
• SEO Improvement: Nuxt.js enhances SEO through Server-Side Rendering (SSR), enabling better parsing by search engine crawlers compared to typical SPA applications like Vue.js.
• TypeScript Support: Both Vue 3 and Nuxt 3 are written in TypeScript, providing a fully typed codebase for preventing errors and documenting API usage.

Difference from Vue 3

• Composition API: Nuxt 3 leverages the Composition API introduced in Vue 3, enabling better logic reuse and grouping code by concern in complex components.
• Faster Rendering: With improvements in Vue Virtual DOM and optimized bundle sizes, Nuxt 3 offers faster rendering for both client-side and server-side applications.
• Smaller Bundle Size: Nuxt 3 focuses on reducing bundle size by making most of Vue's functionality tree-shakable, resulting in minimal application sizes.

In summary, while both Vue 3 and Nuxt offer powerful features for web development, Nuxt stands out for its SSR capabilities, SEO enhancements, and improved performance through optimized rendering and smaller bundle sizes compared to Vue 3.

Setup instructions

Prerequisites

Node.js and npm are needed so you can follow this guide. In case Node.js is not installed, visit the official node.js website or download it via homebrew with following command: brew install node

Step by Step tutorial

Step 1: Setup Nuxt app

Create a new project with following command: npx nuxi@latest init <project-name>

The command will show you the selection of the package manager

❯ Which package manager would you like to use?
● npm
○ pnpm
○ yarn
○ bun

I go with npm. Select according to your preference and hit enter.

This will create the nuxt app in a separate directory. Change directory to the newly created project-folder: cd <project-name> Your project folder should look like this:

.
├── README.md
├── app.vue
├── nuxt.config.ts
├── package-lock.json
├── package.json
├── node_modules
│   └── ...
├── public
│   └── favicon.ico
├── server
│   └── tsconfig.json
└── tsconfig.json

Start the new project with this command: npm run dev. If you see this output:

> dev
> nuxt dev

Nuxt 3.10.3 with Nitro 2.9.1
  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

  ➜ DevTools: press Shift + Option + D
    in the browser(v1.0.8)

ℹ Vite server warmed up in 591ms
ℹ Vite client warmed up in 904ms
✔ Nuxt Nitro server built in 228 ms nitro

Your application is working fine and you can visit the url http://localhost:3000 and you should see a page like this

If you can see the page, you initialized an empty Nuxt project!

🚀 Congratulations 🚀

Let's move on and add the remaining packages.

Step 2: TailwindCSS

I really like TailwindCSS because it helps me to style my web apps. TailwindCSS is a utility-first CSS framework known for its rapid development capabilities and customization options. It simplifies styling by providing pre-built CSS classes that can be directly applied in HTML, saving time and effort in writing custom CSS from scratch. Install TailwindCSS with following command:

npm install -D @nuxtjs/tailwindcss

Add it to your modules section in your nuxt.config.ts

export default defineNuxtConfig({
  modules: ["@nuxtjs/tailwindcss"],
});

Step 3: Nuxt/i18n

If you want to use internationalization in your web application, you should use the Nuxt/i18n module. This module is easy to use and has a great documentation in case you get stuck during the setup.

Install i18n with following command: npm install -D @nuxtjs/i18n

add it to your modules section in your nuxt.config.ts

export default defineNuxtConfig({
  modules: ["@nuxtjs/tailwindcss", "@nuxtjs/i18n"],
});

Step 4: Nuxt/Content

Nuxt Content is a module designed for Nuxt 3 that simplifies content management by reading files like .md, .yml, .csv, and .json in the content/ directory of a Nuxt project to create a robust data layer for applications. It enables developers to use Vue components within Markdown files using the MDC syntax, supports querying content with a MongoDB-like API, and facilitates deployment on both static and Node server hosting environments. The benefits of Nuxt Content include efficient content management through file-based CMS, seamless integration of Vue components in Markdown files, simplified querying of content, and versatile deployment options for various types of projects like blogs, documentation sites, portfolios.

Install nuxt/content with following command: npm install @nuxt/content

Add it to your modules section in your nuxt.config.ts

export default defineNuxtConfig({
  modules: ["@nuxtjs/tailwindcss", "@nuxtjs/i18n", "@nuxt/content"],
});

Summary

If you have followed the steps listed, you should have a basic setup for a Nuxt web application. This foundation can now be filled with content. You can now create pages and style them with TailwindCSS. Additionally, you can provide content in different languages, thus making it available to a larger audience. These further steps will be described in more detail in the next posts.

You can find the code of the tutorial hier on Github.