View profile

Converting Vanilla HTML to Vue

One of the core benefits of Vue is that Vue templates are just HTML. And developers are often given r
Converting Vanilla HTML to Vue
By Mastering JS Weekly • Issue #30 • View online
One of the core benefits of Vue is that Vue templates are just HTML. And developers are often given raw HTML and asked to “wire it up” with real data. Having to convert HTML your designer wrote into JSX is a painful experience.
The neat thing about Vue components is that you can wire up given HTML without modifying how the HTML appears by itself. For example, suppose you’re building an app that needs to display data about Pokemon, and a designer gave you the following HTML that shows a sample detail page for Charizard.

Simplified example, won't be on Dribbble anytime soon
Simplified example, won't be on Dribbble anytime soon
Using `v-bind` and the `v-text` directive, you can make the above HTML dynamic by just dropping in a small Vue script:
Now, the UI is wired up to display dynamic data
Now, the UI is wired up to display dynamic data
Even better, as far as your designer is concerned, the HTML is functionally equivalent. So your designer can continue to tweak the layout and the CSS, so long as they remember to put the correct `v-bind` and `v-text`.
Even better, you can separate out the HTML template entirely from your Vue code, and include it in your Webpack bundle using `raw-loader`. In other words, `raw-loader` can compile the below Vue code:
Require in a template as HTML
Require in a template as HTML
Into a working app using the below Webpack config:
Using raw-loader to import HTML templates
Using raw-loader to import HTML templates
So with a little help from Webpack, you can take an entirely separate HTML file that someone else is working on, and wire it up with dynamic data using Vue.
Most Recent Tutorials
Other Interesting Reads
Understand JavaScript Reduce With 5 Examples | www.thecodebarbarian.com
Let’s Build a Custom Vue Router | CSS-Tricks
Did you enjoy this issue?
Mastering JS Weekly

A weekly summary of our tutorials

If you don't want these updates anymore, please unsubscribe here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Powered by Revue