Single File Components

[TheJaredWilcurt]

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:

• https://vuejs.org/v2/guide/single-file-components.html

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.

[marshallswain]

This is already started. Check out steal-vue. It works well for development, but there is an issue with the styles not exporting properly in the build, which I haven't had time to investigate. I would love the help, though, if you're up for it.

https://github.com/icanjs/steal-vue

[TheJaredWilcurt]

@marshallswain
It's started but it hasn't been touched in 6 months and it still looks like it doesn't support .sass syntax?

[marshallswain]

@TheJaredWilcurt if you can get the steal-sass plugin working in your project, it should support .sass. The plugin works really well in development, but unfortunately I couldn't figure out how to get the styles to build, and finally gave up. So the plugin is basically not worth using, which is sad. Maybe you can take a crack at figuring out the missing styles in the build. If not, the only way to get .vue single file component support is to use either Webpack or Fusebox, which both have absolutely amazing plugins.