diff options
Diffstat (limited to 'kamon-status/src/components/HelloWorld.vue')
-rw-r--r-- | kamon-status/src/components/HelloWorld.vue | 65 |
1 files changed, 65 insertions, 0 deletions
diff --git a/kamon-status/src/components/HelloWorld.vue b/kamon-status/src/components/HelloWorld.vue new file mode 100644 index 00000000..d9e77ef3 --- /dev/null +++ b/kamon-status/src/components/HelloWorld.vue @@ -0,0 +1,65 @@ +<template> + <div class="hello"> + <h1>{{ msg }}</h1> + <p> + For a guide and recipes on how to configure / customize this project,<br> + check out the + <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>. + </p> + <h3>Installed CLI Plugins</h3> + <ul> + <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li> + </ul> + <h3>Essential Links</h3> + <ul> + <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li> + <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li> + <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li> + <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li> + <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li> + </ul> + <h3>Ecosystem</h3> + <ul> + <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li> + <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li> + <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li> + <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li> + <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li> + </ul> + </div> +</template> + +<script lang="ts"> +import { Component, Prop, Vue } from 'vue-property-decorator' +import axios from 'axios' + +@Component +export default class HelloWorld extends Vue { + @Prop() private msg!: string; + + private mounted() { + console.log("I'm mounting the thing") + axios.get("/status/base-config").then(result => { + console.log("GOT A RESULT", result.data) + }) + } +} +</script> + +<!-- Add "scoped" attribute to limit CSS to this component only --> +<style scoped lang="scss"> +h3 { + margin: 40px 0 0; +} +ul { + list-style-type: none; + padding: 0; +} +li { + display: inline-block; + margin: 0 10px; +} +a { + color: #42b983; +} +</style> |