fix: examples and playground (#96)

Author: xiaoxiangmoe

.eslintrc renamed to .eslintrc.json

@@ -1,19 +1,17 @@
-<template>
-  <div>
-    <h3>{{ msg }}, {{ name }}</h3>
-    <button @click="inc">
-      Inc
-    </button>
-    <div>{{ count }} x 2 = {{ doubled }}</div>
-    <button @click="dec()" v-html="decText" />
-  </div>
-</template>
 
+<script lang="ts">
+/* eslint-disable import/first */
+export default {
+  name: 'App',
+}
+</script>
 <script setup lang="ts">
-import { ref, computed, watch } from '@vue/composition-api'
+import { computed, ref, watch } from '@vue/composition-api'
 
-const props = withDefaults(defineProps<{ msg: string; name: string | number }>(), { msg: 'Hello' })
-const emit = defineEmits(['update'])
+withDefaults(defineProps<{ msg: string; name: string | number }>(), { msg: 'Hello' })
+const emit = defineEmits<{
+  (event: 'update', value: number): void
+}>()
 
 const count = ref(0)
 const doubled = computed(() => count.value * 2)
@@ -30,9 +28,13 @@ const decText = '<b>Dec</b>'
 
 watch(count, value => emit('update', value))
 </script>
-
-<script lang="ts">
-export default {
-  name: 'App'
-}
-</script>
+<template>
+  <div>
+    <h3>{{ msg }}, {{ name }}</h3>
+    <button @click="inc">
+      Inc
+    </button>
+    <div>{{ count }} x 2 = {{ doubled }}</div>
+    <button @click="dec()" v-html="decText" />
+  </div>
+</template>

examples/nuxt/components/HelloWorld.vue

@@ -1,13 +1,14 @@
-<template>
-  <div>
-    <hello-world name="Vue 2" @update="onUpdate" />
-  </div>
-</template>
 
 <script setup lang="ts">
 import HelloWorld from '../components/HelloWorld.vue'
 
 function onUpdate(e: any) {
+  // eslint-disable-next-line no-console
   console.log(e)
 }
 </script>
+<template>
+  <div>
+    <HelloWorld name="Vue 2" @update="onUpdate" />
+  </div>
+</template>

examples/nuxt/pages/index.vue

@@ -0,0 +1 @@
+/// <reference types="unplugin-vue2-script-setup/shims.js" />

examples/nuxt/shims-vue.d.ts

@@ -9,27 +9,20 @@
       "DOM"
     ],
     "esModuleInterop": true,
-    "skipLibCheck": true,
+    "skipLibCheck": false,
     "allowJs": true,
     "sourceMap": true,
     "strict": true,
     "noEmit": true,
-    "baseUrl": ".",
-    "paths": {
-      "~/*": [
-        "./*"
-      ],
-      "@/*": [
-        "./*"
-      ]
-    },
     "types": [
       "@types/node",
-      "@nuxt/types",
-      "unplugin-vue2-script-setup/types"
+      "@nuxt/types"
     ]
   },
   "exclude": [
     "node_modules"
-  ]
+  ],
+  "vueCompilerOptions": {
+    "experimentalCompatMode": 2
+  }
 }

examples/nuxt/tsconfig.json

@@ -7,8 +7,9 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@vue/composition-api": "^1.4.3",
     "core-js": "^3.20.1",
-    "vue": "^2.6.11"
+    "vue": "^2.6.14"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.5.15",
@@ -18,5 +19,8 @@
     "unplugin-vue2-script-setup": "workspace:*",
     "vue-template-compiler": "^2.6.14",
     "vue-tsc": "^0.30.1"
+  },
+  "vueCompilerOptions": {
+    "experimentalCompatMode": 2
   }
 }

examples/vue-cli/package.json

@@ -1,13 +1,11 @@
+<script setup lang="ts">
+import HelloWorld from './components/HelloWorld.vue'
+</script>
 <template>
   <div id="app">
     <HelloWorld msg="Welcome to Your Vue.js App" />
   </div>
 </template>
-
-<script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue'
-</script>
-
 <style>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;

examples/vue-cli/src/App.vue

@@ -1,3 +1,8 @@
+<script setup lang="ts">
+defineProps<{
+  msg: string
+}>()
+</script>
 <template>
   <div class="hello">
     <h1>{{ msg }}</h1>
@@ -28,13 +33,6 @@
     </ul>
   </div>
 </template>
-
-<script setup lang="ts">
-defineProps({
-  msg: String,
-})
-</script>
-
 <style scoped>
 h3 {
   margin: 40px 0 0;

examples/vue-cli/src/components/HelloWorld.vue

@@ -1,10 +1,12 @@
 import Vue from 'vue'
-import VueCompostionAPI from '@vue/composition-api'
+import VueCompostionAPI, { createApp, h } from '@vue/composition-api'
 import App from './App.vue'
 
 Vue.config.productionTip = false
 Vue.use(VueCompostionAPI)
 
-const app = new Vue({ render: h => h(App as any) })
+const app = createApp({
+  render: () => h(App),
+})
 
-app.$mount('#app')
+app.mount('#app')

examples/vue-cli/src/main.ts

@@ -1,4 +1 @@
-declare module '*.vue' {
-  import Vue from 'vue'
-  export default Vue
-}
+/// <reference types="unplugin-vue2-script-setup/shims.js" />