feat: migrate to vue 2.7

README.md

@@ -11,21 +11,18 @@
 ## Features
 
 * ⚡️ [Vite](https://github.com/vitejs/vite), [Vue 2](https://github.com/vuejs/vue) - lightning fast
-* 🔥 [Composition-API](https://github.com/vuejs/composition-api) with [\<script setup\>](https://github.com/antfu/unplugin-vue2-script-setup) syntax support
 * 📦 [Components auto importing](https://github.com/antfu/unplugin-vue-components)
 * 📥 [APIs auto importing](https://github.com/antfu/unplugin-auto-import) - use Composition API and others directly
 * 🚦 [Vue-Router](https://github.com/vuejs/vue-router)
 * 🎨 [Windi CSS](https://github.com/windicss/vite-plugin-windicss) - next generation utility-first CSS framework
 * 😃 [Use icons from any icon sets, with no compromise](https://github.com/antfu/unplugin-icons)
 * 🧰 [VueUse](https://github.com/vueuse/vueuse) - Collection of essential Vue Composition Utilities
-* 🦾 Typescript, of corse
+* 🦾 Typescript, of course
 
 ## Vite plugins
 
-* [`vite-plugin-vue2`](https://github.com/underfin/vite-plugin-vue2) -
+* [`@vitejs/plugin-vue2`](https://github.com/vitejs/vite-plugin-vue2) -
   Vue 2 support for Vite
-* [`unplugin-vue2-script-setup`](https://github.com/antfu/unplugin-vue2-script-setup) -
-  syntax support for `<script setup>`
 * [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components) -
   importing Vue components on-demand
 * [`unplugin-unplugin-auto-import`](https://github.com/antfu/unplugin-auto-import) -

package.json

@@ -8,26 +8,24 @@
     "lint:fix": "eslint \"**/*.{vue,ts,js}\" --fix"
   },
   "dependencies": {
-    "@vue/composition-api": "^1.6.1",
     "@vueuse/core": "^8.5.0",
     "core-js": "^3.21.1",
-    "vue": "^2.6.14",
+    "vue": "^2.7.0",
     "vue-router": "^3.5.3"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.18.8",
     "@iconify/json": "^2.1.14",
-    "@vue/runtime-dom": "^3.2.31",
+    "@vitejs/plugin-vue2": "^1.1.2",
     "eslint": "^8.10.0",
     "husky": "^7.0.4",
     "typescript": "^4.6.2",
-    "unplugin-auto-import": "^0.6.4",
+    "unplugin-auto-import": "^0.9.1",
-    "unplugin-icons": "^0.13.3",
+    "unplugin-icons": "^0.14.4",
-    "unplugin-vue-components": "^0.18.0",
+    "unplugin-vue-components": "^0.21.0",
-    "unplugin-vue2-script-setup": "^0.10.0",
     "vite": "^2.8.6",
-    "vite-plugin-vue2": "^1.9.3",
     "vite-plugin-windicss": "^1.8.3",
-    "vue-template-compiler": "^2.6.14"
+    "vue-template-compiler": "^2.7.0",
+    "vue-template-es2015-compiler": "^1.9.1"
   }
 }

src/auto-imports.d.ts

@@ -1,102 +1,64 @@
 // Generated by 'unplugin-auto-import'
-// We suggest you to commit this file into source control
+export {}
 declare global {
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
-  const computed: typeof import('@vue/composition-api')['computed']
   const computedAsync: typeof import('@vueuse/core')['computedAsync']
   const computedEager: typeof import('@vueuse/core')['computedEager']
   const computedInject: typeof import('@vueuse/core')['computedInject']
   const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
   const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
   const controlledRef: typeof import('@vueuse/core')['controlledRef']
-  const createApp: typeof import('@vue/composition-api')['createApp']
   const createEventHook: typeof import('@vueuse/core')['createEventHook']
   const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
   const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
   const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
   const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
   const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
-  const customRef: typeof import('@vue/composition-api')['customRef']
   const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
   const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
-  const defineAsyncComponent: typeof import('@vue/composition-api')['defineAsyncComponent']
-  const defineComponent: typeof import('@vue/composition-api')['defineComponent']
   const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
-  const effectScope: typeof import('@vue/composition-api')['effectScope']
-  const EffectScope: typeof import('@vue/composition-api')['EffectScope']
   const extendRef: typeof import('@vueuse/core')['extendRef']
-  const getCurrentInstance: typeof import('@vue/composition-api')['getCurrentInstance']
-  const getCurrentScope: typeof import('@vue/composition-api')['getCurrentScope']
-  const h: typeof import('@vue/composition-api')['h']
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
-  const inject: typeof import('@vue/composition-api')['inject']
   const isDefined: typeof import('@vueuse/core')['isDefined']
-  const isReadonly: typeof import('@vue/composition-api')['isReadonly']
-  const isRef: typeof import('@vue/composition-api')['isRef']
   const logicAnd: typeof import('@vueuse/core')['logicAnd']
   const logicNot: typeof import('@vueuse/core')['logicNot']
   const logicOr: typeof import('@vueuse/core')['logicOr']
   const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
-  const markRaw: typeof import('@vue/composition-api')['markRaw']
-  const nextTick: typeof import('@vue/composition-api')['nextTick']
-  const onActivated: typeof import('@vue/composition-api')['onActivated']
-  const onBeforeMount: typeof import('@vue/composition-api')['onBeforeMount']
-  const onBeforeUnmount: typeof import('@vue/composition-api')['onBeforeUnmount']
-  const onBeforeUpdate: typeof import('@vue/composition-api')['onBeforeUpdate']
   const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
-  const onDeactivated: typeof import('@vue/composition-api')['onDeactivated']
-  const onErrorCaptured: typeof import('@vue/composition-api')['onErrorCaptured']
   const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
   const onLongPress: typeof import('@vueuse/core')['onLongPress']
-  const onMounted: typeof import('@vue/composition-api')['onMounted']
-  const onScopeDispose: typeof import('@vue/composition-api')['onScopeDispose']
-  const onServerPrefetch: typeof import('@vue/composition-api')['onServerPrefetch']
   const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
-  const onUnmounted: typeof import('@vue/composition-api')['onUnmounted']
-  const onUpdated: typeof import('@vue/composition-api')['onUpdated']
   const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
-  const provide: typeof import('@vue/composition-api')['provide']
   const reactify: typeof import('@vueuse/core')['reactify']
   const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
-  const reactive: typeof import('@vue/composition-api')['reactive']
   const reactiveComputed: typeof import('@vueuse/core')['reactiveComputed']
   const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
   const reactivePick: typeof import('@vueuse/core')['reactivePick']
-  const readonly: typeof import('@vue/composition-api')['readonly']
-  const ref: typeof import('@vue/composition-api')['ref']
   const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
   const refDebounced: typeof import('@vueuse/core')['refDebounced']
   const refDefault: typeof import('@vueuse/core')['refDefault']
   const refThrottled: typeof import('@vueuse/core')['refThrottled']
   const refWithControl: typeof import('@vueuse/core')['refWithControl']
-  const shallowReactive: typeof import('@vue/composition-api')['shallowReactive']
-  const shallowReadonly: typeof import('@vue/composition-api')['shallowReadonly']
-  const shallowRef: typeof import('@vue/composition-api')['shallowRef']
   const syncRef: typeof import('@vueuse/core')['syncRef']
   const syncRefs: typeof import('@vueuse/core')['syncRefs']
   const templateRef: typeof import('@vueuse/core')['templateRef']
   const throttledRef: typeof import('@vueuse/core')['throttledRef']
   const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
-  const toRaw: typeof import('@vue/composition-api')['toRaw']
   const toReactive: typeof import('@vueuse/core')['toReactive']
-  const toRef: typeof import('@vue/composition-api')['toRef']
-  const toRefs: typeof import('@vue/composition-api')['toRefs']
-  const triggerRef: typeof import('@vue/composition-api')['triggerRef']
   const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
   const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
   const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
   const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
   const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
-  const unref: typeof import('@vue/composition-api')['unref']
   const unrefElement: typeof import('@vueuse/core')['unrefElement']
   const until: typeof import('@vueuse/core')['until']
   const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
   const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
   const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
-  const useAttrs: typeof import('@vue/composition-api')['useAttrs']
   const useBase64: typeof import('@vueuse/core')['useBase64']
   const useBattery: typeof import('@vueuse/core')['useBattery']
+  const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
   const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
   const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
   const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
@@ -106,15 +68,14 @@ declare global {
   const useColorMode: typeof import('@vueuse/core')['useColorMode']
   const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
   const useCounter: typeof import('@vueuse/core')['useCounter']
-  const useCssModule: typeof import('@vue/composition-api')['useCssModule']
   const useCssVar: typeof import('@vueuse/core')['useCssVar']
   const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
   const useCycleList: typeof import('@vueuse/core')['useCycleList']
   const useDark: typeof import('@vueuse/core')['useDark']
   const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
   const useDebounce: typeof import('@vueuse/core')['useDebounce']
-  const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
   const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
+  const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
   const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
   const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
   const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
@@ -122,6 +83,7 @@ declare global {
   const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
   const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
   const useDraggable: typeof import('@vueuse/core')['useDraggable']
+  const useDropZone: typeof import('@vueuse/core')['useDropZone']
   const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
   const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
   const useElementHover: typeof import('@vueuse/core')['useElementHover']
@@ -141,6 +103,7 @@ declare global {
   const useGamepad: typeof import('@vueuse/core')['useGamepad']
   const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
   const useIdle: typeof import('@vueuse/core')['useIdle']
+  const useImage: typeof import('@vueuse/core')['useImage']
   const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
   const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
   const useInterval: typeof import('@vueuse/core')['useInterval']
@@ -182,7 +145,6 @@ declare global {
   const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
   const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
   const useShare: typeof import('@vueuse/core')['useShare']
-  const useSlots: typeof import('@vue/composition-api')['useSlots']
   const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
   const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
   const useStorage: typeof import('@vueuse/core')['useStorage']
@@ -192,8 +154,8 @@ declare global {
   const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
   const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
   const useThrottle: typeof import('@vueuse/core')['useThrottle']
-  const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
   const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
+  const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
   const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
   const useTimeout: typeof import('@vueuse/core')['useTimeout']
   const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
@@ -204,10 +166,10 @@ declare global {
   const useTransition: typeof import('@vueuse/core')['useTransition']
   const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
   const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
-  const useVibrate: typeof import('@vueuse/core')['useVibrate']
-  const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
   const useVModel: typeof import('@vueuse/core')['useVModel']
   const useVModels: typeof import('@vueuse/core')['useVModels']
+  const useVibrate: typeof import('@vueuse/core')['useVibrate']
+  const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
   const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
   const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
   const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
@@ -216,10 +178,8 @@ declare global {
   const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
   const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
   const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
-  const watch: typeof import('@vue/composition-api')['watch']
   const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
   const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
-  const watchEffect: typeof import('@vue/composition-api')['watchEffect']
   const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
   const watchOnce: typeof import('@vueuse/core')['watchOnce']
   const watchPausable: typeof import('@vueuse/core')['watchPausable']
@@ -227,4 +187,3 @@ declare global {
   const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
   const whenever: typeof import('@vueuse/core')['whenever']
 }
-export {}

src/components.d.ts

@@ -1,8 +1,11 @@
 // generated by unplugin-vue-components
 // We suggest you to commit this file into source control
-// Read more: https://github.com/vuejs/vue-next/pull/3399
+// Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
 
-declare module 'vue' {
+export {}
+
+declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     ButtonPrimary: typeof import('./components/shared/ButtonPrimary.vue')['default']
     ButtonSecondary: typeof import('./components/shared/ButtonSecondary.vue')['default']
@@ -17,7 +20,8 @@ declare module 'vue' {
     MdiMoonWaningCrescent: typeof import('~icons/mdi/moon-waning-crescent')['default']
     MdiWhiteBalanceSunny: typeof import('~icons/mdi/white-balance-sunny')['default']
     Navbar: typeof import('./components/Navbar.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
   }
-}
 
-export { }
+}

src/components/Features.vue

@@ -16,16 +16,9 @@
     <div class="flex flex-wrap -m-2">
       <div class="w-full p-2 md:w-1/2 lg:w-1/3">
         <Feature
-          title="⚡️ vite-plugin-vue2"
+          title="⚡️ @vitejs/plugin-vue2"
           text="Vue 2 support for Vite"
-          url="https://github.com/underfin/vite-plugin-vue2"
+          url="https://github.com/vitejs/vite-plugin-vue2"
-        />
-      </div>
-      <div class="w-full p-2 md:w-1/2 lg:w-1/3">
-        <Feature
-          title="🔥 unplugin-vue2-script-setup"
-          text="Syntax support for the new script setup"
-          url="https://github.com/antfu/unplugin-vue2-script-setup"
         />
       </div>
       <div class="w-full p-2 md:w-1/2 lg:w-1/3">

src/components/Navbar.vue

@@ -55,6 +55,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed, getCurrentInstance } from 'vue'
 import { routes } from '@/router'
 
 // Import config from .env

src/main.ts

@@ -1,19 +1,15 @@
 import Vue from 'vue'
-import { createApp, h } from 'vue-demi'
-import VueCompositionApi from '@vue/composition-api'
 import App from '@/App.vue'
 
 import 'windi.css'
 import router from '@/router'
 
-Vue.use(VueCompositionApi)
-
 Vue.config.productionTip = false
 Vue.config.devtools = true
 
-const app = createApp({
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
   router,
-  render: () => h(App),
+  render: h => h(App),
 })
-
-app.mount('#app')

tsconfig.json

@@ -12,7 +12,6 @@
     "sourceMap": true,
     "baseUrl": ".",
     "types": [
-      "unplugin-vue2-script-setup/types",
       "@vueuse/core"
     ],
     "paths": {
@@ -37,6 +36,6 @@
     "node_modules"
   ],
   "vueCompilerOptions": {
-    "experimentalCompatMode": 2
+    "target": 2.7
   }
 }

vite.config.js

@@ -1,11 +1,10 @@
 import path from 'path'
 import { defineConfig } from 'vite'
-import { createVuePlugin as Vue2 } from 'vite-plugin-vue2'
+import vue from '@vitejs/plugin-vue2'
 import WindiCSS from 'vite-plugin-windicss'
 import Components from 'unplugin-vue-components/vite'
 import Icons from 'unplugin-icons/vite'
 import IconsResolver from 'unplugin-icons/resolver'
-import ScriptSetup from 'unplugin-vue2-script-setup/vite'
 import AutoImport from 'unplugin-auto-import/vite'
 
 const config = defineConfig({
@@ -13,7 +12,6 @@ const config = defineConfig({
     alias: {
       '@': `${path.resolve(__dirname, 'src')}`,
     },
-    dedupe: ['vue-demi'],
   },
 
   build: {
@@ -21,8 +19,7 @@ const config = defineConfig({
   },
 
   plugins: [
-    Vue2(),
+    vue(),
-    ScriptSetup(),
     WindiCSS(),
     Components({
       resolvers: [
@@ -35,7 +32,6 @@ const config = defineConfig({
     Icons(),
     AutoImport({
       imports: [
-        '@vue/composition-api',
         '@vueuse/core',
       ],
       dts: 'src/auto-imports.d.ts',