Vite

Vite is a bridge between Twig and Vite.js

free

Allows the use of the Vite.js next gen­er­a­tion fron­tend tool­ing with Craft CMS

Vite generated tags

Vite is a bridge between Craft CMS/​Twig and the next gen­er­a­tion fron­tend build tool Vite.js

Vite allows for Hot Mod­ule Replace­ment (HMR) of JavaScript, CSS, and Twig (even through errors) dur­ing devel­op­ment, as well as opti­mized pro­duc­tion builds.

Vite sup­ports both mod­ern and lega­cy bun­dle builds, as per the Deploy­ing ES2015+ Code in Pro­duc­tion Today article.

Vite also han­dles gen­er­at­ing the nec­es­sary <script> and <link> tags to sup­port both syn­chro­nous and asyn­chro­nous load­ing of JavaScript and CSS.

Addi­tion­al­ly, Vite has a caching lay­er to ensure opti­mal performance.

Related articles