Built in support for template engines

[marlonmarcello]

Is your feature request related to a problem? Please describe.
Yes. Trying to use anything but html for your markup doesn't quite work at the moment.
I've been trying to develop a Pug plugin and I got stuck.
There were a few tickets (#842 #528 #17 ) closed, but I don't think the issue is solved.
By making a plugin using transformIndexHtml you would still need an index.html. You can't have a structure like this for example:

_main.pug
index.pug << extends _main.pug
about/
  |-- index.pug << extends _main.pug
vite.config.js

Snowpack had a similar issue where the transformed files were not routed and they were able to fix it, any chance we could get some ideas from it?

Describe the solution you'd like
Being able to use template engines like handlebars, mustache or pug by just installing a plugin package or the engine package.

Describe alternatives you've considered
Couldn't really find a solution to this.

Additional context
I also made a demo repo if that helps.
Unfortunately templating seems to be something left behind by most tools. If all you wanna do is make a website that is mostly HTML and CSS you shouldn't need a huge JS bundle.
I would love to help make this happen, if anyone can point me in the right direction that would be much appreciated.

[yyx990803]

I don't really understand the use case. Vite is a front-end application dev server, server side templating engine support is out of scope.

In other words, server-side templating simply isn't what Vite is built for. You probably want to choose something else instead.

[davay42]

@yyx990803 The use case is the same as vitepress and other SSGs. It's a way to generate fast and SEO-proof website with multiple pages that have their rather complex scripts built with vite.

I fell in love with pug and stylus while working with SFCs in vite. But then I want to have just a couple of pages around my base app page? Think about about us and pricing pages. For now we can write them only with plain html and manually add to the multi-page list on the Rollup config. But imagine if we had an option to have a whole structure of templates with rather complex apps built just for each page. May be it's too much for one tool? 🤷‍♂️

I've played around with the transformIndexHtml() and could make pug templates somehow working, but finally moved to 11ty.js to make this work and use vite to build just the libs that will be manually included into those pages as scripts. So every tool does it's own job ) But may be once there will be that universal tool for vue 3. May be new Nuxt will do that?

[haikyuu]

@DeFUCC check markojs.com : it's a universal ui library that can work as a templating engine and client ui library.

[davay42]

@haikyuu Thank you for the advice! Looks nice! For now I've came up to 11ty.js for the task. Using some vanilla js for simpler tasks and vite for building more complex apps to import as scripts to dedicated static pages.

[lubomirblazekcz]

@yyx990803 any plans to revisit this? As @davay42 said there is an use case. I don't know if for example PostHTML would work with vite, to extend the limited functionality when Vite is used as vanilla html, css, js. Template engines are something that is not yet well documented or explored.

Ofcourse if other source format than .html could be used, .twig, .hbs, .pug that would be even better. Plugins could be done for that, as @marlonmarcello was trying to do.

For now I came to a workaround so that template files are builded separately from Vite into public folder and templates directory has to be added as ignored so reaload would work correctly. It's far from ideal, though :/

  server: {
      watch: {
          ignored: ['**/node_modules/**', '**/.git/**', '**/src/templates/**']
      }
  },

[Shinigami92]

@marlonmarcello

Reading the title as Built in support for template engines seems indeed wrong for me 🤔 and I need to agree with Evan here.

But I would like the possibility to have a <root>/index.pug (or <root>/index.<other-ext>) that can be feeded to vite.config.ts at least via plugin that then will be used as index.html entry.
If this is not possible right now, please feel free to open a new issue (feature request) for that 🙂

[lubomirblazekcz]

alexlafroscia/vite-plugin-handlebars#39 (comment) something similiar was discussed here couple of days ago, regarding different extention then .html

Agree that built-in support is not really what is needed, but better support so this can be done with plugins is.
Template engine plugins could be then added here https://github.com/vitejs/awesome-vite#plugins 🙂

[davay42]

I've just switched to vitepress and use pug in vue SFCs to build theme pages and also throw any of them to .md pages with vite-components. With windicss it's even cooler! For me it's the system I was looking for. 😘

[marlonmarcello]

I would've have settled for that too @evromalarkey . Just better support so I could finish the plugin I was trying to make.

From your reference to the handlebars plugin a solution seems to exist but kinda hacky.

[haikyuu]

The fastest templating engine: Marko can now be used with Vite.

[marlonmarcello]

@haikyuu that URL isn't working, any chance you still have that source?

[haikyuu]

@haikyuu that URL isn't working, any chance you still have that url

https://github.com/marko-js/vite

[oneezy]

@davay42 and everyone else; there's been a few projects created that attempts merging Vite + 11ty. These aren't perfect solutions but they're showing promise! I'm curious how Vitepress compares against 11ty.

Repo (I'm using this one)
https://github.com/fpapado/eleventy-with-vite

Eleventy Plugin (alpha stage but @Snugug is on it )
https://snugug.com/musings/eleventy-plus-vite/
https://github.com/Snugug/vite-plugin-eleventy

but...

What i really want to see is this

I can dream can't I @yyx990803 😃

[Shinigami92]

@oneezy What you are asking for seems like a new feature request than a comment on a closed issue.
But from my side I would like to say that every additional framework we add nativly to vite repo we need to officially also support it, and I think this is not in scope for vite.

Therefore a place like https://github.com/vitejs/awesome-vite is a better place for such templates and plugins.

[davay42]

@oneezy I'm fully into vitepress and it's an amazing all encompassing tool to build a modern web-site. No other frameworks needed. It's so simple and versatile that I even don't use any boilerplate and start every new project with just plain Layout.vue and extend it with any number of components (SSR and client-only). Check out my www.chromatone.center for example.

[Shinigami92]

@davay42 Could you repeat this in the other issue again?
It will go under in this issue.

Will lock this issue now 🙂