When comparing pug (Jade) vs Vue.js, the Slant community recommends pug (Jade) for most people. In the question“What are the best JavaScript templating engines?”pug (Jade) is ranked 1st while Vue.js is ranked 3rd. The most important reason people chose pug (Jade) is:

One of the distinguishing features of Jade is its clean syntax. Elements are created with CSS selector syntax which makes the template consistent with your style sheet and JavaScript element selector library.

Pros

Pro

Clean syntax

One of the distinguishing features of Jade is its clean syntax. Elements are created with CSS selector syntax which makes the template consistent with your style sheet and JavaScript element selector library.

Pro

Easy to read, powerful mixins

Jade supports mixins. These not only make your templating job easier but are also super-easy to read.

Pro

Logic done in JavaScript

The logic in Jade is done with native JavaScript. This means there's less of a learning curve and it'll be easier to get other developers up to speed.

Pro

Identation reflects nesting

With Jade you can quickly overview the hierarchy of a template.

Pro

Easy sublayouts using block and extends

By using the extends and block keywords, sublayouts can be made with intuitive syntax.

Pro

High performance on the server and client side

Apart from their functionality all template engines need to be efficient in terms of the time they require to render a page. Jade beats most of its competitors in this area, it is highly optimized to deliver good performance on both the server and client ends.

Pro

Preprocessor support

Filters make it easy to embed compiled languages such as coffeescript or markdown directly into the template. A filter will allow you to keep your inline code and content consistent with the rest of your codebase so you can continue using your prefered language with your outputted HTML.

Pro

Compiles to JavaScript

Jade compiles to a JavaScript function that produces the ultimate output. This interim format makes it useful for embedding in conditions where you're trying to save space or decrease processing requirements.

Pro

Allows writing inline JavaScript

Pro

Reuse code in other languages

In addition to JavaScript, you can reuse Jade templates in Scala, PHP, Ruby, Python and Java.

Pro

Interactive documentation

There's an interactive documentation available here that allows you to play around with code examples and watch the results in real time.

Pro

Use Markdown for readable markup

Jade is awesome at templating structural markup, but that's not all Jade is awesome at. It also allows you to use markdown within your template itself which will render to a beautiful HTML page.

Pro

Can be used with any front-end stack

Vue can easily be integrated with other front-end libraries. This makes it an extremely versatile tool and it's easy to fix its shortcomings or missing features by just plugging in another library.

Pro

Lightweight

Vue.js weighs in at 16kb min+gzip.

Pro

Single file component

Very useful.

Pro

Responsive server-side rendering

Since most of the mainstream server-side rendering implementations are synchronous, they can block the server's event loop when the application is complex.

Vue implements streaming server-side rendering, which allows you to render your component, get a readable stream and directly pipe that to the HTTP response. This allows you to have a responsive server and decreases the time your users have to wait before they get your rendered content.

Pro

Supports inline templating

Although you can build components in JavaScript files, you can also use inline handlebars-like templating in your HTML views where simplicity is often a more sane choice.

Pro

Support for both templates and JSX

You can choose to use either a templating language, or if you feel it's necessary to drop on a lower virtual-dom level, you can use JSX. This is simply done by replacing the template option with a render function.

Or alternatively, you can embed functions inside templates by using the <render> tag.

Pro

Can be made even lighter

Since the template-to-virtual-DOM and compiler can be separated, you can compile the templates in your machine and then deploying only the interpreter which is 12KB minified and gzipped.

Pro

Vuex store, events system

Pro

CLI and Webpack integration

Pro

SEO friendly

Starting with Vue 2.0, Vue supports server-side rendering. This helps with SEO a lot, since the views are rendered directly on the server, which are indexed by search engines.

Pro

Reactivity system

Pro

VueRouter

Cons

Con

Cannot copy/paste examples from the internet

Examples from CSS frameworks like Bootstrap are never utilizing the Pug syntax, which means that you cannot ever copy/paste something to quickly see how it would look or if it works. You would have to convert the HTML to Pug first.

Con

Unforgiving in case of indentation errors

The structure is entirely determined by the indentation. That means that indentation errors will ruin the end result, often without an easy way to find the error. Indentation errors are easily introduced by copy-pasting, by rearranging code and by working in a team where not everyone uses the same indentation style. (E.g tabs vs. spaces.)

Poor typescript support

Alternative Products

Each month, over 1.7 million people use Slant to find the best products and share their knowledge. Pick the tags you’re passionate about to get a personalized feed and begin contributing your knowledge.