Skip to content

Instantly share code, notes, and snippets.

@kentliau

kentliau/AppButton.js

Created May 26, 2022 16:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kentliau/5dccb5f4790d8feaedd5440b2c378579 to your computer and use it in GitHub Desktop.
Save kentliau/5dccb5f4790d8feaedd5440b2c378579 to your computer and use it in GitHub Desktop.
Download ZIP
Quick Vue and Tailwind Template
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 3: Lists and Computed Properties</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