With Vue Single File Components ( SFC ), we can use preprocessors such as Pug, Babel (with ES2015dules), and Stylus for cleaner and more feature-rich components. They also help you generate markup with loops based on conditions. These templating libraries basically help you render dynamic data from the backend on the frontend. If you’re from a PHP background you would be familiar with the Blade templating engine. If you have a bit of Nodejs SSR background, you would already be accustomed to templating libraries like Pug, Handlebars, EJS, etc. Here’s a good read you could check out to understand the differences between Server-side and Client-side rendered applications. SSR introduces you to a handful of templating engines that lets you render dynamic data from the backend in your views. You might be coming from an SSR (Server Side Rendering) background, where views are rendered from the server-side with their associated data.Īs opposed to Client-rendered applications where everything is rendered client-side.

Vue’s out-of-the-box support for preprocessors also adds to this easy learning curve. It’s already old news by now that Vue has a very small learning curve that allows any or almost anyone to jump right into learning with little or no hiccup. This post assumes you have beginner to intermediate JavaScript & Vue knowledge, have heard of, or have basic knowledge of preprocessors.

Vue pug template