Separate templates in vuejs using webpack

Question

I look with interest at VueJS. I saw documentation on defining resources for one component, but I would prefer to have template files separate from js files in my development environment.

I use Webpack, so I think it should be possible to put these separate resources together for use at runtime.

Has anyone had success setting up Webpack for this? I tried using a text loader to require html templates from inside js files, but then scoped css was ignored. It would be nice to be able to separate css too. The docs seem to prefer Browserify for this 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