What is includes in Pug View Engine ?

In Pug, "includes" are a way to modularize and reuse code by importing separate Pug files into a main Pug file. This helps in organizing code more efficiently and reduces duplication of code by allowing you to include common sections or components across multiple pages easily. In simple words, Includes allows you to insert the contents of one Pug file into another.

How Do Includes Work in Pug?

The syntax for including a file in Pug is straightforward. You use the include keyword followed by the path to the file you want to include. Pug then processes these files during compilation and includes their content in the main file.

include filename_withpath

Prerequisites

• HTML / CSS
• Pug
• Node.js / Express.js

Steps to Setup Pug Template Engine

Step 1: Create a Node.js application using the following command:

npm init

Step 2: Install required Dependencies

npm i pug express

Project Structure:

👁 Screenshot-2024-03-19-121957

The updated dependencies in package.json file will look like:

"dependencies": {
 "express": "^4.18.2",
 "pug": "^3.0.2"
}

Example: This example demonstrate the use of Include keyword.

Step 4: To run the application use the following command

node index.js 

Output: Now go to http://localhost:3000 in your browser:

👁 pug-include

Benefits of Using Includes in Pug

• Modularity: Includes encourage modular coding practices by breaking down complex templates into smaller, manageable parts.
• Reusability: Code reusability is promoted as you can include common components like headers, footers, or navigation menus across multiple pages.
• Maintainability: Updates or changes to included files automatically reflect in all files where they are included, reducing maintenance efforts and potential errors.
• Organization: Includes help in organizing code by separating concerns and improving the overall structure of your project.