Skip to content

Nunjucks

Nunjucks es un motor de plantillas que nos permite usar JavaScript en las plantillas. Para usar Nunjucks en Express, necesitaremos instalar el módulo nunjucks:

bash
npm install nunjucks
npm install nunjucks

Y configurar express para usar Nunjucks como template engine:

js
const express = require('express')
const app = express()
const nunjucks = require('nunjucks')

nunjucks.configure('views', {
    autoescape: true,
    express: app
});
app.set('view engine', 'njk')
const express = require('express')
const app = express()
const nunjucks = require('nunjucks')

nunjucks.configure('views', {
    autoescape: true,
    express: app
});
app.set('view engine', 'njk')

Renderizar vistas

Una vez configurado el template engine, podemos enviar vistas al cliente con el método render:

js
app.get('/', (req, res) => {
  res.render('index', { mensaje: 'Hola mundo' })
})
app.get('/', (req, res) => {
  res.render('index', { mensaje: 'Hola mundo' })
})

En este ejemplo, estamos enviando la vista index al cliente, y estamos pasando un objeto con un mensaje. En la vista, podemos usar ese mensaje con la sintaxis de Nunjucks:

html
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>{{ mensaje }}</h1>
  <p>Mensaje desde index.njk</p>
</body>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>{{ mensaje }}</h1>
  <p>Mensaje desde index.njk</p>
</body>