Questions tagged [pug]
Pug (formerly known as Jade) is a robust, elegant and feature-rich template engine for Node.js.
6,374
questions
-1
votes
0
answers
14
views
I use pug template with nodejs and it doesn't allow me to use Swiper cdn link
Refused to load the script 'https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that '...
0
votes
0
answers
22
views
How to write an syntax highlight injection for vscode?
I am trying to write an injection grammar for pug to get JS and scss highlighting in the content of certain mixin calls.
//- Example Pug file
+module.
const myVar = {};
I'd like the contents to be ...
0
votes
1
answer
12
views
JS / PUG Populate selector from nested array
I have the following nested array of objects :
[entity{ name : "entity1",accounts [{name ="account1"}, {name ="account2"}]},
entity{ name : "entity2",accounts [{...
0
votes
0
answers
11
views
Placing an iframe in root file (pugjs file) in React
I am trying to use an iframe code within my react component. Obviously, this works:
export default function Newsletter({ page }) {
return (
<div className={`${styles.newsletter} newsletter-...
0
votes
0
answers
24
views
Why is my dynamic bootstrap table not working in PUG Vue?
So here is a example of section of vue code with a dynamic bootstrap table. This code works where if i click on a depart_time cell the datepicker element is activated.
<template>
<b-table :...
0
votes
1
answer
21
views
Page not opening node js
Hi everyone i am new to node js and creating a simple web e-comerse website using node js and a templating engine using PUG
I am following MVC so far for my shop routes everting is working fine but ...
1
vote
0
answers
20
views
TailwindCSS Media Queries Not Working in Pug Template
I'm facing an issue with TailwindCSS media queries when using them in a Pug template. The media query styles aren't being applied as expected.
The rendered HTML is:
<div id="caracteristica&...
0
votes
1
answer
33
views
Using Square Brackets in Class Names with Pug and Tailwind CSS
I'm trying to use both Pug and Tailwind CSS for a project. I encountered an issue when trying to utilize Tailwind's custom values syntax (using square brackets) in a Pug template.
I understand that h-[...
0
votes
0
answers
46
views
how do I wait for data to be fetched in javascript? [duplicate]
so i am fetching data from mongodb atlas and then store it in an array, then i pass it in pug , but issue here is what i think is that pug file is rendered before data could be fetched .
here is the ...
0
votes
0
answers
24
views
How using bootstarp styles with jade framework?
I use jade framework. In my jade file view.jade I have strings:
| #{mytext.text.slice(0, 30) + '...'} // The text in my table that needs to be displayed all the time
.tooltip-inner
| #{mytext....
0
votes
1
answer
37
views
Pug - Is there a way to get the output markup from a pug mixin as a escaped markup?
The idea is to have the possibility to use the same mixin used to build some componet for a project also to get the html output to use inside <code> tags to build a small documetation.
So here I ...
-1
votes
1
answer
37
views
HTML Pug how to send object id instead of name in post request form
I have the a Customer object which consist of id and name, ....etc, Im using the following code to show a drop down list of customers,
block content
div(class="container py-4")
form(...
0
votes
1
answer
21
views
how to fix csp bug with pug, sass, gulp
This is my project structure: enter image description here
My gulpfile.js :
const gulp = require("gulp");
const pug = require("gulp-pug");
const sass = require('gulp-sass')(require(...
0
votes
0
answers
21
views
kss-node multiple markup on page?
is there a way so show multiple markup on a page in kss-node? Like a overview page?
Normal:
// Whatever
//
// Lets show Whatever
//
// Markup: atoms/2.01.whatever/_2.01.1.whatever.html
//
// ...
0
votes
0
answers
71
views
How to fix Indent error in pug + Nuxt 3 + vite?
I have this error
when i did indent in template vue,
but without indent it work correct and i don't get the error
> > 2| WrapperGlobal
> -------^
> 3| v-container.fill-height
&...
0
votes
1
answer
45
views
Global interceptor, response mapping and library specific responses in NestJS
I'm trying to use "library-specific" response objects alongside a global interceptor in NestJS, but it's not working and as I understand from the documentation, this is expected:
Response ...
0
votes
0
answers
47
views
Jest for Angular with Pug throws "SyntaxError: Unexpected token '<'" at templateUrl
I'm changing a very large electron+angular+pug project to use Jest instead of Karma+Jasmine.
These are my package versions:
Node: 15.14.0
"@angular/cli": "11.2.10",
"jest"...
-1
votes
1
answer
24
views
how use setInterval in pug?
i want make a clock using pug and nodejs
node
let clock
function getClock() {
~
clock = `${hours}:${minutes}:${seconds}`;
}
app.get("/main", (req, res) => {
~
res.render(&...
0
votes
1
answer
16
views
is there a way to pass rendered variables from pug templates to client side JS files?
I am making a small project with Node.js, Express and Pug templates. I am passing data with res.render('template', {processedData}); to pug template where I have two graphs created with Chart.js. I ...
0
votes
1
answer
33
views
Pug cannot find installed Highlight.js JSTransformer filter
The documentation says I just have to install the filters via npm in order to use them.
If you want to be able to use filters in your Pug template, you would first make sure that these features are ...
0
votes
0
answers
91
views
Reference Error when Importing TypeScript Module into JS File
I am currently facing an issue while introducing TypeScript into a portion of my project. My project uses CommonJS for module management and Pug as a template engine. I'm attempting to import a class ...
0
votes
1
answer
27
views
Multiline blocks in tag interpolation
I'm using Pug templates to write articles in HTML and have run into issues with extremely long lines when interpolating tags into plain text. For example:
blockquote(cite='https://lwn.net/Articles/...
-1
votes
1
answer
37
views
Why is an empty space not being created by the period inside my grid-template-areas between two div's? [duplicate]
I have specified the areas for two div's labeled as class search1 and search2. They are the children of a div labeled with id searchContainer. Here is the CSS and Pug Template code used:
PUG Template ...
0
votes
1
answer
43
views
Missing jade/pug syntax highlightning and settings in visual studio community 2022 version 17.6.5
I recently updated my visual studio community 2022 to the latest version (17.6.5)
Now when I open any .pug file in my project visual studio uses the default editor (Common Language Editor Supporting ...
0
votes
0
answers
9
views
What way of fixing pug.js was not found althought i installed by "npm install -g pug" && "npm install -g pug-cli"
Even though I have the above two commands installed when I run code "pug index.pug --watch". it says not found pug. In addition, I change to use bash in the terminal but it too.
I tried to ...
0
votes
1
answer
27
views
Why is my GET request not working? Routing Issue in Node.JS
I am working on the Frontend Mentor challenge "Audiophile". I'm making it a full stack application and having some issues rendering pages that are not the home page. I suspect its a router ...
0
votes
1
answer
31
views
Form data is not getting saved in MongoDB and it shows no error
I am new to MongoDB & NodeJS, I created a form using PUG. So when I click on submit nothing really happens, I am not getting any error and my data is also not getting saved in the database. My ...
0
votes
0
answers
21
views
How to prevent gulp-pug from outputting entire pug content when there's an error
I'm using gulp to compile pug files to HTML. The issue is, if there's a syntax error, like bad indentation or duplicate attributes for example, it will output the entire PUG file content to the ...
-1
votes
2
answers
298
views
Vite not detecting changes (vue/pug)
Vite fails to detected changes in PUG files that are referenced by other PUG files. For example:
div
include ./pug/index-2.pug
The index-2.pug is placed next to index.pug, but Vite only detects ...
0
votes
1
answer
47
views
Looping over an array inside an if statement in Pug template
I have an each loop inside an if statement that refuses to work. I'm doing exactly the same thing with a different set of data which does work, and the only difference I can ascertain between the two ...
0
votes
2
answers
56
views
Pug is not correctly generating the HTML even with the correct pug indentation
I have the following code in Pug which generates the following HTML code:
- var n = 0
each street in streets
if n % 4 == 0
- n = 0
.w3-row-padding
...
1
vote
1
answer
62
views
Pug template not loading CSS on Mac in safari
Safari on Mac (Ventura 13.2.1) neither loads CSS nor favicon in combination with Pug.
Please help find a solution.
Error:
Unsafe attempt to load URL https://localhost:3000/img/icons.svg from origin ...
0
votes
0
answers
31
views
How can I render checkboxes based on dropdownlist value in my Pug index file using Node.js and Heroku server?
I have the following index.pug file in my Node.js app hosted on Heroku:
extends layout
block content
article.slds-card
.slds-card__header.slds-grid
header.slds-media.slds-media_center....
0
votes
0
answers
74
views
Absolute paths in pug template results in "Module not found" in webpack-dev-server
After I upgraded from html-loader 1.1 to html-loader 4.2 the absolute paths in my pug files gives me the following error:
Module not found: Error: Can't resolve '/js/app.bundle.2.1.8.js' in '/Users/...
0
votes
2
answers
82
views
Misplaced link and meta tags in Pug templates when using webpack (prismic cms)
I'm working on a project where I'm using webpack to bundle my assets and process my JavaScript files. The project uses Pug (formerly known as Jade) as the templating engine for generating HTML. ...
0
votes
1
answer
59
views
Radio button not deselecting in radiogroup because of wrapper element
I have created a component for radio buttons with custom styling and would like to group them. However when i use a v-for to render multiple radio buttons they do not deselect when another radio ...
0
votes
1
answer
101
views
How can I access button from pug template?
I can't use button in index.js from pug template.
I got this code in my pug template:
doctype html
html
head
meta(charset='UTF-8')
meta(http-equiv='X-UA-Compatible' content='IE=edge')
...
0
votes
0
answers
38
views
Sending user data to pug template
I' ve created middleware function which is supposed to send user data to pug template and according to this data it should display different features on the site if user is logged in or not.
exports....
0
votes
1
answer
123
views
Convert index.pug to Vue Component
I have a pug file called index.pug like so, also comprising tailwind css classes.
html(lang="en")
head
title Page title
meta(charset="utf-8")
meta(name=&...
0
votes
1
answer
41
views
Display MongoDB collection data using PUG (Error: Array Undefined)
I am trying to display the data from my "users" collection in my MongoDB but receiving an undefined error with the array.
In my user controller file, I have imported express, express.router ...
0
votes
1
answer
56
views
How to link pages in Webpack 5 + Pug?
I have a basic webpack template with pug-loader. I have an entry pug file. When I develop on dev server, I need working link to another page (also written in pug). How can I do that? Should I compile ...
0
votes
1
answer
40
views
How can I group a bunch of buttons in groups of 10s (in a div)?
div#container
each account in accounts
button #{account.stuff}
I want to group the buttons inside a div. Every div has to have 10 (or less if there's some left over).
I would ...
0
votes
1
answer
39
views
How to set the correct path to files connected via URL in SCSS
Problem with image/icon file paths connected in scss using:
background: url(../images/bg-blue.svg);
When setting outputPath in the plugin :
new PugPlugin({
pretty: true,
css: {
enabled:...
1
vote
1
answer
117
views
Webpack dev-server doesn't reload automatically with pug-plugin?
My dev-server doesn't reload automatically after I change the contents of my files. Could you please help me understand, what do I need to change in my config?
Here's my code:
module.exports = {
...
0
votes
0
answers
36
views
Hero element with translateZ applied is skewed to the right on Chromium browsers, but not on Firefox. How do I fix it?
body {
margin: 0;
padding: 0;
}
.wrapper {
max-height: 100vh;
overflow-y: auto;
perspective: 10px;
transform-style: preserve-3d;
}
.hero {
min-height: 100vh;
transform: translateZ(-...
0
votes
0
answers
17
views
Why is this schema not storing the drop-down values to MongoDB?
I'm trying to store branch, year, semester and subject to the database. But it only stores the value name. I added the value name just for testing purposes to know whether my schema is storing ...
1
vote
0
answers
35
views
Unexpected block head
extends base
include _reviewCard
block append head
script(src='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js')
link(href='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css' rel='...
0
votes
1
answer
52
views
Dynamically setting a default select option in Pug
I was wondering is it possible to set a default select option in pug dynamically without using JavaScript?
I am using Node.js + Express for my back-end and when I render a pug file, I also pass an ...
0
votes
2
answers
274
views
Uncaught ReferenceError: mapboxgl is not defined
I am getting below(link) error message in console., I had spend hours try to fix this but won't be able to track this issue. Can someone help me to fix this?
error image
I not able to display map on ...
0
votes
0
answers
575
views
Parcel -> error: unknown option '--out-dir' , error: unknown option '--out-file'
iam trying to use parcel and running these two commands
"watch:js": "parcel watch ./public/js/index.js --dist-dir ./public/js --out-file bundle.js",
"build:js": "...