Is it possible to pass data from a .js file to a .pug file without using Node? I'm using a very basic setup where I run and bundle my project with Parcel.js. I'm not using a Node.js backend with Express and I do not aspire to. I simply want to be able to fetch data in my app.js-file and display it using Pug. But even this setup does not show the name-variable on the page:
index.pug
doctype html
html(lang="en")
head
title Homepage
body
p My name is #{name}
script(type="module", src="./app.js")
app.js
const name = "Holy Kiwi";
package.json
{
"name": "frontend-javascript-edhub-pug",
"version": "1.0.0",
"main": "app.js",
"scripts": {
"start": "parcel index.pug",
"build": "parcel build index.pug"
},
"devDependencies": {
"@parcel/transformer-pug": "^2.0.0",
"parcel": "^2.0.0",
},
"dependencies": {
"pug": "^3.0.2"
}
}
Other things I've tried that didn't work
app.js script: export const name = 'Kiwi';;- const name = import { name } from './app.js';I really hope you can help me out!
As you have the pug package installed, you can use the renderFile method:
const pug = require("pug");
const html = pug.renderFile("./path_to/index.pug", { name: "Holy Kiwi"});
The above produces the following string in the object html, and you can "display" it according to your needs:
<!DOCTYPE html><html lang="en"><head><title>Homepage</title></head><body><p>My name is Holy Kiwi</p><script type="module" src="./app.js"></script></body></html>