mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
Add typescript example
This commit is contained in:
parent
148c2fc471
commit
cf58f299d8
3
examples/typescript/README.md
Normal file
3
examples/typescript/README.md
Normal file
@ -0,0 +1,3 @@
|
||||
# Using typescript within nuxt.js
|
||||
|
||||
https://github.com/johnlindquist/nuxt-typescript-starter/
|
4
examples/typescript/assets/css/main.css
Normal file
4
examples/typescript/assets/css/main.css
Normal file
File diff suppressed because one or more lines are too long
22
examples/typescript/components/Card.vue
Normal file
22
examples/typescript/components/Card.vue
Normal 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
19
examples/typescript/index.d.ts
vendored
Normal 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/*" {
|
||||
|
||||
}
|
5
examples/typescript/layouts/default.vue
Normal file
5
examples/typescript/layouts/default.vue
Normal file
@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<nuxt/>
|
||||
</div>
|
||||
</template>
|
18
examples/typescript/modules/typescript.js
Normal file
18
examples/typescript/modules/typescript.js
Normal 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()
|
||||
}
|
26
examples/typescript/nuxt.config.js
Normal file
26
examples/typescript/nuxt.config.js
Normal 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']
|
||||
}
|
24
examples/typescript/package.json
Normal file
24
examples/typescript/package.json
Normal 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"
|
||||
}
|
||||
}
|
32
examples/typescript/pages/index.vue
Normal file
32
examples/typescript/pages/index.vue
Normal 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>
|
5
examples/typescript/plugins/axios.js
Normal file
5
examples/typescript/plugins/axios.js
Normal file
@ -0,0 +1,5 @@
|
||||
import axios from 'axios'
|
||||
|
||||
export default axios.create({
|
||||
baseURL: process.env.baseUrl
|
||||
})
|
BIN
examples/typescript/static/favicon.ico
Normal file
BIN
examples/typescript/static/favicon.ico
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.1 KiB |
1000
examples/typescript/static/random-data.json
Normal file
1000
examples/typescript/static/random-data.json
Normal file
File diff suppressed because it is too large
Load Diff
33
examples/typescript/store/index.ts
Normal file
33
examples/typescript/store/index.ts
Normal 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);
|
||||
}
|
||||
};
|
31
examples/typescript/tsconfig.json
Normal file
31
examples/typescript/tsconfig.json
Normal 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"]
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user