Commit 54daaa95 authored by Hugo "ThePooN" Denizart's avatar Hugo "ThePooN" Denizart
Browse files

Initial commit

parents
# dependencies
node_modules
# logs
npm-debug.log
# Nuxt build
.nuxt
# Nuxt generate
dist
# 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).
This diff is collapsed.
<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>
declare module '*.vue' {
import Vue from 'vue'
const _default: Vue
export default _default
}
<template>
<div>
<nuxt/>
</div>
</template>
# 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.**
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: {}
}
This diff is collapsed.
{
"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"
}
}
<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>
This source diff could not be displayed because it is too large. You can view the blob instead.
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))
}
}
{
"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": {
"~/*": ["./*"]
}
}
}
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;
}
import { Person } from "~/types";
export interface RootState {
people: Person[];
}
This diff is collapsed.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment