Single File Components #2
Description
Something that would make me use StealJS over Webpack would be out-of-the-box full support for Vue's single file (.vue) components.
Documentation:
Example:
enterName.vue
<template>
<label class="name-entry">
Enter your name: <input type="text" v-model="name">
</label>
<div class="name" v-if="name">Your name is {{ name }}.</div>
</template>
<script>
module.exports = {
data: function () {
return {
name: ''
};
}
};
</script>
<style scoped lang="sass">
.name-entry
border: 1px solid #CCC
border-radius: 4px
.name
font-size: 18px
</style>The <template>, <script>, and <style> blocks can all accept a lang attribute, like so:
<template lang="markdown">
# An H1 with my {{ name }}
</template>This allows you to write your:
- Markup in HAML, Pug/Jade, Markdown, Etc.
- Scripts in JSX, TypeScript, CoffeeScript, ES2050 (or whatever)
- Styles in Sass, SCSS, Less, Stylus
Vue is designed to be incredibly easy, then you get to this level and you're kinda screwed because it takes you a decade to setup webpack to be able to do this. It's a great idea, but it's a pain to set up.