Separate templates in vuejs, using webpack

Question

I'm looking with interest at VueJS. I've seen the documentation about defining resources per component, but I would rather have template files separate from js files in my development environment.

I'm using Webpack so I'm thinking it should be possible to compile these separate resources together for use at run time.

Has anyone had any success in configuring Webpack to do this? I've tried using the text-loader to require html templates from inside my js files, but then the scoped css was ignored. It would be nice to have the option of separating the css too. The docs seem to favour Browserify for this kind of approach.

Answer 1

You can use the src attribute to split the component into multiple files.

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

Documentation