feat: add script setup support

2025-02-23 05:02:19 +08:00 · 2022-01-27 20:18:13 +01:00 · 2022-01-27 20:18:13 +01:00 · 412f4bbbf9
commit 412f4bbbf9
parent e553ea2ca0
15 changed files with 458 additions and 123 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,5 +1,3 @@
-components.d.ts
-
 # Created by https://www.toptal.com/developers/gitignore/api/vue,node,macos,windows,linux,vscode,intellij+all
 # Edit at https://www.toptal.com/developers/gitignore?templates=vue,node,macos,windows,linux,vscode,intellij+all

--- a/README.md
+++ b/README.md
@ -8,43 +8,41 @@
 <a href="https://vite-vue2-starter.netlify.app"> ✨ Live Demo</a>
 </p>

-# 🔥 Features
+## Features

-* ⚡️ [Vite 2](https://github.com/vitejs/vite), [Vue 2](https://github.com/vuejs/vue) and [Composition-API](https://github.com/vuejs/composition-api)
-* 🚦 [Vue-Router](https://github.com/vuejs/vue-router)
-* 🎨 [Windi CSS](https://github.com/windicss/vite-plugin-windicss) - on-demand Tailwind CSS with speed and dark mode
+* ⚡️ [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)
-* 😃 [Icons as Vue components](https://github.com/antfu/unplugin-icons) - powered by [Iconify](https://github.com/iconify/iconify)
-* 🧰 [VueUse](https://github.com/vueuse/vueuse) - collection of essential Vue Composition Utilities
-* 🔍 ESLint
-* 🦾 Typescript
+* 📥 [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

-# 📦 Vite plugins
+## Vite plugins

 * [`vite-plugin-vue2`](https://github.com/underfin/vite-plugin-vue2) -
  Vue 2 support for Vite
-* [`vite-plugin-windicss`](https://github.com/windicss/vite-plugin-windicss) -
-  WindiCSS/TailwindCSS 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) -
-  On demand components auto importing for Vite
+  importing Vue components on-demand
+* [`unplugin-unplugin-auto-import`](https://github.com/antfu/unplugin-auto-import) -
+  importing APIs like CompositionAPI on-demand
+* [`vite-plugin-windicss`](https://github.com/windicss/vite-plugin-windicss) - 
+  easy WindiCSS integration
 * [`unplugin-icons`](https://github.com/antfu/unplugin-icons) -
-  Access thousands of icons as Vue components in Vite
+  importing icons as Vue components on-demand

-# 🚀 Getting started

-## GitHub Template
+## Try it now!
+
+### GitHub Template

 [Create a repo from this template on GitHub](https://github.com/lstoeferle/vite-vue2-windicss-starter/generate)

-When you use this template, try follow the checklist to update your info properly
-
- [ ] Rename `name` field in `package.json`
- [ ] Change the author name in `LICENSE`
- [ ] Change the app name in `.env`
- [ ] Change the favicon in `public`
- [ ] Clean up the README(s) and remove routes
-
-## Clone
+### Clone 

 If you prefer to do it manually with a cleaner git history

@ -54,17 +52,17 @@ cd my-vite-vue2-app
 yarn install
 ```

-# Usage
+## Usage

-## Development
+### Development

-Just run and visit [http://localhost:8080](http://localhost:8080)
+Just run and visit [http://localhost:8080](http://localhost:3333)

 ```bash
 yarn dev
 ```

-## Build
+### Build

 To build the App, run

@ -74,6 +72,12 @@ yarn build

 And you will see the generated files in `dist`, which are ready to be served.

-# Why
+## Why

 Vue 3 is awesome, but we should not forget about supporting Vue 2 ♥️
+
+### Credits
+
+This project is inspired by [Vitesse](https://github.com/antfu/vitesse), an opinionated Vite starter template for Vue 3.
+
+Big thanks to [Anthony Fu](https://github.com/antfu) for the inspiration and all the amazing tools you create.
--- a/package.json
+++ b/package.json
@ -12,17 +12,19 @@
    "@vueuse/core": "^7.5.5",
    "core-js": "^3.20.3",
    "vue": "^2.6.14",
-    "vue-demi": "^0.12.1",
    "vue-router": "^3.5.3"
  },
  "devDependencies": {
    "@antfu/eslint-config": "^0.16.0",
    "@iconify/json": "^2.0.29",
+    "@vue/runtime-dom": "^3.2.29",
    "eslint": "^8.7.0",
    "husky": "^7.0.4",
    "typescript": "^4.5.5",
+    "unplugin-auto-import": "^0.5.11",
    "unplugin-icons": "^0.13.0",
    "unplugin-vue-components": "^0.17.14",
+    "unplugin-vue2-script-setup": "^0.9.1",
    "vite": "^2.7.13",
    "vite-plugin-vue2": "^1.9.3",
    "vite-plugin-windicss": "^1.6.3",
--- a/src/auto-imports.d.ts
+++ b/src/auto-imports.d.ts
@ -0,0 +1,204 @@
+// Generated by 'unplugin-auto-import'
+// We suggest you to commit this file into source control
+declare global {
+  const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
+  const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
+  const biSyncRef: typeof import('@vueuse/core')['biSyncRef']
+  const computed: typeof import('@vue/composition-api')['computed']
+  const computedInject: typeof import('@vueuse/core')['computedInject']
+  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 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 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 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 reactivePick: typeof import('@vueuse/core')['reactivePick']
+  const readonly: typeof import('@vue/composition-api')['readonly']
+  const ref: typeof import('@vue/composition-api')['ref']
+  const refDefault: typeof import('@vueuse/core')['refDefault']
+  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 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 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 useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
+  const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
+  const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
+  const useClamp: typeof import('@vueuse/core')['useClamp']
+  const useClipboard: typeof import('@vueuse/core')['useClipboard']
+  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 useCycleList: typeof import('@vueuse/core')['useCycleList']
+  const useDark: typeof import('@vueuse/core')['useDark']
+  const useDebounce: typeof import('@vueuse/core')['useDebounce']
+  const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
+  const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
+  const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
+  const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
+  const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
+  const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
+  const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
+  const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
+  const useDraggable: typeof import('@vueuse/core')['useDraggable']
+  const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
+  const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
+  const useElementHover: typeof import('@vueuse/core')['useElementHover']
+  const useElementSize: typeof import('@vueuse/core')['useElementSize']
+  const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility']
+  const useEventBus: typeof import('@vueuse/core')['useEventBus']
+  const useEventListener: typeof import('@vueuse/core')['useEventListener']
+  const useEventSource: typeof import('@vueuse/core')['useEventSource']
+  const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
+  const useFavicon: typeof import('@vueuse/core')['useFavicon']
+  const useFetch: typeof import('@vueuse/core')['useFetch']
+  const useFocus: typeof import('@vueuse/core')['useFocus']
+  const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
+  const useFps: typeof import('@vueuse/core')['useFps']
+  const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
+  const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
+  const useIdle: typeof import('@vueuse/core')['useIdle']
+  const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
+  const useInterval: typeof import('@vueuse/core')['useInterval']
+  const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
+  const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
+  const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
+  const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
+  const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
+  const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
+  const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
+  const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
+  const useMemoize: typeof import('@vueuse/core')['useMemoize']
+  const useMemory: typeof import('@vueuse/core')['useMemory']
+  const useMounted: typeof import('@vueuse/core')['useMounted']
+  const useMouse: typeof import('@vueuse/core')['useMouse']
+  const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
+  const useMousePressed: typeof import('@vueuse/core')['useMousePressed']
+  const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
+  const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
+  const useNetwork: typeof import('@vueuse/core')['useNetwork']
+  const useNow: typeof import('@vueuse/core')['useNow']
+  const useOnline: typeof import('@vueuse/core')['useOnline']
+  const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
+  const useParallax: typeof import('@vueuse/core')['useParallax']
+  const usePermission: typeof import('@vueuse/core')['usePermission']
+  const usePointer: typeof import('@vueuse/core')['usePointer']
+  const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
+  const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
+  const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
+  const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
+  const useRafFn: typeof import('@vueuse/core')['useRafFn']
+  const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
+  const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
+  const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
+  const useScroll: typeof import('@vueuse/core')['useScroll']
+  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']
+  const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
+  const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
+  const useSwipe: typeof import('@vueuse/core')['useSwipe']
+  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 useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
+  const useTimeout: typeof import('@vueuse/core')['useTimeout']
+  const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
+  const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
+  const useTitle: typeof import('@vueuse/core')['useTitle']
+  const useToggle: typeof import('@vueuse/core')['useToggle']
+  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 useWakeLock: typeof import('@vueuse/core')['useWakeLock']
+  const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
+  const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
+  const useWebWorker: typeof import('@vueuse/core')['useWebWorker']
+  const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn']
+  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 watchEffect: typeof import('@vue/composition-api')['watchEffect']
+  const watchOnce: typeof import('@vueuse/core')['watchOnce']
+  const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
+  const whenever: typeof import('@vueuse/core')['whenever']
+}
+export {}
--- a/src/components.d.ts
+++ b/src/components.d.ts
@ -0,0 +1,23 @@
+// 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
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    ButtonPrimary: typeof import('./components/shared/ButtonPrimary.vue')['default']
+    ButtonSecondary: typeof import('./components/shared/ButtonSecondary.vue')['default']
+    Feature: typeof import('./components/Feature.vue')['default']
+    Features: typeof import('./components/Features.vue')['default']
+    Heading1: typeof import('./components/shared/Heading1.vue')['default']
+    Heading2: typeof import('./components/shared/Heading2.vue')['default']
+    Hero: typeof import('./components/Hero.vue')['default']
+    MdiAlien: typeof import('~icons/mdi/alien')['default']
+    MdiArrowRight: typeof import('~icons/mdi/arrow-right')['default']
+    MdiGithub: typeof import('~icons/mdi/github')['default']
+    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']
+  }
+}
+
+export { }
--- a/src/components/Feature.vue
+++ b/src/components/Feature.vue
@ -22,15 +22,10 @@
  </div>
 </template>

-<script lang="ts">
-import { defineComponent } from 'vue-demi'
-
-export default defineComponent({
-  name: 'Feature',
-  props: {
-    title: { type: String, required: true },
-    text: { type: String, required: true },
-    url: { type: String, required: true },
-  },
+<script setup lang="ts">
+defineProps({
+  title: { type: String, required: true },
+  text: { type: String, required: true },
+  url: { type: String, required: true },
 })
 </script>
--- a/src/components/Features.vue
+++ b/src/components/Features.vue
@ -14,31 +14,45 @@
      </p>
    </div>
    <div class="flex flex-wrap -m-2">
-      <div class="w-full p-2 md:w-1/2 lg:w-1/4">
+      <div class="w-full p-2 md:w-1/2 lg:w-1/3">
        <Feature
-          title="vite-plugin-vue2"
+          title="⚡️ vite-plugin-vue2"
          text="Vue 2 support for Vite"
          url="https://github.com/underfin/vite-plugin-vue2"
        />
      </div>
-      <div class="w-full p-2 md:w-1/2 lg:w-1/4">
+      <div class="w-full p-2 md:w-1/2 lg:w-1/3">
        <Feature
-          title="vite-plugin-windicss"
-          text="Windi CSS for Vite"
-          url="https://github.com/windicss/vite-plugin-windicss"
+          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/4">
+      <div class="w-full p-2 md:w-1/2 lg:w-1/3">
        <Feature
-          title="unplugin-components"
-          text="On demand components auto importing for Vite"
+          title="📦 unplugin-components"
+          text="Importing Vue components on-demand"
          url="https://github.com/antfu/unplugin-vue-components"
        />
      </div>
-      <div class="w-full p-2 md:w-1/2 lg:w-1/4">
+      <div class="w-full p-2 md:w-1/2 lg:w-1/3">
        <Feature
-          title="unplugin-icons"
-          text="Access thousands of icons as Vue components in Vite"
+          title="📥 unplugin-auto-import"
+          text="Importing APIs like CompositionAPI on-demand"
+          url="https://github.com/antfu/unplugin-auto-import"
+        />
+      </div>
+      <div class="w-full p-2 md:w-1/2 lg:w-1/3">
+        <Feature
+          title="🎨 vite-plugin-windicss"
+          text="Easy WindiCSS integration"
+          url="https://github.com/windicss/vite-plugin-windicss"
+        />
+      </div>
+      <div class="w-full p-2 md:w-1/2 lg:w-1/3">
+        <Feature
+          title="😃 unplugin-icons"
+          text="Importing icons as Vue components on-demand"
          url="https://github.com/antfu/unplugin-icons"
        />
      </div>
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@ -16,14 +16,14 @@
        class="flex flex-wrap items-center justify-center text-base md:ml-auto"
      >
        <RouterLink
-          v-for="(route, index) in routes"
+          v-for="(route, index) in availableRoutes"
          :key="index"
          class="mr-5 font-semibold cursor-pointer"
          :class="{
            'text-green-500 hover:green-500 dark:text-green-500 dark:hover:text-green-500 underline':
-              route.name === currentRoute,
+              route.name === currentRoute.name,
            'hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200':
-              route.name !== currentRoute,
+              route.name !== currentRoute.name,
          }"
          :to="{ name: route.name }"
        >
@ -54,23 +54,15 @@
  </header>
 </template>

-<script lang="ts">
-import { computed, defineComponent } from 'vue-demi'
-import { useDark, useToggle } from '@vueuse/core'
+<script setup lang="ts">
 import { routes } from '@/router'

-export default defineComponent({
-  setup: (_, ctx) => {
-    // Import config from .evn
-    const appName = import.meta.env.VITE_APP_NAME
+// Import config from .env
+const appName = import.meta.env.VITE_APP_NAME

-    const availableRoutes = routes.filter(route => route.name !== 'NotFound')
-    const currentRoute = computed(() => ctx.root.$route.name)
+const availableRoutes = routes.filter(route => route.name !== 'NotFound')
+const currentRoute = computed(() => getCurrentInstance()?.proxy?.$route)

-    const isDark = useDark()
-    const toggle = useToggle(isDark)
-
-    return { appName, routes: availableRoutes, currentRoute, toggle, isDark }
-  },
-})
+const isDark = useDark()
+const toggle = useToggle(isDark)
 </script>
--- a/src/main.ts
+++ b/src/main.ts
@ -1,10 +1,13 @@
 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

--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -2,7 +2,6 @@ import Vue from 'vue'
 import type { RouteConfig } from 'vue-router'
 import VueRouter from 'vue-router'
 import Home from '@/views/Home.vue'
-import About from '@/views/About.vue'
 import NotFound from '@/views/NotFound.vue'

 Vue.use(VueRouter)
@ -11,14 +10,9 @@ export const routes: RouteConfig[] = [
  {
    path: '/',
    name: 'Home',
-    component: Home,
-  },
-  {
-    path: '/about',
-    name: 'About',
    // NOTE: you can also apply meta information
    // meta: {authRequired: false }
-    component: About,
+    component: Home,
    // NOTE: you can also lazy-load the component
    // component: () => import("@/views/About.vue")
  },
--- a/src/shims-tsx.d.ts
+++ b/src/shims-tsx.d.ts
@ -1,4 +1,3 @@
-import type { VNode } from 'vue'
 import type Vue from 'vue'

 declare global {
--- a/src/views/About.vue
+++ b/src/views/About.vue
@ -1,29 +0,0 @@
-<template>
-  <section class="text-gray-600 body-font">
-    <div
-      class="container flex flex-col items-center justify-center px-5 py-24 mx-auto"
-    >
-      <div class="w-full text-center lg:w-2/3">
-        <Heading1> About: Vite ⚡ - Vue 2 starter template </Heading1>
-        <p class="mb-8 leading-relaxed dark:text-gray-300">
-          This starter template will help you to easily create a Vue2
-          application bundled by the lightning fast build tool called Vite.
-          Besides Vite this template also provides typescript support,
-          TailwindCSS, vue-router, vueuse and the vue composition-api for Vue2.
-        </p>
-        <div class="flex justify-center">
-          <a
-            href="https://github.com/lstoeferle/vite-vue2-windicss-starter"
-            target="_blank"
-          >
-            <button
-              class="inline-flex items-center px-6 py-2 text-lg text-white bg-black border-0 rounded focus:outline-none hover:bg-gray-900"
-            >
-              <MdiGithub /> &nbsp;GitHub
-            </button>
-          </a>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
--- a/tsconfig.json
+++ b/tsconfig.json
@ -11,11 +11,12 @@
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
-    "types": [],
+    "types": [
+      "unplugin-vue2-script-setup/types",
+      "@vueuse/core"
+    ],
    "paths": {
-      "@/*": [
-        "src/*"
-      ]
+      "@/*": ["src/*"]
    },
    "lib": [
      "esnext",
@ -28,10 +29,14 @@
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
+    "src/**/*.d.ts",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
-  ]
+  ],
+  "vueCompilerOptions": {
+    "experimentalCompatMode": 2
+  }
 }
--- a/vite.config.js
+++ b/vite.config.js
@ -1,10 +1,12 @@
 import path from 'path'
 import { defineConfig } from 'vite'
-import { createVuePlugin } from 'vite-plugin-vue2'
+import { createVuePlugin as Vue2 } from 'vite-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({
  resolve: {
@ -19,7 +21,8 @@ const config = defineConfig({
  },

  plugins: [
-    createVuePlugin(),
+    Vue2(),
+    ScriptSetup(),
    WindiCSS(),
    Components({
      resolvers: [
@ -27,12 +30,21 @@ const config = defineConfig({
          componentPrefix: '',
        }),
      ],
+      dts: 'src/components.d.ts',
    }),
    Icons(),
+    AutoImport({
+      imports: [
+        '@vue/composition-api',
+        'vue-router',
+        '@vueuse/core',
+      ],
+      dts: 'src/auto-imports.d.ts',
+    }),
  ],

  server: {
-    port: 8080,
+    port: 3333,
  },
 })

--- a/yarn.lock
+++ b/yarn.lock
@ -100,7 +100,7 @@
  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.16.8.tgz#31560f9f29fdf1868de8cb55049538a1b9732a60"
  integrity sha512-m7OkX0IdKLKPpBlJtF561YJal5y/jyI5fNfWbPxh2D/nbzzGI4qRyrD8xO2jB24u7l+5I2a43scCG2IrfjC50Q==

-"@babel/core@^7.16.10":
+"@babel/core@^7.16.10", "@babel/core@^7.16.7":
  version "7.16.12"
  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.16.12.tgz#5edc53c1b71e54881315923ae2aedea2522bb784"
  integrity sha512-dK5PtG1uiN2ikk++5OzSYsitZKny4wOCD0nrO4TqnW4BVBTQ2NGS3NgilvT/TEyxTST7LNyWV/T4tXDoD3fOgg==
@ -283,7 +283,7 @@
    chalk "^2.0.0"
    js-tokens "^4.0.0"

-"@babel/parser@^7.16.10", "@babel/parser@^7.16.12", "@babel/parser@^7.16.7":
+"@babel/parser@^7.16.10", "@babel/parser@^7.16.12", "@babel/parser@^7.16.4", "@babel/parser@^7.16.7", "@babel/parser@^7.16.8":
  version "7.16.12"
  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.16.12.tgz#9474794f9a650cf5e2f892444227f98e28cdf8b6"
  integrity sha512-VfaV15po8RiZssrkPweyvbGVSe4x2y+aciFCgn0n0/SJMR22cwofRV1mtnJQYcSB1wUTaA/X1LnA3es66MCO5A==
@ -344,7 +344,7 @@
    "@babel/parser" "^7.16.7"
    "@babel/types" "^7.16.7"

-"@babel/traverse@^7.16.10", "@babel/traverse@^7.16.7":
+"@babel/traverse@^7.16.10", "@babel/traverse@^7.16.7", "@babel/traverse@^7.16.8":
  version "7.16.10"
  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.16.10.tgz#448f940defbe95b5a8029975b051f75993e8239f"
  integrity sha512-yzuaYXoRJBGMlBhsMJoUW7G1UmSb/eXr/JHYM/MsOJgavJibLwASijW7oXBdw3NQ6T0bW7Ty5P/VarOs9cHmqw==
@ -631,6 +631,24 @@
    "@vue/babel-plugin-transform-vue-jsx" "^1.2.1"
    camelcase "^5.0.0"

+"@vue/compiler-core@3.2.29", "@vue/compiler-core@^3.2.26":
+  version "3.2.29"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.29.tgz#b06097ab8ff0493177c68c5ea5b63d379a061097"
+  integrity sha512-RePZ/J4Ub3sb7atQw6V6Rez+/5LCRHGFlSetT3N4VMrejqJnNPXKUt5AVm/9F5MJriy2w/VudEIvgscCfCWqxw==
+  dependencies:
+    "@babel/parser" "^7.16.4"
+    "@vue/shared" "3.2.29"
+    estree-walker "^2.0.2"
+    source-map "^0.6.1"
+
+"@vue/compiler-dom@^3.2.26":
+  version "3.2.29"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.29.tgz#ad0ead405bd2f2754161335aad9758aa12430715"
+  integrity sha512-y26vK5khdNS9L3ckvkqJk/78qXwWb75Ci8iYLb67AkJuIgyKhIOcR1E8RIt4mswlVCIeI9gQ+fmtdhaiTAtrBQ==
+  dependencies:
+    "@vue/compiler-core" "3.2.29"
+    "@vue/shared" "3.2.29"
+
 "@vue/component-compiler-utils@^3.2.2":
  version "3.3.0"
  resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz#f9f5fb53464b0c37b2c8d2f3fbfe44df60f61dc9"
@ -654,6 +672,46 @@
  dependencies:
    tslib "^2.3.1"

+"@vue/reactivity-transform@^3.2.26":
+  version "3.2.29"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.2.29.tgz#a08d606e10016b7cf588d1a43dae4db2953f9354"
+  integrity sha512-YF6HdOuhdOw6KyRm59+3rML8USb9o8mYM1q+SH0G41K3/q/G7uhPnHGKvspzceD7h9J3VR1waOQ93CUZj7J7OA==
+  dependencies:
+    "@babel/parser" "^7.16.4"
+    "@vue/compiler-core" "3.2.29"
+    "@vue/shared" "3.2.29"
+    estree-walker "^2.0.2"
+    magic-string "^0.25.7"
+
+"@vue/reactivity@3.2.29":
+  version "3.2.29"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.29.tgz#afdc9c111d4139b14600be17ad80267212af6052"
+  integrity sha512-Ryhb6Gy62YolKXH1gv42pEqwx7zs3n8gacRVZICSgjQz8Qr8QeCcFygBKYfJm3o1SccR7U+bVBQDWZGOyG1k4g==
+  dependencies:
+    "@vue/shared" "3.2.29"
+
+"@vue/runtime-core@3.2.29":
+  version "3.2.29"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.29.tgz#fb8577b2fcf52e8d967bd91cdf49ab9fb91f9417"
+  integrity sha512-VMvQuLdzoTGmCwIKTKVwKmIL0qcODIqe74JtK1pVr5lnaE0l25hopodmPag3RcnIcIXe+Ye3B2olRCn7fTCgig==
+  dependencies:
+    "@vue/reactivity" "3.2.29"
+    "@vue/shared" "3.2.29"
+
+"@vue/runtime-dom@^3.2.29":
+  version "3.2.29"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.29.tgz#35e9a2bf04ef80b86ac2ca0e7b2ceaccf1e18f01"
+  integrity sha512-YJgLQLwr+SQyORzTsBQLL5TT/5UiV83tEotqjL7F9aFDIQdFBTCwpkCFvX9jqwHoyi9sJqM9XtTrMcc8z/OjPA==
+  dependencies:
+    "@vue/runtime-core" "3.2.29"
+    "@vue/shared" "3.2.29"
+    csstype "^2.6.8"
+
+"@vue/shared@3.2.29", "@vue/shared@^3.2.26":
+  version "3.2.29"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.29.tgz#07dac7051117236431d2f737d16932aa38bbb925"
+  integrity sha512-BjNpU8OK6Z0LVzGUppEk0CMYm/hKDnZfYdjSmPOs0N+TR1cLKJAkDwW8ASZUvaaSLEi6d3hVM7jnWnX+6yWnHw==
+
 "@vueuse/core@^7.5.5":
  version "7.5.5"
  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-7.5.5.tgz#c2f2a8783de0884acfb0be25e71ec3c6d1f9c42e"
@ -964,6 +1022,11 @@ cssesc@^3.0.0:
  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==

+csstype@^2.6.8:
+  version "2.6.19"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.19.tgz#feeb5aae89020bb389e1f63669a5ed490e391caa"
+  integrity sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ==
+
 de-indent@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
@ -1002,6 +1065,11 @@ define-properties@^1.1.3:
  dependencies:
    object-keys "^1.0.12"

+defu@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/defu/-/defu-5.0.1.tgz#a034278f9b032bf0845d261aa75e9ad98da878ac"
+  integrity sha512-EPS1carKg+dkEVy3qNTqIdp2qV7mUP08nIsupfwQpz++slCVRw7qbQyWvSTig+kFPwz2XXp5/kIIkH+CwrJKkQ==
+
 dir-glob@^3.0.1:
  version "3.0.1"
  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
@ -1037,6 +1105,13 @@ domelementtype@^2.0.1, domelementtype@^2.2.0:
  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57"
  integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==

+domhandler@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-3.3.0.tgz#6db7ea46e4617eb15cf875df68b2b8524ce0037a"
+  integrity sha512-J1C5rIANUbuYK+FuFL98650rihynUOEzRLxW+90bKZRWB6A1X1Tf82GxR1qAWLyfNPRvjqfip3Q5tdYlmAa9lA==
+  dependencies:
+    domelementtype "^2.0.1"
+
 domhandler@^4.2.0, domhandler@^4.2.2:
  version "4.3.0"
  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.0.tgz#16c658c626cf966967e306f966b431f77d4a5626"
@ -1044,7 +1119,7 @@ domhandler@^4.2.0, domhandler@^4.2.2:
  dependencies:
    domelementtype "^2.2.0"

-domutils@^2.8.0:
+domutils@^2.4.2, domutils@^2.8.0:
  version "2.8.0"
  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
  integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==
@ -1512,7 +1587,7 @@ estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
  integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==

-estree-walker@^2.0.1:
+estree-walker@^2.0.1, estree-walker@^2.0.2:
  version "2.0.2"
  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
  integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
@ -1791,6 +1866,16 @@ html-tags@^2.0.0:
  resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-2.0.0.tgz#10b30a386085f43cede353cc8fa7cb0deeea668b"
  integrity sha1-ELMKOGCF9Dzt41PMj6fLDe7qZos=

+htmlparser2@5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-5.0.1.tgz#7daa6fc3e35d6107ac95a4fc08781f091664f6e7"
+  integrity sha512-vKZZra6CSe9qsJzh0BjBGXo8dvzNsq/oGvsjfRdOrrryfeD9UOBEEQdeoqCRmKZchF5h2zOBMQ6YuQ0uRUmdbQ==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^3.3.0"
+    domutils "^2.4.2"
+    entities "^2.0.0"
+
 htmlparser2@^7.1.2:
  version "7.2.0"
  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-7.2.0.tgz#8817cdea38bbc324392a90b1990908e81a65f5a5"
@ -2904,6 +2989,18 @@ universalify@^2.0.0:
  resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
  integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==

+unplugin-auto-import@^0.5.11:
+  version "0.5.11"
+  resolved "https://registry.yarnpkg.com/unplugin-auto-import/-/unplugin-auto-import-0.5.11.tgz#334768c734456bd802344547b839d7164ed8bd42"
+  integrity sha512-MJ3POLe/IysRHF4yd32FkKDoxqSRoiuIHm89ys67B8FLuz2Pvh9poeqTVe6IhJsNxwv0+GSdFfj5Dpq24lhm4g==
+  dependencies:
+    "@antfu/utils" "^0.4.0"
+    "@rollup/pluginutils" "^4.1.2"
+    local-pkg "^0.4.1"
+    magic-string "^0.25.7"
+    resolve "^1.21.0"
+    unplugin "^0.3.0"
+
 unplugin-icons@^0.13.0:
  version "0.13.0"
  resolved "https://registry.yarnpkg.com/unplugin-icons/-/unplugin-icons-0.13.0.tgz#9bb2e75c61609dae86938044186288590bb990ba"
@ -2933,6 +3030,28 @@ unplugin-vue-components@^0.17.14:
    resolve "^1.21.0"
    unplugin "^0.3.0"

+unplugin-vue2-script-setup@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/unplugin-vue2-script-setup/-/unplugin-vue2-script-setup-0.9.1.tgz#f4fea45ecad2e217df9c9a20487566541367aa27"
+  integrity sha512-1+I300JJ8SBajD3EYQI4Ee7RReLvPS3cL5Rio12e54Vv6e4cd8rPwTNogpskHtt5DNdYA31Cr+DGAf2MmPpsFw==
+  dependencies:
+    "@antfu/utils" "^0.4.0"
+    "@babel/core" "^7.16.7"
+    "@babel/generator" "^7.16.8"
+    "@babel/parser" "^7.16.8"
+    "@babel/traverse" "^7.16.8"
+    "@babel/types" "^7.16.8"
+    "@rollup/pluginutils" "^4.1.2"
+    "@vue/compiler-core" "^3.2.26"
+    "@vue/compiler-dom" "^3.2.26"
+    "@vue/reactivity-transform" "^3.2.26"
+    "@vue/shared" "^3.2.26"
+    defu "^5.0.0"
+    htmlparser2 "5.0.1"
+    magic-string "^0.25.7"
+    tslib "^2.3.1"
+    unplugin "^0.3.0"
+
 unplugin@^0.2.21:
  version "0.2.21"
  resolved "https://registry.yarnpkg.com/unplugin/-/unplugin-0.2.21.tgz#7852cddd9f78f0b32881812fd2efd5a39dcc64e5"
@ -3020,7 +3139,7 @@ vite@^2.7.13:
  optionalDependencies:
    fsevents "~2.3.2"

-vue-demi@*, vue-demi@^0.12.1:
+vue-demi@*:
  version "0.12.1"
  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.12.1.tgz#f7e18efbecffd11ab069d1472d7a06e319b4174c"
  integrity sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw==