

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 Let's start by creating an h1 that says 'Hello, Pug'.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. Part of this is due to the fact that you don't have to worry about closing tags, which can help lead to much cleaner files. There are some other items that make it a little different when writing it, but the elements, attributes, and structure are all the same as standard HTML.Ĭreating markup for a webpage in Pug may feel a bit strange at first, but after a bit will start to feel pretty intuitive. The key to writing Pug is indentation because when Pug is compiled into HTML, the indentation is how it determines how to nest the elements. It has become a widely used templating engine for many websites, and for good reason: If you know how to write HTML, this will feel like a shorthand version of it. Pug, formerly known as Jade, released it's 1.0.0 version on Decemafter being in development for a few years. Today I will be talking about one of the most popular templating languages for Node.js applications, Pug.

These languages allow you to write HTML like structures while retaining the ability to insert variables and use logic within the structure. The engines used in the aforementioned tools are Twig, Blade, and Edge, respectively. A templating engine is a tool that a framework can use to assist in scaffolding a front-end for a website or webapp. If you've ever used something like Drupal, Laravel, or Adonis, you've likely encountered a template engine.
