Vue template render without all the extra

Question

I have a very, very simple set of Vue components that all work. These are a simple addition on top of an existing C# app.

At the moment, these are .html files (brought into the app inside <script> tags) and .js files loaded by reference.

These all work, are very light weight, and I love it.

Now I want to compile the HTML for each component into a Vue render function, and the .js into one minified .js file.

The .js to .min.js is pretty standard, but I cannot figure out how to get the HTML to compile into the Vue render function. Everything I've found involves a LOT of overhead and running a web server which seems a massive overkill for an html->script transform, and I don't need a full web application spun up. I only need my existing, simple templates transformed to something more friendly for production than my long-form html templates getting dumped to the page.

I'm not entirely opposed to turning the .html+.js into .vue files, but just doing that doesn't seem to overcome my issue.

Will you completely against to use webpack for this job? webpack.js.org — Adriano
@Adriano I'm not opposed to using webpack, npm/webpack is probably the solution somehow, but the "big" vue webpack packages are way overkill - unless I'm wrong about how to use them. — Randy Hall
If you really need to stick a nail in the wall, sometimes what you need is just a hammer. — Adriano

tony19 tony19 · Accepted Answer · 2019-05-09T01:37:55

I cannot figure out how to get the HTML to compile into the Vue render function

To generate a render function from a Vue template string (e.g., read from an HTML file), you could use vue-template-compiler like this:

const compiler = require('vue-template-compiler')
const output = compiler.compile('<div>{{msg}}</div>')
console.log(output) // => { render: "with(this){return _c('div',[_v(_s(msg))])}" }

Everything I've found involves a LOT of overhead and running a web server which seems a massive overkill for an html->script transform

The "web server" you mention is provided by Webpack CLI, and is intended to faciliate development. You don't need to use the dev server. The article indeed describes several steps in manually setting up a project to build Vue single-file-components, but a simpler method is to use Vue CLI to automatically scaffold such a project.

Vue template render without all the extra

1 Answers