You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

HelloWorld.vue 3.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. <template>
  2. <v-container>
  3. <v-row class="text-center">
  4. <v-col cols="12">
  5. <v-img
  6. :src="require('../assets/logo.svg')"
  7. class="my-3"
  8. contain
  9. height="200"
  10. />
  11. </v-col>
  12. <v-col class="mb-4">
  13. <h1 class="display-2 font-weight-bold mb-3">
  14. Welcome to Vuetify
  15. </h1>
  16. <p class="subheading font-weight-regular">
  17. For help and collaboration with other Vuetify developers,
  18. <br>please join our online
  19. <a
  20. href="https://community.vuetifyjs.com"
  21. target="_blank"
  22. >Discord Community</a>
  23. </p>
  24. </v-col>
  25. <v-col
  26. class="mb-5"
  27. cols="12"
  28. >
  29. <h2 class="headline font-weight-bold mb-3">
  30. What's next?
  31. </h2>
  32. <v-row justify="center">
  33. <a
  34. v-for="(next, i) in whatsNext"
  35. :key="i"
  36. :href="next.href"
  37. class="subheading mx-3"
  38. target="_blank"
  39. >
  40. {{ next.text }}
  41. </a>
  42. </v-row>
  43. </v-col>
  44. <v-col
  45. class="mb-5"
  46. cols="12"
  47. >
  48. <h2 class="headline font-weight-bold mb-3">
  49. Important Links
  50. </h2>
  51. <v-row justify="center">
  52. <a
  53. v-for="(link, i) in importantLinks"
  54. :key="i"
  55. :href="link.href"
  56. class="subheading mx-3"
  57. target="_blank"
  58. >
  59. {{ link.text }}
  60. </a>
  61. </v-row>
  62. </v-col>
  63. <v-col
  64. class="mb-5"
  65. cols="12"
  66. >
  67. <h2 class="headline font-weight-bold mb-3">
  68. Ecosystem
  69. </h2>
  70. <v-row justify="center">
  71. <a
  72. v-for="(eco, i) in ecosystem"
  73. :key="i"
  74. :href="eco.href"
  75. class="subheading mx-3"
  76. target="_blank"
  77. >
  78. {{ eco.text }}
  79. </a>
  80. </v-row>
  81. </v-col>
  82. </v-row>
  83. </v-container>
  84. </template>
  85. <script>
  86. export default {
  87. name: 'HelloWorld',
  88. data: () => ({
  89. ecosystem: [
  90. {
  91. text: 'vuetify-loader',
  92. href: 'https://github.com/vuetifyjs/vuetify-loader',
  93. },
  94. {
  95. text: 'github',
  96. href: 'https://github.com/vuetifyjs/vuetify',
  97. },
  98. {
  99. text: 'awesome-vuetify',
  100. href: 'https://github.com/vuetifyjs/awesome-vuetify',
  101. },
  102. ],
  103. importantLinks: [
  104. {
  105. text: 'Documentation',
  106. href: 'https://vuetifyjs.com',
  107. },
  108. {
  109. text: 'Chat',
  110. href: 'https://community.vuetifyjs.com',
  111. },
  112. {
  113. text: 'Made with Vuetify',
  114. href: 'https://madewithvuejs.com/vuetify',
  115. },
  116. {
  117. text: 'Twitter',
  118. href: 'https://twitter.com/vuetifyjs',
  119. },
  120. {
  121. text: 'Articles',
  122. href: 'https://medium.com/vuetify',
  123. },
  124. ],
  125. whatsNext: [
  126. {
  127. text: 'Explore components',
  128. href: 'https://vuetifyjs.com/components/api-explorer',
  129. },
  130. {
  131. text: 'Select a layout',
  132. href: 'https://vuetifyjs.com/layout/pre-defined',
  133. },
  134. {
  135. text: 'Frequently Asked Questions',
  136. href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions',
  137. },
  138. ],
  139. }),
  140. }
  141. </script>