<template>
  <v-app dark>
    <v-content>
      <v-container>
        <nuxt />
      </v-container>
    </v-content>
    <v-footer :fixed="fixed" app>
      <span>&copy; me</span>
    </v-footer>
  </v-app>
</template>

<script lang="ts">
  import Vue from 'vue';

  export default Vue.extend({
    name: 'default',
  });
</script>

<template>
  <div class="app">
    <p>I'm {{ fullName }}, and I'm coding using {{ awesomeThings }}!</p>
  </div>
</template>

<script lang="ts">  // <--- THIS lang="ts" IS REALLY IMPORTANT!
import { Component, Prop, Vue } from 'vue-property-decorator';

interface User {
  firstName: string;
  lastName: number;
}

@Component
export default class UserView extends Vue {
  @Prop({ type: Object, required: true })
  readonly user!: User;

  awesomeThings: string = 'Nuxt.js and TypeScript';

  get fullName(): string {
    return `${this.user.firstName} ${this.user.lastName}`;
  }
}
</script>

<template>
  <v-layout>
    <v-flex class="text-center">
      <h1>Hello World!</h1>
      <v-btn>
        <v-icon>email</v-icon>
      </v-btn>
      <UserView :user="{firstName: 'Maks', lastName: 'Imko'}"/>
    </v-flex>
  </v-layout>
</template>
<!-- THIS lang="ts" IS REALLY IMPORTANT! -->
<script lang="ts">
  // import { VWindow } from 'vuetify';
  import { Component, Ref, Vue } from 'vue-property-decorator';
  import UserView from '~/components/UserView.vue';

  interface User {
    firstName: string;
    lastName: number;
  }

  @Component({
    components: { UserView }
  })
  export default class IndexPage extends Vue {
    @Ref() readonly userView!: UserView;
  }
</script>