Recently I've fallen in love with Vue.js's single file components. It's so much nicer to have a component's template and styles close to each other, and I'm finding I write a lot fewer bugs now that it's so easy to componentise part of a page and use it in multiple places.
I'm wondering if I could extend this single-file component structure to generating static HTML pages, with no Vue involved.
For example, say I want to have a page that has a main "content" div containing a header, a section, and a footer. Using Vue.js, I can create 'header', 'section', and 'footer' components, and use JavaScript to have them instantiated after the page loads. Because each part of the page is in its own component, there's no chance of CSS in one component affecting another, and I have a much cleaner tree of files to edit.
However, this seems a little wasteful, as these components aren't actually interactive: I'm not using v-model or v-bind or v-on, I'm just using Vue.js because it lets me separate pieces of pages out. It also means my page won't work at all if JavaScript is disabled, since every single element (save the main content div) is dependent on Vue being available.
So is there any way I can compile .vue files, not to a page that loads these components at runtime using Vue.js, but to separate HTML and CSS files that render without any JavaScript?
Ideally, I'd have a component 'greeting.vue':
<template>
<p class="greeting">Hello!</p>
</template>
<style scoped>
.greeting { color: red; }
</style>
Used within a page:
<html>
<body>
<greeting></greeting>
</body>
</html>
And these would compile into two files: an HTML page with the template compiled and pre-rendered, and a CSS file that contains the styles for all the components. I could then include the generated stylesheet in the page, and all the components would be styled.
I've looked at vue-loader and vueify, but I can't understand what they're doing since I haven't used Webpack or Browserify enough.
Is what I'm trying to do possible?
