Skip to content

Instantly share code, notes, and snippets.

@JeffreyWay

JeffreyWay/AppButton.js

Last active May 26, 2022 16:50
Show Gist options
  • Save JeffreyWay/e9ac095fc10d780edaa6ab7316ced9e9 to your computer and use it in GitHub Desktop.
Save JeffreyWay/e9ac095fc10d780edaa6ab7316ced9e9 to your computer and use it in GitHub Desktop.
Download ZIP
Learn Vue: Step by Step, Episode 4, One Vue Component Per File - https://laracasts.com/series/learn-vue-3-step-by-step/episodes/5
Raw
AppButton.js
export default {
template: `
<button class="bg-gray-200 hover:bg-gray-400 border rounded px-5 py-2 disabled:cursor-not-allowed" :disabled="processing">
<slot />
</button>
`,
data() {
return {
processing: true
};
}
}
Raw
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>
</head>
<body class="h-full grid place-items-center">
<div id="app">
<app-button>Submit</app-button>
</div>
<script type="module">
import AppButton from "./js/components/AppButton.js";
let app = {
components: {
'app-button': AppButton
}
};
Vue.createApp(app).mount('#app');
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment