undefined | Better HN

0 pointsamelius8y ago0 comments

> The official website includes a way to use it by just including a script from the CDN, on the "Get Started" page.

But how about an explanation of how to compile the .vue files (used in the examples) to JS? Or how to do without them?

0 comments

4 comments · 3 top-level

ohceecho8y ago· 1 in thread

You mean the examples in the link I posted? Those are just javascript and HTML, there's nothing special about them.

Just put that on an HTML file and run it in a browser. No need for any tool other than a text editor.

To compile .vue files you have to use vue-cli (linked on the "Get Started" page), or some third-party tool (instructions here: https://vuejs.org/v2/guide/deployment.html).

ameliusOP8y ago

Ok, upon a second look, it seems that those directives are translated in-place in the HTML document, so indeed I could have coded the examples in HTML. But it feels a bit like magic.

Still, I wonder, how do I make components? Are they also encoded in the DOM tree? It feels a bit strange to encode templates in the actual DOM tree, even without using them.

icegreentea28y ago

My understanding is that if you're using just plain vue.js (without any tools or npm magic), you're not gonna be able to use single file components.

You can "do without them" but going to .vue files that you like, and splitting them back up into their HTML and JS bits and copying and pasting them into places you like.

vue really isn't at its full potential without using webpack/browsify. But I understand not wanting to use it.

For example, we've been sprinkling vue into an existing jquery+bootstrap internal application. It's flask/python, so we just went in and split up things that would be a .vue component into HTML snippets that we can embed using our templating engine, and JS components that you just src include. Now we have bare bones reusuability (no composability though). We'll probably have to swallow the bullet and just figure out webpack/browsify.

baby8y ago

You don't even use .vue files if you follow the tutorials, this is for an advanced usage.

j / k navigate · click thread line to collapse