Parcel: Pug Example

[musdy]

There seems to be Pug support, but it would have been great if there were any documentation about it. It will get the comers up and running much quicker. Thanks for all the great work!

[Hammster]

The parceljs page actually tells you how to handle any asset with parcel, this includes any type of asset from images to templates to scripts.

• Running parcel index.pug from a terminal or npm script

Import/require the pug file in your JS script

import pugFile from './templatepath/myPugFille.pug'

console.log(pugFile)

Linking from html:

<a href="./templatepath/myPugFille.pug">text</a>

Linking from pug:

a(href="./templatepath/anotherPugFile.pug")

or from your vue single file component:

<template lang="pug">
.mycomponent(v-if="displayEnabled") this is my {{dataOrPropsVariable}}
</template>

....

[DeMoorJasper]

An example has been provided, if this continues to be a docs issue, feel free to open up an issue here: https://github.com/parcel-bundler/website

[dogbot]

This example import pugFile from './templatepath/myPugFille.pug' is wrong.
It fails silently when first run.
Interestingly when you save the index.js file an error appears upon hot-reload.
Error: Cannot find module 'templatepath/myPugFille.pug'

My index.js reads:
~~~
import pugFileJS from './templatepath/myPugFilleJS.js'
console.log(pugFileJS)

import pugFile from './templatepath/myPugFille.pug'
console.log(pugFile)
~~~

index.html

~~~
...

THE JS FILE WAS NOT LOADED

THE PUG FILE WAS NOT LOADED

...
~~~

myPugFilleJS.js
~
let hi = "the JS WAS LOADED"
console.log(hi);
document.getElementById('jsfile').textContent = hi;
~~

myPugFille.pug
~
h1 Pug file reporting for duty!
~