docs: add basic counter examples (#453)

* Basic counter example

* Basic counter example

* Basic counter example

* Updated readme

* Lint fix

* purged package-lock.json files

* Update examples/options-api/basic/pages/index.vue

Co-authored-by: Kevin Marrec <kevin@marrec.io>

* Update examples/composition-api/basic/pages/index.vue

Co-authored-by: Kevin Marrec <kevin@marrec.io>

* Update examples/composition-api/basic/pages/index.vue

Co-authored-by: Kevin Marrec <kevin@marrec.io>

* Update examples/composition-api/basic/pages/index.vue

Co-authored-by: Kevin Marrec <kevin@marrec.io>

* Update examples/composition-api/basic/pages/index.vue

Co-authored-by: Kevin Marrec <kevin@marrec.io>

* Update examples/class-api/basic/pages/index.vue

Co-authored-by: Kevin Marrec <kevin@marrec.io>

* Update examples/options-api/basic/pages/index.vue

Co-authored-by: Kevin Marrec <kevin@marrec.io>

* Update examples/composition-api/basic/pages/index.vue

Co-authored-by: Kevin Marrec <kevin@marrec.io>

* Update examples/composition-api/basic/pages/index.vue

Co-authored-by: Kevin Marrec <kevin@marrec.io>

examples/class-api/basic/README.md

@@ -0,0 +1,3 @@
+# Nuxt TypeScript with Class API (basic)
+
+https://typescript.nuxtjs.org/examples/class-api/basic

examples/class-api/basic/nuxt.config.js

@@ -0,0 +1,3 @@
+export default {
+  buildModules: ['@nuxt/typescript-build']
+}

examples/class-api/basic/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "example-class-api-basic",
+  "version": "1.0.0",
+  "private": true,
+  "dependencies": {
+    "nuxt": "latest",
+    "vue-class-component": "latest",
+    "vue-property-decorator": "latest"
+  },
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "generate": "nuxt generate",
+    "post-update": "yarn upgrade --latest"
+  },
+  "devDependencies": {
+    "@nuxt/types": "latest",
+    "@nuxt/typescript-build": "latest"
+  }
+}

examples/class-api/basic/pages/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="container">
+    <button @click="increment">
+      Increment
+    </button>
+    <p>Counter : {{ counter }}</p>
+    <button @click="decrement">
+      Decrement
+    </button>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component } from 'vue-property-decorator'
+
+@Component
+export default class ClassAPICounter extends Vue {
+  counter = 0
+
+  increment () {
+    this.counter++
+  }
+
+  decrement () {
+    this.counter--
+  }
+}
+</script>
+
+<style>
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}
+</style>

examples/class-api/basic/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "ES2018",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "lib": [
+      "ESNext",
+      "ESNext.AsyncIterable",
+      "DOM"
+    ],
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "allowJs": true,
+    "sourceMap": true,
+    "strict": true,
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": [
+        "./*"
+      ],
+      "@/*": [
+        "./*"
+      ]
+    },
+    "types": [
+      "@nuxt/types"
+    ]
+  }
+}

examples/composition-api/basic/README.md

@@ -0,0 +1,3 @@
+# Nuxt TypeScript with Composition API (basic)
+
+https://typescript.nuxtjs.org/examples/composition-api/basic

examples/composition-api/basic/nuxt.config.js

@@ -0,0 +1,4 @@
+export default {
+  buildModules: ['@nuxt/typescript-build'],
+  plugins: ['~/plugins/composition-api']
+}

examples/composition-api/basic/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "example-composition-api-basic",
+  "version": "1.0.0",
+  "private": true,
+  "dependencies": {
+    "@vue/composition-api": "latest",
+    "nuxt": "latest"
+  },
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "generate": "nuxt generate",
+    "post-update": "yarn upgrade --latest"
+  },
+  "devDependencies": {
+    "@nuxt/types": "latest",
+    "@nuxt/typescript-build": "latest"
+  }
+}

examples/composition-api/basic/pages/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="container">
+    <button @click="increment">
+      Increment
+    </button>
+    <p>Counter : {{ counter }}</p>
+    <button @click="decrement">
+      Decrement
+    </button>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from '@vue/composition-api'
+
+export default defineComponent({
+  setup () {
+    const counter = ref(0)
+
+    const increment = () => counter.value++
+    const decrement = () => counter.value--
+
+    return {
+      counter,
+      increment,
+      decrement
+    }
+  }
+})
+</script>
+
+<style>
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}
+</style>

examples/composition-api/basic/plugins/composition-api.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import VueCompositionApi from '@vue/composition-api'
+
+Vue.use(VueCompositionApi)

examples/composition-api/basic/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2018",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "lib": [
+      "ESNext",
+      "ESNext.AsyncIterable",
+      "DOM"
+    ],
+    "esModuleInterop": true,
+    "allowJs": true,
+    "sourceMap": true,
+    "strict": true,
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": [
+        "./*"
+      ],
+      "@/*": [
+        "./*"
+      ]
+    },
+    "types": [
+      "@nuxt/types"
+    ]
+  }
+}

examples/options-api/basic/README.md

@@ -0,0 +1,3 @@
+# Nuxt TypeScript with Options API (basic)
+
+https://typescript.nuxtjs.org/examples/options-api/basic

examples/options-api/basic/nuxt.config.js

@@ -0,0 +1,3 @@
+export default {
+  buildModules: ['@nuxt/typescript-build']
+}

examples/options-api/basic/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "example-options-api-basic",
+  "version": "1.0.0",
+  "private": true,
+  "dependencies": {
+    "nuxt": "latest"
+  },
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "generate": "nuxt generate",
+    "post-update": "yarn upgrade --latest"
+  },
+  "devDependencies": {
+    "@nuxt/types": "latest",
+    "@nuxt/typescript-build": "latest"
+  }
+}

examples/options-api/basic/pages/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="container">
+    <button @click="increment">
+      Increment
+    </button>
+    <p>Counter : {{ counter }}</p>
+    <button @click="decrement">
+      Decrement
+    </button>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  data () {
+    return {
+      counter: 0
+    }
+  },
+  methods: {
+    increment (): void {
+      this.counter++
+    },
+    decrement (): void {
+      this.counter--
+    }
+  }
+})
+</script>
+
+<style>
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}
+</style>

examples/options-api/basic/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2018",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "lib": [
+      "ESNext",
+      "ESNext.AsyncIterable",
+      "DOM"
+    ],
+    "esModuleInterop": true,
+    "allowJs": true,
+    "sourceMap": true,
+    "strict": true,
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": [
+        "./*"
+      ],
+      "@/*": [
+        "./*"
+      ]
+    },
+    "types": [
+      "@nuxt/types"
+    ]
+  }
+}