To ensure a seamless experience as we venture into setting up and exploring Nuxt 3, certain prerequisites must be met. The following technologies and installations are required:

• Node.js: v18.10.0 or newer.
• Package manager: While installing Node.js provides you with npm by default, I have a penchant for pnpm as it offers efficient disk space usage by sharing packages across projects and ensures that dependencies are never hoisted, leading to more predictable builds.
• Text editor: I recommend using Visual Studio Code (VS Code) with the Vue – Official Extension, but https://www.jetbrains.com/webstorm/ or any other editor will work fine
• Terminal: You will need one to run Nuxt commands.

The code files for this chapter can be found at https://github.com/PacktPublishing/Nuxt-3-Projects/tree/main/chapter01.

The CiA video for this chapter can be found on https://packt.link/UhVbH

Being in the web development sphere for a good chunk of time teaches you the importance of evolution. It’s similar to watching a city grow. What started as a few buildings (or in our case, static web pages) has now turned into a sprawling metropolis with skyscrapers, interconnected transit systems, and vibrant hubs of activity. Similarly, our web development tools have transformed to keep up with the times. Nuxt stands tall in this city of tools, especially for those of us who’ve been crafting with Vue.js. This section will act as a guided tour of Nuxt 3, taking you through its historical streets, its bustling downtown, and the architectural marvels that make developers like us tip our hats in appreciation.

The evolution of web development

In the early days of the web, sites were straightforward. Think of them as the digital equivalent of a hand-drawn map. They showed you the way, but the journey was pretty much on you. As time passed, and as the web began to grow, demands became more complex. Websites transformed into web applications, and these applications needed to be dynamic, responsive, and interactive. It was no longer just about displaying information; it was about engagement, about creating experiences. In this dynamic landscape, Vue.js emerged as a beacon, simplifying the complexities and making developers’ lives a tad easier. But as any seasoned developer will tell you, there’s always room for improvement, for evolution.

The birth of Nuxt

Here’s a scenario many of us can relate to: You’re deep into a Vue.js project, appreciating its elegance, but there are moments when you think, “Could this be more streamlined? Could some repetitive tasks be automated?” This quest for efficiency is where Nuxt enters the story. Conceived by the visionary Chopin brothers, Nuxt was Vue.js with wings. It wasn’t just about adding features; it was about smart integration, about making the entire development process smoother. Imagine not having to set up routing manually for every page or having out-of-the-box solutions for SEO challenges. Nuxt was that fresh perspective, that innovative approach to challenges we’d taken as “just part of the process.”

Why Nuxt?

Simply put, if you’re using Vue.js, Nuxt is your next logical step. It brings a suite of enhanced features. Nuxt comes packed with built-in tools such as automated routing, middleware support, universal (SSR and SPA) rendering, and flexible layouts. This means less boilerplate and more productivity. Nuxt seamlessly extends Vue’s capabilities, providing an integrated, efficient solution for building solid web applications.

Now that we’ve explored Nuxt’s unique offerings in the Vue.js ecosystem, our next step is to delve into the architectural elements and foundational concepts of Nuxt 3.

In the ever-evolving domain of web development, understanding the inner workings of a tool can be the key to mastering it. Nuxt 3, with its intricate design and powerful features, is no exception. For those of us who’ve been around the block, unraveling such complexities isn’t just a necessity – it’s a passion. Let’s embark on this deep dive into Nuxt 3, peeling back the layers to reveal the principles and architecture that power it.

Built on top of Vue

At its core, Nuxt 3 is built on top of Vue.js. While reactivity and component-based architectures have found their way into many modern frameworks, what sets Vue.js apart is its approachability. It’s designed in a way that both newcomers and seasoned developers can grasp its concepts with ease. But beyond the framework itself, Vue’s vibrant and supportive community plays a significant role. This positive community feedback creates the perfect foundation for Nuxt 3, allowing it to offer an enriched development experience.

Universal rendering and static site generation

Remember the days when we’d enter a website and there’d be this brief moment of emptiness before the content magically appeared? That’s client-side rendering in action. While it has its merits, this approach sometimes feels like entering a dimly lit room and waiting for the lights to slowly turn on. Universal rendering changes the game by merging the best of server-side and client-side rendering. With this approach, the content is pre-rendered on the server, providing immediate access upon entering the website. Once the page is loaded, the client-side script “hydrates” the page, enabling dynamic interactions and enhancing the user experience. The benefits?

• Faster initial page load
• Improved SEO
• Better overall user experience

And speaking of smooth web experiences, have you noticed that some websites are fast and don’t seem to have any glitches? Many of these are static sites. They’re like web pages that are ready to go as soon as you open them, without needing extra loading time. But modern static sites aren’t just about serving fixed content; they can be as dynamic and interactive as any other site. Nuxt’s static site generation (SSG) capability means developers get the benefits of static sites (speed and security) and the dynamism of web apps. With Nuxt, crafting a static site is as intuitive as building any other application, but with the added advantages of performance and security.

Performance optimizations

In the world of web development, speed isn’t just a luxury; it’s a necessity. Users expect web pages to load quickly, and search engines reward fast-loading sites with better rankings. Recognizing this, Nuxt 3 has been designed with performance at its core. But what does this mean for developers and users? Let’s break down some of the key performance optimization techniques that Nuxt 3 employs to enhance both the developer and user experience:

• Code splitting: Instead of sending a large JavaScript bundle, Nuxt 3 leverages Vite and Rollup to split code intelligently. This means users only download what’s necessary for the current page, reducing load times.
• Tree shaking: Unnecessary code can bloat applications. Tree shaking ensures that only the code that’s used gets included in the final bundle. It’s like trimming the branches of a tree to keep it healthy and vibrant.
• Link prefetching: While a user is browsing a page, Nuxt 3 is already hard at work, prefetching resources for linked pages. This proactive approach means subsequent pages load almost instantly.

Nuxt uses Vite under the hood. Vite is a tool that changes how we think about web development. It starts up almost instantly, which means no more waiting to start working. When you change your code, Vite updates it right away so that you can see your changes immediately. It has a straightforward build system, which means less time figuring things out and more time coding. Plus, it’s designed to be fast in every way, making the whole development process smoother.

In this section, we covered Nuxt 3’s architecture, its advantages in rendering, and its focus on performance. As we proceed, we’ll shift from theory to hands-on practice, guiding you through setting up your first Nuxt 3 environment.

Before diving into the depths of Nuxt 3, it’s essential to set up a conducive environment. Think of it as preparing the soil before planting a tree. The better the preparation, the healthier the tree will be as it grows. In this section, we’ll walk you through the prerequisites and installation steps, ensuring you have a robust foundation to start your Nuxt 3 journey.

Prerequisites

To work with Nuxt 3, there are a few things you need to have installed and set up. Based on the Nuxt 3 official website, here are the prerequisites:

• Node.js: It’s essential to ensure you have Node.js installed and that it’s at least version 18.10.0. To check whether Node.js is installed, as well as its version, run the following command:

  $ node –v

  If you see a version number, that means Node.js is installed. If it’s below 18.10.0 or if Node.js isn’t installed, you can download the latest version from the official Node.js website: https://nodejs.org/.

• Package manager: While npm comes bundled with Node.js, for this guide, we’ll be using pnpm. It’s efficient and fast and ensures that packages are shared across projects. To install it, run the following command:

  $ npm install -g pnpm

• Code editor: While you can use any code editor, we recommend VS Code. It’s versatile, supports a plethora of extensions, and is widely adopted in the developer community.

In this section, you set up your Nuxt 3 environment. Next, you’ll build a “Hello Nuxt” application and explore the basic project structure.

In this section, we’ll take the first step together – that is, crafting your very first Nuxt application. By the end, you’ll have a running application and a foundational understanding of the Nuxt project structure.

Initialization – the steps to create a new Nuxt project

Here are the steps for initialization :

1. Create a new starter project by designating a space for your project. Open your Terminal (macOS/Linux) or terminal (Windows), and run the following command:

   $ pnpm dlx nuxi@latest init hello-nuxt

   Upon executing this command, you’ll be prompted to select a package manager. Choose pnpm:

Figure 1.1: use pnpm as a package manager

2. After the dependencies are installed, you may also be asked whether you want to initialize a Git repository. If you prefer not to set up a Git repository during this process, you can choose no when this question appears.
3. Once the project has been created, you’ll get a message similar to the following:

Figure 1.2: After creating the project

4. Next, we must go to the folder where the project was created:

   $ cd hello-nuxt

   Then, we need to install the dependencies. Since we’re using pnpm, we’ll run the following command:

   $ pnpm i

   Note that you can still install dependencies using npm or Yarn.

5. To start the project, we can run the following command:

   $ pnpm dev

6. This command starts your Nuxt application in development mode. It’s optimized for a developer experience, which means the following is true:
   1. Hot module replacement (HMR) is active, so changes in your files will automatically update the application without a full page reload
   2. Errors and warnings are displayed in the console and, often, in an overlay on your application

   A local development server will be started, typically accessible at http://localhost:3000.

7. The terminal should display the following message after a successful build:

Figure 1.3: Build output

8. Click on the link and voila! You have your first “Hello Nuxt” application!

Figure 1.4: Nuxt application on a browser

The Nuxt CLI establishes a basic Nuxt application as a starting point for our project. This includes a built-in component called NuxtWelcome. In the upcoming sections, we’ll explore how to modify and expand upon this foundation so that it aligns with our specific needs.

9. Finally, let’s open VS code and discover our new “Hello Nuxt” project!

   $ code .

   This will open the current directory in VS Code. You might need to set up VS Code so that it can be launched from the command line. For instructions on how to set this up, please refer to https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line.

Now that VS Code is opened, let’s discover the default project structure that was made after initializing.

The default project structure

In the world of Nuxt, a well-organized structure greets you from the outset. This deliberate setup ensures clarity and efficiency, guiding developers through a logical flow. While we’ll delve into the directories presented in the starter project, it’s essential to note that as your project grows and evolves, other folders, such as those for pages, plugins, middleware, and will come into play. Fear not, for these will be explored in depth in the subsequent chapters.

But for now, let’s familiarize ourselves with the foundational structure of a Nuxt 3 project:

• README.md: A starting point for most projects. This file traditionally offers a brief introduction and might include basic setup or usage instructions, making onboarding easier for newcomers.
• server: This houses custom server-side logic, enhancing Nuxt’s default server capabilities. We’ll dive deeper into its potential in future chapters.
• tsconfig.json: A TypeScript configuration tailored for Nuxt. There’s no need to delve into its details.
• package.json: Within the scripts, you’ll find the following:
  • dev: Initiates the development environment, enabling HMR
  • build: Initiates the local development environment with live reloading
  • generate: For applications that use SSG, this script generates the static pages of the application
  • preview: Previews the generated static site locally
  • postinstall: Prepares the Nuxt environment post-installation
• .npmrc: Holds npm’s configuration settings. There’s no need to delve into its details.
• Public: A sanctuary for static assets that you’d want to remain unprocessed by Vite.
• pnpm-lock.yaml: Essential for pnpm users, this file ensures consistent package installations across environments. You might find package-lock.json if you’re using npm or yarn.lock if you’re using Yarn.
• nuxt.config.ts: The cornerstone of your Nuxt project. This configuration file orchestrates various aspects of your application, from global CSS to plugins.
• App.vue: The heart and soul of your application. As the root Vue component, it sets the stage for the rest of your application’s components:

Figure 1.5: Project structure

We’ve just set up our first “Hello Nuxt” app and got a peek into its structure. Next, we’ll cover some handy extensions to make our Nuxt journey even smoother.

The VS Code marketplace offers a wide range of extensions that are designed to improve the development experience. For those working with Nuxt, there are specific extensions that stand out, proving invaluable in day-to-day coding tasks. In this section, we’ll explore some of the top extensions tailored for Nuxt, highlighting how they can make your development smoother and more efficient:

• Vue - Official
• Nuxtr
• Vue VSCode Snippets
• Non-Vue-related extensions

Let’s go through them in detail.

Vue - Official

Vue - Official is an extension for VS Code that provides enhanced support for Vue 3 projects. Acting as a comprehensive toolset for Vue developers, here’s what Vue - Official brings to the table:

• TypeScript support: Suppose you have a ref value in your Vue component defined as name: String. If you mistakenly assign a number to it, the extension will highlight this discrepancy, indicating a type mismatch:

Figure 1.6: Vue – Official: TypeScript support

• Template interpolation: If you have a data property called message in your Vue component, when you start typing {{ me... }} in the template, the extension will suggest auto-completing it to {{ message}}:

Figure 1.7: Vue – Official: template interpolation

• Syntax highlighting: In your .vue file, the <script> section might be highlighted in one color scheme, while the <template> and <style> sections will have distinct color palettes, making it easier to differentiate between them.
• Refactoring capabilities: If you decide to change a data property’s name from firstName to givenName, Vue Official extension can help you rename it across your component, ensuring consistency.
• Formatting: If you’ve written a block of code in your <script> section without proper indentation or spacing, using Vue Official extension’s integration with Prettier can automatically format the code so that it adheres to best practices and consistent styling.

Nuxtr

Nuxtr is like your friendly coding companion for Nuxt.js projects. It’s packed with handy tools and commands, making your coding sessions smoother. Here’s a breakdown of its core offerings:

• Create project files and folders: In VS Code, you can press Ctrl + Shift + P (or Command ⌘ + Shift ⇧ + P for Mac users) and type nuxtr: create. You’ll see a list of Nuxt files and folders that can be created, at which point you can select the desired ones:

Figure 1.8: Nuxtr – creating project files and folders

• Run Nuxt commands: Simply write the command’s name in the command palette:

Figure 1.9: Nuxtr – running Nuxt commands

• Activate Nuxt DevTools via your status bar: Nuxt DevTools is a lifesaver for any Nuxt developer. It gives you a clear picture of your app’s components, lets you see state changes in real time, provides performance metrics, and even tracks events. The extension works with Nuxt > 3.4.0. You can easily activate it from your status bar. The extension recognizes your Nuxt.js version and suggests updates if needed.
• Set up CSS frameworks and linters: You can integrate various CSS frameworks (Tailwind CSS, UnoCSS, and Vueitfy), as well as linters (Stylelint and Eslint):

Figure 1.10: Setting up CSS frameworks and linters

As we’ve seen, these extensions are more than just add-ons; they’re essential tools that can significantly streamline your Nuxt development process.

In this chapter, we dived into the transformative world of Nuxt 3 and its role in modern web development. We started by discussing its architecture and its built-in performance optimizations, which include code splitting, tree shaking, and link prefetching. We also touched upon its capability for server-side rendering and SSG. Then, we walked through the steps of setting up the Nuxt 3 environment, including the prerequisites and initialization steps for creating a “Hello Nuxt” app. We also got a taste of the Nuxt project structure and discussed some recommended extensions for VS Code to enhance the development experience.

In the next chapter, we’ll build a simple portfolio website using Nuxt 3 and Tailwind CSS, further enhancing our hands-on experience with the framework.

What are the prerequisites for setting up a Nuxt 3 environment?

• What commands are used to initialize a new Nuxt 3 project?
• Explain the benefits of server-side rendering in Nuxt 3.
• What role does the nuxt.config.ts file play in a Nuxt project?
• Describe the default project structure of a Nuxt 3 application.
• How can you open your Nuxt project in VS Code using the terminal?
• What are some recommended extensions for VS Code when working with Nuxt?
• How does Nuxt 3 benefit from being built on top of Vue.js?
• Explain how Nuxt 3 handles SSG.

• Nuxt official documentation: https://nuxt.com/docs/getting-started/introduction
• Rendering modes: https://nuxt.com/docs/guide/concepts/rendering
• How Nuxt works: https://nuxt.com/docs/guide/going-further/internals
• TypeScript with Nuxt: https://nuxt.com/docs/guide/concepts/typescript
• VS Code extensions for Nuxt: https://masteringnuxt.com/blog/the-best-vscode-extensions-for-nuxt-developers