fix: examples and playground

examples/nuxt/components/HelloWorld.vue

@@ -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/pages/index.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/shims-vue.d.ts

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

examples/nuxt/tsconfig.json

@@ -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/vue-cli/package.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/src/App.vue

@@ -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/components/HelloWorld.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/main.ts

@@ -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/shims-vue.d.ts

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

examples/vue-cli/tsconfig.json

@@ -6,35 +6,26 @@
     "jsx": "preserve",
     "importHelpers": true,
     "moduleResolution": "node",
-    "skipLibCheck": true,
+    "skipLibCheck": false,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,
-    "baseUrl": ".",
     "types": [
-      "webpack-env",
-      "unplugin-vue2-script-setup/types"
+      "webpack-env"
     ],
-    "paths": {
-      "@/*": [
-        "src/*"
-      ]
-    },
     "lib": [
       "esnext",
       "dom",
-      "dom.iterable",
-      "scripthost"
+      "dom.iterable"
     ]
   },
   "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "src/**/*.vue",
-    "tests/**/*.ts",
-    "tests/**/*.tsx"
+    "src"
   ],
   "exclude": [
     "node_modules"
-  ]
+  ],
+  "vueCompilerOptions": {
+    "experimentalCompatMode": 2
+  }
 }

examples/vue-cli/vue.config.js

@@ -13,6 +13,7 @@ module.exports = {
       }),
     ],
   },
+  parallel: false,
   chainWebpack(config) {
     // disable type check and let `vue-tsc` handles it
     config.plugins.delete('fork-ts-checker')

playground/index.html

@@ -8,6 +8,6 @@
 </head>
 <body>
   <div id="app"></div>
-  <script type="module" src="./main.ts"></script>
+  <script type="module" src="./src/main.ts"></script>
 </body>
 </html>

playground/package.json

@@ -1,16 +1,18 @@
 {
   "private": true,
   "scripts": {
-    "dev": "vite --open"
+    "dev": "vite --open",
+    "build": "vue-tsc --noEmit && vite build"
   },
   "dependencies": {
     "@vue/composition-api": "^1.4.3",
     "vue": "^2.6.14"
   },
   "devDependencies": {
-    "vite": "^2.7.9",
+    "vite": "^2.7.10",
     "vite-plugin-inspect": "^0.3.11",
     "vite-plugin-vue2": "^1.9.0",
-    "vue-template-compiler": "^2.6.14"
+    "vue-template-compiler": "^2.6.14",
+    "vue-tsc": "^0.30.1"
   }
 }

playground/App.vue → playground/src/App.vue

@@ -1,11 +1,3 @@
-<template>
-  <div>
-    <hello-world name="Vue 2" @update="onUpdate" />
-
-    <async-component />
-  </div>
-</template>
-
 <script setup lang="ts">
 import { defineAsyncComponent } from '@vue/composition-api'
 
@@ -18,3 +10,10 @@ function onUpdate(e: any) {
   console.log(e)
 }
 </script>
+<template>
+  <div>
+    <HelloWorld name="Vue 2" @update="onUpdate" />
+
+    <AsyncComponent />
+  </div>
+</template>

playground/HelloWorld.vue → playground/src/HelloWorld.vue

@@ -1,22 +1,18 @@
-<template>
-  <div>
-    <h3>{{ msg }}, {{ name }}</h3>
-    <button @click="inc">
-      Inc
-    </button>
-    <div>{{ count }} x 2 = {{ doubled }}</div>
-    <button @click="dec()" v-html="decText" />
-    <component :is="count > 2 ? Foo : Bar" />
-  </div>
-</template>
-
+<script lang="ts">
+/* eslint-disable import/first */
+export default {
+  name: 'App',
+}
+</script>
 <script setup lang="ts">
 import { watch } from '@vue/composition-api'
 import Foo from './Foo.vue'
 import Bar from './Bar.vue'
 
-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
+}>()
 
 let count = $ref(0)
 // eslint-disable-next-line prefer-const
@@ -33,9 +29,14 @@ 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" />
+    <component :is="count > 2 ? Foo : Bar" />
+  </div>
+</template>

playground/src/main.ts

@@ -0,0 +1,9 @@
+import Vue from 'vue'
+import VueCompositionAPI, { createApp, h } from '@vue/composition-api'
+import App from './App.vue'
+
+Vue.use(VueCompositionAPI)
+
+const app = createApp({ render: () => h(App) })
+
+app.mount('#app')

playground/src/shims-vue.d.ts

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