feat($HelloWorld): use prop to pass data

Author: johnnymillergh

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuetify-typescript-playground",
-  "version": "0.1.0",
+  "version": "0.1.0-beta",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/App.vue

@@ -15,7 +15,12 @@
       </v-btn>
     </v-app-bar>
     <v-content>
-      <hello-world/>
+      <v-sheet class="text-center">
+        <router-link to="/">Home</router-link>
+        <span>|</span>
+        <router-link to="/about">About</router-link>
+      </v-sheet>
+      <router-view/>
     </v-content>
   </v-app>
 </template>
@@ -27,9 +32,9 @@ import HelloWorld from './components/HelloWorld.vue'
 export default Vue.extend({
   name: 'App',
 
-  components: {
-    HelloWorld
-  },
+  // components: {
+  //   HelloWorld
+  // },
 
   data: () => ({
     //

src/components/HelloWorld.vue

@@ -1,6 +1,9 @@
 <!--suppress HtmlUnknownBooleanAttribute -->
 <template>
   <v-container>
+    <div class="text-center">
+      <v-sheet color="orange lighten-2">{{ msg }}</v-sheet>
+    </div>
     <v-layout text-center wrap>
       <v-flex xs12>
         <!--suppress HtmlUnknownTarget -->
@@ -55,10 +58,12 @@ export default class HelloWorld extends Vue {
 
 <!--suppress JSUnusedLocalSymbols, JSUnusedGlobalSymbols -->
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Prop, Vue } from 'vue-property-decorator'
 
 @Component
 export default class HelloWorld extends Vue {
+  @Prop() private msg!: string
+
   private ecosystem: object = [
     {
       text: 'vuetify-loader',

src/views/About.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="about">
+  <div class="text-center">
     <h1>This is an about page</h1>
   </div>
 </template>

src/views/Home.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
     <hello-world msg="Welcome to Your Vue.js App"/>
   </div>
 </template>