example: Lint & fix TS example

examples/typescript/components/Card.vue

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

examples/typescript/modules/typescript.js

@@ -1,4 +1,6 @@
 module.exports = function (options) {
+  // Add .ts extension for store, middleware and more
+  this.nuxt.options.extensions.push('ts')
   // Extend build
   this.extendBuild(config => {
     const tsLoader = {
@@ -22,5 +24,9 @@ module.exports = function (options) {
         rule.options.loaders.ts = tsLoader
       }
     }
+    // Add .ts extension in webpack resolve
+    if (config.resolve.extensions.indexOf('.ts') === -1) {
+      config.resolve.extensions.push('.ts')
+    }
   })
 }

examples/typescript/nuxt.config.js

@@ -20,7 +20,7 @@ module.exports = {
   */
   css: ['tachyons/css/tachyons.min.css', '~/assets/css/main.css'],
   build: {
-    vendor: ['axios', 'gsap', 'vuex-class', 'nuxt-class-component']
+    vendor: ['axios', 'vuex-class', 'nuxt-class-component']
   },
   modules: ['~/modules/typescript']
 }

examples/typescript/package.json

@@ -2,15 +2,10 @@
   "version": "1.0.1",
   "private": true,
   "dependencies": {
-    "axios": "^0.16.1",
+    "axios": "^0.17.1",
-    "gsap": "^1.19.1",
     "nuxt": "latest",
-    "nuxt-class-component": "^1.0.3",
+    "nuxt-class-component": "^1.1.3",
-    "tachyons": "^4.7.0",
+    "tachyons": "^4.9.1",
-    "vue": "~2.5.1",
-    "vue-server-renderer": "~2.5.1",
-    "vue-template-compiler": "~2.5.1",
-    "vue-class-component": "^6.0.0",
     "vue-property-decorator": "^6.0.0",
     "vuex-class": "^0.3.0"
   },
@@ -21,7 +16,7 @@
     "generate": "nuxt generate"
   },
   "devDependencies": {
-    "ts-loader": "^3.0.0",
+    "ts-loader": "^3.2.0",
-    "typescript": "^2.2.2"
+    "typescript": "^2.6.2"
   }
 }

examples/typescript/pages/index.vue

@@ -19,10 +19,10 @@ import Component from 'nuxt-class-component'
 import Card from '~/components/Card.vue'
 import { State, Getter, namespace } from 'vuex-class'
 
-import * as people from '~/store/modules/people';
+import * as people from '~/store/modules/people'
 
-const PeopleState = namespace(people.name, State);
+const PeopleState = namespace(people.name, State)
-const PeopleGetter = namespace(people.name, Getter);
+const PeopleGetter = namespace(people.name, Getter)
 
 @Component({
   components: {

examples/typescript/store/index.ts

@@ -1,25 +1,32 @@
-import * as root from "./root";
+import Vuex from 'vuex'
-import * as people from "./modules/people";
+import * as root from './root'
+import * as people from './modules/people'
 
-// more info about store: https://vuex.vuejs.org/en/core-concepts.html
+// More info about store: https://vuex.vuejs.org/en/core-concepts.html
+// See https://nuxtjs.org/guide/vuex-store#classic-mode
 // structure of the store:
-    // types: Types that represent the keys of the mutations to commit
+  // types: Types that represent the keys of the mutations to commit
-    // state: The information of our app, we can get or update it.
+  // state: The information of our app, we can get or update it.
-    // getters: Get complex information from state
+  // getters: Get complex information from state
-    // action: Sync or async operations that commit mutations
+  // action: Sync or async operations that commit mutations
-    // mutations: Modify the state
+  // mutations: Modify the state
-
-export const modules = {
-    [people.name]: people
-};
 
 interface ModulesStates {
-    people: people.State;
+  people: people.State
 }
 
-export type RootState = root.State & ModulesStates;
+export type RootState = root.State & ModulesStates
 
-export const state = root.state;
+const createStore = () => {
-export const getters = root.getters;
+  return new Vuex.Store({
-export const actions = root.actions;
+    state: root.state(),
-export const mutations = root.mutations;
+    getters: root.getters,
+    mutations: root.mutations,
+    actions: root.actions,
+    modules: {
+      [people.name]: people
+    }
+  })
+}
+
+export default createStore

examples/typescript/store/modules/people.ts

@@ -1,70 +1,71 @@
-import { ActionTree, MutationTree, GetterTree, ActionContext } from "vuex";
+import { ActionTree, MutationTree, GetterTree, ActionContext } from 'vuex'
-import { RootState } from "store";
+import { RootState } from 'store'
 
-export const name = "people";
+export const name = 'people'
 
 export const types = {
-    SELECT: "SELECT",
+  SELECT: 'SELECT',
-    SET: "SET"
+  SET: 'SET'
-};
+}
 
 export interface PersonContact {
-    email: string;
+  email: string
-    phone: string;
+  phone: string
 }
 
 export interface PersonAddress {
-    city: string;
+  city: string
-    country: string;
+  country: string
-    postalCode: string;
+  postalCode: string
-    state: string;
+  state: string
-    street: string;
+  street: string
 }
 
 export interface Person {
-    id: number;
+  id: number
-    first_name: string;
+  first_name: string
-    last_name: string;
+  last_name: string
-    contact: PersonContact;
+  contact: PersonContact
-    gender: string;
+  gender: string
-    ip_address: string;
+  ip_address: string
-    avatar: string;
+  avatar: string
-    addres: PersonAddress;
+  addres: PersonAddress
 }
 
 export interface State {
-    selected: number;
+  selected: number
-    people: Person[];
+  people: Person[]
 }
 
+export const namespaced = true
+
 export const state = (): State => ({
-    selected: 1,
+  selected: 1,
-    people: []
+  people: []
-});
+})
 
 export const getters: GetterTree<State, RootState> = {
-    selectedPerson: state => {
+  selectedPerson: state => {
-        const p = state.people.find(person => person.id === state.selected);
+    const p = state.people.find(person => person.id === state.selected)
-        return p ? p : { first_name: "Please,", last_name: "select someone" };
+    return p ? p : { first_name: 'Please,', last_name: 'select someone' }
-    }
+  }
-};
+}
 
 export interface Actions<S, R> extends ActionTree<S, R> {
-    select(context: ActionContext<S, R>, id: number): void;
+  select(context: ActionContext<S, R>, id: number): void
 }
 
 export const actions: Actions<State, RootState> = {
-    select({ commit }, id: number) {
+  select({ commit }, id: number) {
-        commit(types.SELECT, id);
+    commit(types.SELECT, id)
-      }
+  }
-};
+}
 
 export const mutations: MutationTree<State> = {
-    [types.SELECT](state, id: number) {
+  [types.SELECT](state, id: number) {
-        state.selected = id;
+    state.selected = id
-    },
+  },
-    [types.SET](state, people: Person[]) {
+  [types.SET](state, people: Person[]) {
-        state.people = people;
+    state.people = people
-    }
+  }
-};
+}
-

examples/typescript/store/root.ts

@@ -1,28 +1,26 @@
-import { GetterTree, ActionContext, ActionTree, MutationTree } from "vuex";
+import { GetterTree, ActionContext, ActionTree, MutationTree } from 'vuex'
-import axios from "~/plugins/axios";
+import axios from '~/plugins/axios'
-import { RootState } from "store";
+import { RootState } from 'store'
-import * as people from "./modules/people";
+import * as people from './modules/people'
 
-export const types = {};
+export const types = {}
 
 export interface State {}
 
-export const state = (): State => ({});
+export const state = (): State => ({})
 
-export const getters: GetterTree<State, RootState> = {};
+export const getters: GetterTree<State, RootState> = {}
 
 export interface Actions<S, R> extends ActionTree<S, R> {
-    nuxtServerInit(context: ActionContext<S, R>): void;
+  nuxtServerInit(context: ActionContext<S, R>): void
 }
 
 export const actions: Actions<State, RootState> = {
-    async nuxtServerInit({ commit }) {
+  async nuxtServerInit({ commit }) {
-        const response = await axios.get("/random-data.json");
+    const response = await axios.get('/random-data.json')
-        const staticPeople = response.data.slice(0, 10);
+    const staticPeople = response.data.slice(0, 10)
-        commit(`${people.name}/${people.types.SET}`, staticPeople, { root: true });
+    commit(`${people.name}/${people.types.SET}`, staticPeople, { root: true })
-      }
+  }
-};
+}
-
-export const mutations: MutationTree<State> = {};
-
 
+export const mutations: MutationTree<State> = {}