Initial commit

.gitignore

+# dependencies
+node_modules
+
+# logs
+npm-debug.log
+
+# Nuxt build
+.nuxt
+
+# Nuxt generate
+dist

README.md

+# osufrlive-website
+
+> 
+
+## Build Setup
+
+``` bash
+# install dependencies
+$ npm install # Or yarn install
+
+# serve with hot reload at localhost:3000
+$ npm run dev
+
+# build for production and launch server
+$ npm run build
+$ npm start
+
+# generate static project
+$ npm run generate
+```
+
+For detailed explanation on how things work, checkout the [Nuxt.js docs](https://github.com/nuxt/nuxt.js).

components/Card.vue

+<template>
+  <div class="card">
+    <h2> </h2>
+    <img :src="'https://robohash.org/' + person.first_name + '_' + person.last_name" />
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  Component,
+  Prop,
+  Vue
+} from "nuxt-property-decorator"
+import { Person } from "~/types";
+
+@Component({})
+export default class Card extends Vue {
+  @Prop() person: Person
+}
+</script>
+
+<style scoped>
+.card {
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana,
+    sans-serif;
+  padding: 1rem;
+  margin: 0.25rem;
+  border: 0.25rem solid gainsboro;
+}
+</style>

index.d.ts

+declare module '*.vue' {
+  import Vue from 'vue'
+  const _default: Vue
+  export default _default
+}

layouts/default.vue

+<template>
+  <div>
+    <nuxt/>
+  </div>
+</template>

middleware/README.md

+# MIDDLEWARE
+
+This directory contains your Application Middleware.
+The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts).
+
+More informations about the usage of this directory in the documentation:
+https://nuxtjs.org/guide/routing#middleware
+
+**This directory is not required, you can delete it if you don't want to use it.**

nuxt.config.ts

+export default {
+  env: {},
+  head: {
+    title: "osufrlive-website",
+    meta: [
+      { charset: "utf-8" },
+      { name: "viewport", content: "width=device-width, initial-scale=1" },
+      { hid: "description", name: "description", content: "" }
+    ],
+    link: [
+      { rel: "icon", type: "image/x-icon", href: "/favicon.ico" }
+    ]
+  },
+  loading: { color: "#3B8070" },
+  css: ["~/assets/css/main.css"],
+  build: {},
+  modules: [
+    "@nuxtjs/axios",
+  ],
+  axios: {}
+}

package.json

+{
+  "name": "osufrlive-website",
+  "description": "",
+  "version": "2.4.5",
+  "private": true,
+  "dependencies": {
+    "@nuxtjs/axios": "5.4.1",
+    "nuxt-ts": "2.4.5",
+    "nuxt-property-decorator": "2.1.3",
+    "vuex-class": "0.3.2"
+  },
+  "scripts": {
+    "dev": "nuxt-ts",
+    "build": "nuxt-ts build",
+    "start": "nuxt-ts start",
+    "generate": "nuxt-ts generate"
+  },
+  "devDependencies": {
+    "@nuxt/vue-app": "2.4.5",
+    "@types/node": "10.14.1",
+    "@types/webpack-env": "1.13.9"
+  }
+}

pages/index.vue

+<template>
+  <section>
+    <h1 class="header">Nuxt TypeScript Starter</h1>
+    <div class="cards">
+      <Card
+        v-for="person in people"
+        :key="person.id"
+        :person="person"
+      ></Card>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import {
+  Component,
+  Vue
+} from "nuxt-property-decorator"
+import { State } from "vuex-class"
+import { Person } from "~/types";
+import Card from "~/components/Card.vue"
+
+@Component({
+  components: {
+    Card
+  }
+})
+export default class extends Vue {
+  @State people: Person
+}
+</script>
+
+<style scoped>
+.header {
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.cards {
+  display: flex;
+  flex-wrap: wrap;
+}
+</style>

store/index.ts

+import { RootState, Person } from "~/types";
+import { MutationTree, ActionTree } from "vuex";
+import localRandomData from "~/static/random-data.json";
+
+export const state = (): RootState => ({
+  people: []
+})
+
+export const mutations: MutationTree<RootState> = {
+  setPeople(state: RootState, people: Person[]): void {
+    state.people = people
+  }
+}
+
+export const actions: ActionTree<RootState, RootState> = {
+  async nuxtServerInit({ commit }, context) {
+    let people: Person[] = []
+
+    // If you serve the site statically with `nuxt generate`, you can't use HTTP requests for local
+    people = context.isStatic ?
+      localRandomData :
+      await context.app.$axios.$get("./random-data.json")
+
+    commit("setPeople", people.slice(0, 10))
+  }
+}

tsconfig.json

+{
+  "extends": "@nuxt/typescript",
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "noImplicitAny": false,
+    "strict": false,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "baseUrl": ".",
+    "types": [
+      "@nuxt/vue-app",
+      "@types/node",
+      "@types/webpack-env"
+    ],
+    "paths": {
+      "~/*": ["./*"]
+    }
+  }
+}

types/index.ts

+export * from './state';
+
+export interface Person {
+  id: number;
+  first_name: string;
+  last_name: string;
+  contact: Contact;
+  gender: string;
+  ip_address: string;
+  avatar: string;
+  address: Address;
+}
+
+export interface Contact {
+  email: string;
+  phone: string;
+}
+
+export interface Address {
+  city: string;
+  country: string;
+  postalCode: string;
+  state: string;
+  street: string;
+}

types/state.ts

+import { Person } from "~/types";
+
+export interface RootState {
+  people: Person[];
+}