Vue: using templates from external file

Finally I used Browserify with partialify to require external files like css o js using node.js style (using require). See example at:

https://github.com/vuejs/vue-browserify-example

I prefer using a folder for each component than vueify aproach (an unique file for every component). Partialify give me more flexibility structuring my components and having css, js, html mixed in one file it's a bit confusing for editors like PHPStorm.

If you use laravel-elixir and the mix.browserify method everything you need come out of the box. So you can structure stuff like :

component.js

module.export = {
template: require('./templates/template.html'),
data: function(){
    return {
    text: "Hello World!"
    };
}
};

template.html

<h1>{{ text }}<h1>

Regarding .vue syntax, you can use https://github.com/vuejs/vue-syntax-highlight with php storm iirc. Using vueify/vue-loader is really handy, the hot-reload and scoped css features are really worth it, and it plays really well with pre-processor.

Thanks a lot @Hebilicious!

Any one know a way to use a blade template for the vue template so you would have:

module.export = { template: require('./templates/template.blade.php'),

and in the blade template we could access all the blade goodness like the csrf token etc?

@Hebilicious you are beautiful! and thanks for the information as well

@gocanto Sorry to burst your bubble but check this out

@dawiyo i figured lol.

If you using laravel-mix instead of elixir. In your .vue file using this.

component.vue

<template src="./template.html"></template>
<script src="./script.js"></script>
<style src="./style.css"></style>

Check the https://vue-loader.vuejs.org/en/start/spec.html