To follow along with this tutorial, you should have an understanding of JavaScript and Vue.js and experience using a text editor, such as VS Code. Unlike backend developers, most frontend developers find Pug frustrating to write in and maintain because it’s white space-sensitive, which means it uses indentation to determine which tags are nested inside each other. js for templating since it compiles down to HTML. Pug.js is frequently used with backend technologies such as Express. Using Pug.js as a preprocessor for your Vue.js templates makes it much easier to migrate existing projects to take advantage of Vue’s reactivity features. Any valid HTML is also a valid Vue.js template. Most backend developers choose to use Pug with Vue.js because it’s much easier to implement and read and doesn’t require a whole lot of configuration.

Not just for web interfaces, Vue.js is also used both for desktop and mobile app development with the Electron framework. Vue.js is a progressive framework for JavaScript that is used to build web interfaces and single-page applications. Like any JavaScript templating engine, Pug.js supports writing reusable HTML code and rendering dynamic data. Pug.js, formerly known as Jade, is a templating engine designed to render HTML in server-side technologies such as Node.js.

In this Pug.js tutorial, we’ll show you how to integrate Vue.js into a backend application using Pug as a templating engine.įor an introduction to Pug.js, check out “ Getting started with Pug.” What is Pug.js? Pug.js tutorial: A beginner’s guide with examples Wisdom Ekpot Follow A student of Ibom Metropolitan Polytechnic studying computer engineering, Wisdom has been writing JavaScript for two years, focusing on Vue.js, Angular, and Express.js.

Example pug template