Converting Vanilla HTML to Vue

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.

Using `v-bind` and the `v-text` directive, you can make the above HTML dynamic by just dropping in a small Vue script:

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:

Into a working app using the below Webpack config:

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.