DEV Community

Using Includes/Partials In PugJS

Nathan Kratzmeyer on September 11, 2019

This post is the fourth in a short series on using the PugJS view engine with NodeJS and ExpressJS. In the last part, we covered using PugJS to dis...
Collapse
 
thehomelessdev profile image
Santiago Rincón

Hello. This is well explained, and I have a question.

Let's say I want to dynamically change a tag when I include a pug file. Is it possible? For example, I have this form which I want to use in two different pages in my project but at home, it is in a modal. Its title is inside .modal-header with the tag .modal-title, The form fields are inside .modal-body and the submit button, inside .modal-footer.

Now, I need to load the same form in another page but without the modal tags. How can I do that?

Collapse
 
nkratzmeyer profile image
Nathan Kratzmeyer

I didn't cover this in my posts but I think a mixin is what you'd want to use in this case. Pug mixins are documented here. If you have troubles figuring out how to make that work, I'd be glad to write up another article showing a scenario similar to yours.

Another alternative would be to just use client-side JavaScript to add/remove CSS classes from your elements.

Hope that helps!

Collapse
 
thehomelessdev profile image
Santiago Rincón

Did it.

I created a mixin for the modals (Actually I'm using two with different forms, I pass the params I need and it includes the forms. Even though it would be great if you write another article about it. Thank you.

Thread Thread
 
nkratzmeyer profile image
Nathan Kratzmeyer

Let me see what I can work up!

Thread Thread
 
nkratzmeyer profile image
Nathan Kratzmeyer

Done! Its quick & dirty but hopefully you'll find it useful.

Thread Thread
 
thehomelessdev profile image
Santiago Rincón

Thank you. I'll share with you my solution.

Collapse
 
thehomelessdev profile image
Santiago Rincón
Thread Thread
 
nkratzmeyer profile image
Nathan Kratzmeyer

Did you check out my last post?
dev.to/nkratzmeyer/using-mixins-wi...
You can use the implicit attributes of a mixin to set attributes (including classes, id's, etc) on elements inside the mixin.

Thread Thread
 
thehomelessdev profile image
Santiago Rincón

Yeah! I checked it but when I wrote this I had not read your post. I will implement it following your post. Thank you.

Collapse
 
thehomelessdev profile image
Santiago Rincón

Thank you so much. I'm going to try it. I'll let you know.

Collapse
 
corsica2a profile image
Corsica2A

Hello,

I'm a student and I'm looking for somebody to help me about 2 problems with pugjs.
Please, could you help me ? I have 2 problems... and I have to find a solution before saturday...
First, I want to display a picture for specific days. Moreover, I'll like creating a calendar.
It will be very kind if you could help me.

Best regards