Compile a “.vue” component in browser, with JS onl

Question

I'd like to compile ".vue" components (with contains html/js/css) into JS, but in browser side, without browserify/vuify/webpack or others ...

In a better world, i'd like to include my ".vue" component into my html app, like that, withoud need of compile things, server side:

<script type="vuejs/component" src="myComp.vue"></script>

It should be possible ?! no ? (And I can't imagine that no one got this idea, or have done it already)

Answer 1

In fact, it's possible with http-vue-loader :

https://github.com/FranckFreiburger/http-vue-loader

Answer 2

It doesn't make sense to compile in the browser when it's so much more efficient to just pre-compile your component locally instead of relying on a visitor's client to do it.

In fact, the answer above regarding vue-http-loader says it's only for use in development and links to this article: https://vuejs.org/2015/10/28/why-no-template-url/

With that said, I created a vue-cli template that lets you pre-compile .vue files into a single .js files you can use in the browser. The single JS file contains the template, script, and styles. It uses webpack, but it's super easy to run and watches your files as you edit them.

$ vue init RonnieSan/vue-browser-sfc my-project

Repo at: https://github.com/RonnieSan/vue-browser-sfc

Instructions are in the README.