JeffreyWay/App.js

## App.js
import AppButton from "./AppButton.js";

export default {
    components: {
        'app-button': AppButton
    }
};

## AppButton.vue
export default {
    template: `
        <button
            :class="{
                'border rounded px-5 py-2 disabled:cursor-not-allowed': true,
                'bg-blue-600 hover:bg-blue-700': type === 'primary',
                'bg-purple-200 hover:bg-purple-400': type === 'secondary',
                'bg-gray-200 hover:bg-gray-400': type === 'muted',
                'is-loading': processing
            }"
            :disabled="processing"
        >
            <slot />
        </button>
    `,

    props: {
        type: {
            type: String,
            default: 'primary'
        },

        processing: {
            type: Boolean,
            default: false
        }
    }
}

## index.html
<!doctype html>
<html lang="en" class="h-full">
<head>
    <meta charset="UTF-8">
    <title>Episode 5: Extract Components to Their Own Files</title>
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @keyframes spinner {
            to {transform: rotate(360deg);}
        }

        .is-loading { color: transparent; }

        .is-loading:before {
            content: '';
            box-sizing: border-box;
            position: absolute;
            top: 50%;
            left: 50%;
            width: 20px;
            height: 20px;
            margin-top: -10px;
            margin-left: -10px;
            border-radius: 50%;
            border: 2px solid #ccc;
            border-top-color: #000;
            animation: spinner .6s linear infinite;
        }
    </style>
</head>

<body class="h-full grid place-items-center">
    <div id="app">
        <app-button :processing="true">Submit</app-button>
    </div>

    <script type="module">
        import App from "./js/components/App.js";

        Vue.createApp(App).mount('#app');
    </script>
</body>
</html>
	import AppButton from "./AppButton.js";

	export default {
	components: {
	'app-button': AppButton
	}
	};
	export default {
	template: `
	<button
	:class="{
	'border rounded px-5 py-2 disabled:cursor-not-allowed': true,
	'bg-blue-600 hover:bg-blue-700': type === 'primary',
	'bg-purple-200 hover:bg-purple-400': type === 'secondary',
	'bg-gray-200 hover:bg-gray-400': type === 'muted',
	'is-loading': processing
	}"
	:disabled="processing"
	>
	<slot />
	</button>
	`,

	props: {
	type: {
	type: String,
	default: 'primary'
	},

	processing: {
	type: Boolean,
	default: false
	}
	}
	}
	<!doctype html>
	<html lang="en" class="h-full">
	<head>
	<meta charset="UTF-8">
	<title>Episode 5: Extract Components to Their Own Files</title>
	<script src="https://unpkg.com/vue@3"></script>
	<script src="https://cdn.tailwindcss.com"></script>
	<style>
	@keyframes spinner {
	to {transform: rotate(360deg);}
	}

	.is-loading { color: transparent; }

	.is-loading:before {
	content: '';
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	margin-left: -10px;
	border-radius: 50%;
	border: 2px solid #ccc;
	border-top-color: #000;
	animation: spinner .6s linear infinite;
	}
	</style>
	</head>

	<body class="h-full grid place-items-center">
	<div id="app">
	<app-button :processing="true">Submit</app-button>
	</div>

	<script type="module">
	import App from "./js/components/App.js";

	Vue.createApp(App).mount('#app');
	</script>
	</body>
	</html>