How to use layouts and pages in Nuxt

In how to get started with nuxt we started down the road of getting familiar with Nuxt. We also started down the road of generating a simple project in Nuxt.

Nuxt is a powerful framework built on top of Vue that simplifies the development of universal (server-side rendered) and single-page Vue applications. One of the key features that make Nuxt highly effective is its robust and intuitive file-based routing system, which includes the concepts of Layouts and Pages.

Pages and Layouts in Nuxt are key components that contribute to the framework's powerful and structured approach to building applications. Pages are Vue components that define the routes of your application, offering a straightforward way to set up different views and handle routing dynamically. Layouts, on the other hand, act as templates for your pages, enabling you to create consistent structures and designs across different parts of your application.

By utilizing layouts, you can define common elements such as headers, footers, and sidebars that multiple pages can share, enhancing code reusability and maintainability. Together, Pages and Layouts streamline the development process, making it effortless to create organized and cohesive web applications.

What are Layouts in Nuxt

In Nuxt, layouts serve as a foundational template mechanism that allows developers to define a consistent structural framework for pages across their application. Layouts facilitate the centralized management of recurring components and design elements, such as headers, footers, navigation bars, and sidebars, ensuring that the look and feel across different pages remain unified and coherent.

Key features of layouts in Nuxt

1. Default Layout:
2. Custom Layouts: You can create custom layouts for different sections or types of content in your application. For example, you might have an admin section with its own unique layout (layouts/admin.vue), separate from the main user-facing layout.
3. Defining Layouts: Layouts are defined in the layouts directory at the root of your Nuxt project. Each layout is a Vue component that includes the <slot /> component, which serves as a placeholder for the page content.

Here’s an example of a simple layout:

   <template>
     <div>
       <header>My App Header</header>
       <slot />
       <footer>My App Footer</footer>
     </div>
   </template>

The <slot /> component is important when it comes to building Nuxt Layouts. <slot /> identifies as the placeholder for the code we put in. On every page we create, that makes use of this layout, will have the Header at top and the Footer at the bottom. In the middle, where the <slot /> is present, is where you will view the layout of that particular page you’re on.

4. Applying Layouts to Pages: You can specify which layout to use for a particular page by setting the layout property in the page component. If no layout is specified, the default layout is applied.

Benefits of using layouts in Nuxt

• Consistency: Layouts ensure that UI elements common to multiple pages are consistent throughout the application.
• Reusability: By defining common elements in layouts, you avoid repetition and reduce the effort needed to manage these elements across different pages.
• Maintainability: Centralizing shared components within layouts simplifies updates and maintenance. Modifications made in a layout will automatically propagate to all pages using that layout.
• Separation of Concerns: Layouts facilitate a clear separation between the structural design and individual page content, enhancing readability and organization of the codebase.

By leveraging layouts effectively, you can build robust, maintainable, and visually unified applications with Nuxt, significantly streamlining the development process and improving the overall user experience.

How to create a new layout

In Getting started with Nuxt we introduced the Nuxi command-line interface (CLI) tool for Nuxt.js that simplifies the process of creating, developing, and deploying Nuxt.js applications by providing a suite of commands to streamline various project tasks and configurations. This is what we will use to generate our initial layout.

To generate your layout, you can use the following command in the root of your project directory:

nuxi add layout default

Once the command has completed, you will notice a new layouts directory and new vue component has been created in your project directory:

.
├── app.vue
├── layouts
│ └── default.vue
├── nuxt.config.ts
├── package.json
├── public
│ ├── favicon.ico
│ └── robots.txt
├── README.md
├── server
│  └── tsconfig.json
├── tailwind.config.ts
├── tsconfig.json
└── yarn.lock

If you inspect the new vue component at this stage it will be really simple, containing only the basics of what you need for a view.

<script setup lang="ts"></script>

<template>
  <div>
    Layout: default
    <slot />
  </div>
</template>

<style scoped></style>

The key concept to understand within this file, is as we have mentioned earlier in this post is the <slot /> component. The <slot/> he component is used within Vue.js components to create flexible and reusable layouts by allowing parent components to pass and inject custom content into predefined placeholders within child components.

We'll delve deeper into the <slot /> as we go through this article but for now, we'll keep it simple, but for now it is essential to understand the benefits of the <slot /> component.

Benefits of slot component

• Reusability: Enables the creation of highly reusable and customizable components by allowing different content to be passed into predefined slots.
• Flexibility: Allows for flexible component layouts where the parent component determines how the child component is populated, promoting a clean separation of concerns.
• Scalability: Supports multiple named slots to facilitate complex and scalable component structures, accommodating various use cases within the same component.
• Maintainability: Simplifies component maintenance and improves code readability by avoiding hard-coding of content, making it easier to update and manage.
• Dynamic Content: Provides a way to inject dynamic content into components, enhancing interactivity and responsiveness in applications.
• Consistent Styles: Promotes consistent styling across different parts of the application by centralizing the layout in reusable components while varying the content as needed.

What are Pages in nuxt

In Nuxt, "Pages" refer to Vue single file components that define the various views of your application. Each page component typically corresponds to a specific route in your application, enabling a seamless URL-based navigation system.

Benefits of pages

• Automatic Routing: Nuxt automatically generates the routing configuration based on the file structure within the pages directory. Each .vue file corresponds to a unique route.
• File-Based Routing: The routes are created based on the folder and file names within the pages directory, which makes defining routes simple and intuitive.
• Dynamic Routes: By using dynamic file names prefixed with an underscore (e.g., _id.vue), developers can create dynamic routes that accept parameters.
• Nested Routes: Nested directories within the pages directory create nested routes, facilitating the creation of complex, hierarchical route structures.
• Layouts and Middleware: Pages can utilize layouts to share common structure and design across multiple views, and middleware to execute code before rendering the page.
• Static and Dynamic Rendering: Pages in Nuxt.js can be statically generated or server-side rendered, providing flexibility in how content is delivered.

pages offer a powerful and easy-to-use method for managing the different views and routes in a web application, enhancing both development efficiency and user navigation experience.

How to create pages in Nuxt

We can create pages in Nuxt in similar fashion as we did with Layouts, by using nuxi. So we can use the following command to generate our first page.

nuxi add page index

After the command complete you will notice a pages directory with a new index vue component has been created.

.
├── app.vue
├── layouts
│   └── default.vue
├── nuxt.config.ts
├── package.json
├── pages
│   └── index.vue
├── public
│  ├── favicon.ico
│  └── robots.txt
├── README.md
├── server
│   └── tsconfig.json
├── tailwind.config.ts
├── tsconfig.json
└── yarn.lock

If we take a look at the index component we will see that at this stage the contents are relatively simple and it is ready for us to start coding

<script setup lang="ts"></script>

<template>
  <div>
    Page: index
  </div>
</template>

<style scoped></style>

If you're following along, from the Getting started with Nuxt or the How to add tailwindcss to nuxt guides, you may already have the really simple Hello World project created and are using that to follow along. If so, if you try run the application now by using yarn dev, or whatever your preferred package manager is, you will see an error message similar to the below.

This happens because Nuxt has detected that you have a layout or Pages folder, but you are missing one vital bit of
configuration. Lets go ahead and fix this, by navigating to your app.vue and add the following code to the file.

<template>
  <div>
    <NuxtRouteAnnouncer/>
    <nuxt-page></nuxt-page>
  </div>
</template>

What is the Nuxt Page component

The <nuxt-page> component in Nuxt acts as a placeholder for rendering the content of the current route. It is
primarily used within layout components to dynamically display page components based on the active route.

Benefits of Nuxt Page component

1. Dynamic Content Rendering: The <nuxt-page> component dynamically renders the page component that matches the
   current route, ensuring that the correct content is displayed to the user.
2. Layout Integration: It is typically used within layout components to provide a consistent structure
   (such as headers, footers, and sidebars) across different pages while switching the main content area.
3. Simplified Routing: By centralizing the routing logic, simplifies the process of swapping out
   content when routes change without the need for manual component management or re-rendering.
4. SEO Friendly: Since Nuxt supports server-side rendering (SSR) and static site generation (SSG), the use of
   <nuxt-page> plays a critical role in ensuring that page content is correctly rendered and indexed by search engines.

We now need to configure our Page component to use our Layout component. To do this, navigate to your index.vue
component.

There are a couple of ways to configure your pages to use the layout, for the purpose of this article and to keep things
simple for the moment we will make use of the <nuxt-layout> component.

What is the Nuxt Layout component

The <nuxt-layout> component in Nuxt is used to specify different layout structures for your pages. Layouts in Nuxt
help maintain a consistent look and feel across multiple pages by sharing common elements such as headers, footers,
and sidebars.

• Dynamic Layout Switching: Using the <nuxt-layout> component, you can dynamically switch layouts based on
  specific conditions or route metadata, allowing different pages to have different layouts
• Default Layout: By default, if no specific layout is defined for a page, Nuxt uses the default.vue layout.
  You can create additional layouts in the layouts directory and assign them to specific pages.

Run the application

Now if we run our application, we should see the amazing result, similar to the below, which will prove nothing more than
our Page and Layouts are working together. As underwhelming as the results appear, they prove that nuxt has simplified the process of being able to separate the development of layouts and pages

Conclusion

We've covered quite a lot of ground in this post, and probably in a lot more detail than absolutely necessary, but we've learned how quite a number of Nuxt features work together to deliver most of the things you'll need when building apps, enabling you to focus on the task of just building your app.