Vue.js + Parcel.js SFC Components

README.md

About

Vue and Parcel are two great relatively new way to develop that have gotten me very excited about the future of front-end engineering.

That said, some features start to fall short as you start to scale, and separation of concerns becomes an issue. This is my currently proposed model on how to structure the components in a way that still allows for HMR to function as usual.

These files are meant to be in the same folder.

index.scss

#example-component {
    text-align: center;

    h1 {
        color: steelblue;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        letter-spacing: -3px;
        font-weight: 100;
    }

    #name-form {
        margin: 20px 0;

        input {
            font-size: 27px;
            padding: 10px;
            border-radius: 5px;
            margin: 0 5px;
        }
    }

    #button-container {
        button {
            font-size: 24px;
            border-radius: 3px;
            padding: 10px 20px;
        }
    }
}

index.vue

<template>
    <div id="example-component">
        <form id="name-form">
            <input type="text" v-model="firstName" placeholder="First Name">
            <input type="text" v-model="secondName" placeholder="Second Name">
        </form>
        <h1>Welcome, {{ myFullName }}!</h1>
        <div id="button-container">
            <button @click=sayHello>Greet</button>
        </div>
    </div>
</template>

<script>
    import { data, computed, methods } from "./script.js";
    export default { data, computed, methods }
</script>

<style lang="scss" scoped>@import "./";</style>

script.js

const
    data = () => ({
        firstName: "Generic",
        secondName: "Person"
    }),

    computed = {
        myFullName: function() { return `${this.firstName} ${this.secondName}` }
    },

    methods = {
        sayHello: function() {
            console.log(`Hello, ${this.myFullName}!`);
        }
    }

export { data, computed, methods }