feat: tailwind 2 + script setup!

src/components/Footer.vue

@@ -17,11 +17,11 @@
 <script setup lang='ts'>
 import { useI18n } from 'vue-i18n'
 import { locales } from '/~/messages'
-export { isDark } from '/~/utils'
+import { isDark } from '/~/logics'
 
 const i18n = useI18n()
 
-export const toggleLocales = () => {
+const toggleLocales = () => {
   // change to some real logic
   i18n.locale.value = locales[(locales.indexOf(i18n.locale.value) + 1) % locales.length]
 }

src/components/Icon.vue

@@ -3,14 +3,17 @@
 </template>
 
 <script setup="props" lang="ts">
-import { watch, ref, onMounted, nextTick } from 'vue'
+import { watch, ref, onMounted, nextTick, defineProps } from 'vue'
 import Iconify from '@purge-icons/generated'
 
-declare const props: {
-  icon: string
-}
+const props = defineProps({
+  icon: {
+    type: String,
+    required: true,
+  },
+})
 
-export const el = ref<HTMLElement | null>(null)
+const el = ref<HTMLElement | null>(null)
 
 const update = async() => {
   if (el.value) {

src/logics/dark.ts

@@ -1,6 +1,6 @@
 import { watch, computed } from 'vue'
 import { usePreferredDark } from '@vueuse/core'
-import { colorSchema } from '../store'
+import { colorSchema } from './store'
 
 const preferredDark = usePreferredDark()
 

src/logics/index.ts

@@ -0,0 +1,2 @@
+export * from './dark'
+export * from './store'

src/logics/store.ts

@@ -0,0 +1,4 @@
+import { Ref } from 'vue'
+import { useStorage } from '@vueuse/core'
+
+export const colorSchema = useStorage('color-schema', 'auto') as Ref<'auto' | 'dark' | 'light'>

src/main.ts

@@ -1,28 +1,11 @@
 import './main.postcss'
 import { createApp } from 'vue'
-import { createRouter, createWebHistory } from 'vue-router'
-import { createI18n } from 'vue-i18n'
-
-// import routes generated by Voie
-import routes from 'voie-pages'
-// import icons data generated by PurgeIcons
-import '@purge-icons/generated'
+import installPlugins from './plugins'
 
 import App from './App.vue'
-import { messages } from './messages'
 
 const app = createApp(App)
-const router = createRouter({
-  history: createWebHistory(),
-  routes,
-})
 
-const i18n = createI18n({
-  locale: 'en',
-  messages,
-})
-
-app.use(i18n)
-app.use(router)
+installPlugins(app)
 
 app.mount('#app')

src/pages/[...all].vue

@@ -8,5 +8,4 @@
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
-export { t }
 </script>

src/pages/hi/[name].vue

@@ -14,7 +14,7 @@
     <div>
       <button
         class="btn m-3 text-sm mt-8"
-        @click="back"
+        @click="router.back()"
       >
         {{ t('button.back') }}
       </button>
@@ -22,17 +22,18 @@
   </div>
 </template>
 
-<script setup='props' lang='ts'>
+<script setup lang='ts'>
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
+import { defineProps } from 'vue'
 
-declare const props: {
-  name: string
-}
+const props = defineProps({
+  name: {
+    type: String,
+    require: true,
+  },
+})
 
 const router = useRouter()
-export const back = () => router.push('/')
-
 const { t } = useI18n()
-export { t }
 </script>

src/pages/index.vue

@@ -39,14 +39,13 @@ import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 
-export const name = ref('')
+const name = ref('')
 
 const router = useRouter()
-export const go = () => {
+const go = () => {
   if (name.value)
     router.push(`/hi/${name.value}`)
 }
 
 const { t } = useI18n()
-export { t }
 </script>

src/plugins/i18n.ts

@@ -0,0 +1,12 @@
+import { App } from 'vue'
+import { createI18n } from 'vue-i18n'
+import { messages } from '../messages'
+
+export default (app: App) => {
+  const i18n = createI18n({
+    locale: 'en',
+    messages,
+  })
+
+  app.use(i18n)
+}

src/plugins/icons.ts

@@ -0,0 +1,2 @@
+// import icons data generated by PurgeIcons
+import '@purge-icons/generated'

src/plugins/index.ts

@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import installRouter from './router'
+import installI18n from './i18n'
+
+export default (app: App) => {
+  installRouter(app)
+  installI18n(app)
+}

src/plugins/router.ts

@@ -0,0 +1,13 @@
+import { App } from 'vue'
+// import routes generated by Voie
+import { createRouter, createWebHistory } from 'vue-router'
+import routes from 'voie-pages'
+
+export default (app: App) => {
+  const router = createRouter({
+    history: createWebHistory(),
+    routes,
+  })
+
+  app.use(router)
+}

src/store/index.ts

@@ -1 +0,0 @@
-export * from './local'

src/store/local.ts

@@ -1,4 +0,0 @@
-import { Ref } from 'vue'
-import { useStorage } from '@vueuse/core'
-
-export const colorSchema = useStorage('vitesse-schema', 'auto') as Ref<'auto' | 'dark' | 'light'>

src/utils/index.ts

@@ -1 +0,0 @@
-export * from './dark'