Add typescript example

This commit is contained in:
Sébastien Chopin 2017-05-20 11:35:50 +02:00
parent 148c2fc471
commit cf58f299d8
14 changed files with 1222 additions and 0 deletions

View File

@ -0,0 +1,3 @@
# Using typescript within nuxt.js
https://github.com/johnlindquist/nuxt-typescript-starter/

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,22 @@
<template>
<div class="ba b--black-20 mw5 ma2">
<img :src="'https://robots.johnlindquist.com/' + person.first_name + '_' + person.last_name" />
<div class="flex flex-column items-center pa2 b--black-20">
<div class="f4">{{person.first_name}} {{person.last_name}}</div>
<button @click="select(person.id)" class="w-100 bg-blue dim mv2 pv2 bn pointer">Select</button>
</div>
</div>
</template>
// **PLEASE NOTE** All "Nuxt Class Components" require at minimum a script tag that exports a default object
<script lang="ts">
import Vue from "vue"
import Component from "nuxt-class-component"
import { Prop } from 'vue-property-decorator'
import { Action } from "vuex-class"
@Component({})
export default class Card extends Vue {
@Prop() person
@Action select
}
</script>

19
examples/typescript/index.d.ts vendored Normal file
View File

@ -0,0 +1,19 @@
//Deleting this file will cause "TS18003: No inputs were found in config file 'tsconfig.json'"
//These declarations allow TypeScript to import non-js/ts files without the file extensions (such as .vue files)
declare module "~components/*" {
}
declare module "~layouts/*" {
}
declare module "~pages/*" {
}
declare module "~assets/*" {
}
declare module "~static/*" {
}

View File

@ -0,0 +1,5 @@
<template>
<div class="container">
<nuxt/>
</div>
</template>

View File

@ -0,0 +1,18 @@
module.exports = function (options, next) {
// Extend build
this.extendBuild((config) => {
// Add TypeScript loader
config.module.rules.push({
test: /\.ts$/,
loader: 'ts-loader'
})
// Add TypeScript loader for vue files
for (rule of config.module.rules) {
if (rule.loader === 'vue-loader') {
rule.query.loaders.ts = 'ts-loader?{"appendTsSuffixTo":["\\\\.vue$"]}'
}
}
})
next()
}

View File

@ -0,0 +1,26 @@
module.exports = {
env: {
baseUrl: process.env.BASE_URL || 'http://localhost:3000'
},
head: {
title: 'starter',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Nuxt.js project' }
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
},
/*
** Customize the progress-bar color
*/
loading: { color: '#3B8070' },
/*
** Build configuration
*/
css: ['tachyons/css/tachyons.min.css', '~assets/css/main.css'],
build: {
vendor: ['axios', 'gsap', 'vuex-class', 'nuxt-class-component']
},
modules: ['~modules/typescript']
}

View File

@ -0,0 +1,24 @@
{
"version": "1.0.1",
"private": true,
"dependencies": {
"axios": "^0.16.1",
"gsap": "^1.19.1",
"nuxt": "latest",
"nuxt-class-component": "^1.0.1",
"tachyons": "^4.7.0",
"vue-class-component": "^5.0.1",
"vue-property-decorator": "^5.0.1",
"vuex-class": "^0.2.0"
},
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"devDependencies": {
"ts-loader": "^2.0.3",
"typescript": "^2.2.2"
}
}

View File

@ -0,0 +1,32 @@
<template>
<section class="pa4">
<div class="bg-white-90 pa4">
<div class="f1">Nuxt TypeScript Starter</div>
<div class="f3">Selected Person: {{selectedPerson.first_name}} {{selectedPerson.last_name}}</div>
{{selected}}
</div>
<div class="flex flex-wrap ph2 justify-between bg-white-80">
<div v-for="person in people">
<Card :person="person"></Card>
</div>
</div>
</section>
</template>
<script lang="ts">
import Vue from "vue";
import Component from "nuxt-class-component"
import Card from "~components/Card"
import { State, Getter } from "vuex-class"
@Component({
components: {
Card
}
})
export default class extends Vue {
@State selected
@State people
@Getter selectedPerson
}
</script>

View File

@ -0,0 +1,5 @@
import axios from 'axios'
export default axios.create({
baseURL: process.env.baseUrl
})

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,33 @@
import axios from "~plugins/axios";
export const state = () => ({
selected: 1,
people: []
});
export const mutations = {
select(state, id) {
state.selected = id;
},
setPeople(state, people) {
state.people = people;
}
};
export const getters = {
selectedPerson: state => {
const p = state.people.find(person => person.id === state.selected);
return p ? p : { first_name: "Please,", last_name: "select someone" };
}
};
export const actions = {
async nuxtServerInit({ commit }) {
const response = await axios.get("/random-data.json");
const people = response.data.slice(0, 10);
commit("setPeople", people);
},
select({ commit }, id) {
commit("select", id);
}
};

View File

@ -0,0 +1,31 @@
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"es2015"
],
"module": "es2015",
"moduleResolution": "node",
"experimentalDecorators": true,
"declaration": true,
"noImplicitAny": false,
"noImplicitThis": false,
"strictNullChecks": true,
"removeComments": true,
"suppressImplicitAnyIndexErrors": true,
"allowSyntheticDefaultImports": true,
"baseUrl": ".",
"paths": {
"~": ["./"],
"~assets/*": ["./assets/*"],
"~components/*": ["./components/*"],
"~middleware/*": ["./middleware/*"],
"~pages/*": ["./pages/*"],
"~plugins/*": ["./plugins/*"],
"~static/*": ["./static/*"],
"~store": ["./.nuxt/store"],
"~router": ["./.nuxt/router"]
}
}
}