Add typescript example

examples/typescript/README.md

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

examples/typescript/components/Card.vue

@@ -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>

examples/typescript/index.d.ts

@@ -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/*" {
+
+}

examples/typescript/layouts/default.vue

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

examples/typescript/modules/typescript.js

@@ -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()
+}

examples/typescript/nuxt.config.js

@@ -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']
+}

examples/typescript/package.json

@@ -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"
+  }
+}

examples/typescript/pages/index.vue

@@ -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>

examples/typescript/plugins/axios.js

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

examples/typescript/store/index.ts

@@ -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);
+  }
+};

examples/typescript/tsconfig.json

@@ -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"]
+    }
+  }
+}