SHARE
TWEET

asss

a guest May 19th, 2017 50 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. In my approach, Header and Footer are global, like a SPA, where this elements don't change very often. ServerList and ServerLogs are local components to be used inside a dashboard or something like that.
  2.  
  3. ServerList
  4.  
  5. <template>
  6. <div class="col-xs-12 col-sm-6">
  7.   <ul class="list-group">
  8.     <li class="list-group-item" v-for="index in 5">
  9.       Server #{{ index }}
  10.     </li>
  11.   </ul>
  12. </div>
  13. </template>
  14. <script>
  15. export default {}
  16. </script>
  17. ServerLogs
  18.  
  19. <template>
  20. <div class="col-xs-12 col-sm-6">
  21.   <p>Server Details are currently not updatet</p>
  22. </div>
  23. </template>
  24. <script>
  25. export default {}
  26. </script>
  27. Header
  28.  
  29. <template>
  30. <div class="row">
  31.   <div class="col-xs-12">
  32.     <header>
  33.       <h1>Server Status</h1>
  34.     </header>
  35.   </div>
  36. </div>
  37. </template>
  38. <script>
  39. export default {}
  40. </script>
  41. Footer
  42.  
  43. <template>
  44. <div class="row">
  45.   <div class="col-xs-12">
  46.     <footer>
  47.       <p>All Servers are managed here</p>
  48.     </footer>
  49.   </div>
  50. </div>
  51. </template>
  52. <script>
  53. export default {}
  54. </script>
  55. App
  56.  
  57. <template>
  58. <div class="container">
  59.   <app-header />
  60.   <hr>
  61.   <div class="row">
  62.     <app-server-list />
  63.     <app-server-logs />
  64.   </div>
  65.   <hr>
  66.   <app-footer />
  67. </div>
  68. </template>
  69. <script>
  70. import ServerList from './components/ServerList.vue';
  71. import ServerLogs from './components/ServerLogs.vue';
  72. export default {
  73.   components: {
  74.     'app-server-list': ServerList,
  75.     'app-server-logs': ServerLogs
  76.   }
  77. }
  78. </script>
  79. <style></style>
  80. main.js
  81.  
  82. import Vue from 'vue'
  83. import App from './App.vue'
  84. //Components
  85. import Header from './components/Header.vue'
  86. import Footer from './components/Footer.vue'
  87. Vue.component('app-header', Header);
  88. Vue.component('app-footer', Footer);
  89. new Vue({
  90.   el: '#app',
  91.   render: h => h(App)
  92. })
RAW Paste Data
Top