refactor: optimize styles & extract greet from rust

package.json

@@ -40,14 +40,14 @@
     "@iconify-json/carbon": "^1.2.3",
     "@iconify-json/ri": "^1.2.1",
     "@intlify/unplugin-vue-i18n": "^5.2.0",
+    "@shikijs/markdown-it": "^1.22.0",
     "@tauri-apps/cli": "^2.0.3",
     "@types/node": "^22.7.7",
     "@vitejs/plugin-vue": "^5.1.4",
     "@vueuse/core": "^11.1.0",
     "@vueuse/head": "^2.0.0",
     "eslint": "^9.13.0",
     "markdown-it-link-attributes": "^4.0.1",
-    "markdown-it-shiki": "^0.9.0",
     "sass": "^1.80.3",
     "typescript": "^5.6.3",
     "unocss": "^0.63.4",
@@ -56,6 +56,7 @@
     "unplugin-vue-markdown": "^0.26.2",
     "unplugin-vue-router": "^0.10.8",
     "vite": "^5.4.9",
+    "vite-plugin-vue-devtools": "^7.5.2",
     "vite-plugin-vue-layouts": "^0.11.0",
     "vue-tsc": "^2.1.6"
   }

src/App.vue

@@ -2,7 +2,7 @@
 import { init } from './tauri'
 
 // init
-onMounted(async () => {
+onBeforeMount(async () => {
   await init()
 })
 </script>

src/auto-imports.d.ts

@@ -189,7 +189,7 @@ declare global {
   const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
   const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
   const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
-  const useLink: typeof import('vue-router')['useLink']
+  const useLink: typeof import('vue-router/auto')['useLink']
   const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
   const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
   const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
@@ -489,7 +489,7 @@ declare module 'vue' {
     readonly useIntervalFn: UnwrapRef<typeof import('@vueuse/core')['useIntervalFn']>
     readonly useKeyModifier: UnwrapRef<typeof import('@vueuse/core')['useKeyModifier']>
     readonly useLastChanged: UnwrapRef<typeof import('@vueuse/core')['useLastChanged']>
-    readonly useLink: UnwrapRef<typeof import('vue-router')['useLink']>
+    readonly useLink: UnwrapRef<typeof import('vue-router/auto')['useLink']>
     readonly useLocalStorage: UnwrapRef<typeof import('@vueuse/core')['useLocalStorage']>
     readonly useMagicKeys: UnwrapRef<typeof import('@vueuse/core')['useMagicKeys']>
     readonly useManualRefHistory: UnwrapRef<typeof import('@vueuse/core')['useManualRefHistory']>

src/components.d.ts

@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     BaseFooter: typeof import('./components/BaseFooter.vue')['default']
+    GreetFromRust: typeof import('./components/GreetFromRust.vue')['default']
     HelloWorld: typeof import('./components/HelloWorld.vue')['default']
     NavMenu: typeof import('./components/NavMenu.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

src/components/GreetFromRust.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { invoke } from '@tauri-apps/api/core'
+
+const greetMsg = ref('')
+const name = ref('')
+
+async function greet() {
+  // Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
+  greetMsg.value = await invoke('greet', { name: name.value })
+}
+</script>
+
+<template>
+  <form class="mt-4 gap-2 items-center justify-center p-2" flex="~" @submit.prevent="greet">
+    <input id="greet-input" v-model="name" placeholder="Enter a name...">
+    <button type="submit" class="hover:bg-light">
+      Greet
+    </button>
+  </form>
+  <p class="p-2">
+    {{ greetMsg }}
+  </p>
+</template>
+
+<style scoped>
+input,
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  color: #0f0f0f;
+  background-color: #ffffff;
+  transition: border-color 0.25s;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
+}
+
+#greet-input {
+  margin-right: 5px;
+}
+
+.dark {
+  :root {
+    color: #f6f6f6;
+    background-color: #2f2f2f;
+  }
+
+  a:hover {
+    color: #24c8db;
+  }
+
+  input,
+  button {
+    color: #ffffff;
+    background-color: #0f0f0f98;
+  }
+  button:active {
+    background-color: #0f0f0f69;
+  }
+}
+</style>

src/components/HelloWorld.vue

@@ -44,13 +44,4 @@ const app = useAppStore()
     Check out
     <a href="/~https://github.com/YunYouJun/tauri-vite-vue" target="_blank">tauri-vite-vue</a>, Tauri + Vue + Vite starter
   </p>
-  <p class="read-the-docs mt-4">
-    Click on the logos to learn more
-  </p>
 </template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>

src/main.ts

@@ -6,7 +6,6 @@ import { createHead } from '@vueuse/head'
 import { routes } from 'vue-router/auto-routes'
 
 import App from './App.vue'
-// import { initMenu, initTrayMenu } from './tauri/menu'
 import type { UserModule } from '~/types'
 
 import '@unocss/reset/tailwind.css'

src/pages/index.vue

@@ -1,14 +1,18 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { invoke } from '@tauri-apps/api/core'
-
-const greetMsg = ref('')
-const name = ref('')
-
-async function greet() {
-  // Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
-  greetMsg.value = await invoke('greet', { name: name.value })
-}
+import { useAppStore } from '../stores/app'
+
+const appStore = useAppStore()
+const globalVars = computed<{
+  name: string
+  exists: boolean
+}[]>(() => {
+  return [
+    {
+      name: 'window.__TAURI_INTERNALS__',
+      exists: appStore.inTauri,
+    },
+  ]
+})
 </script>
 
 <template>
@@ -24,56 +28,18 @@ async function greet() {
     </a>
   </div>
 
+  <ul class="my-2">
+    <li v-for="globalVar in globalVars" :key="globalVar.name">
+      <strong>{{ globalVar.name }}</strong> {{ globalVar.exists ? '✅' : '❌' }}
+    </li>
+  </ul>
+
   <HelloWorld msg="Tauri + Vite + Vue" />
 
-  <form class="row mt-4" @submit.prevent="greet">
-    <input id="greet-input" v-model="name" placeholder="Enter a name...">
-    <button type="submit">
-      Greet
-    </button>
-  </form>
-  <p>{{ greetMsg }}</p>
+  <GreetFromRust />
 </template>
 
 <style scoped>
-input,
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  color: #0f0f0f;
-  background-color: #ffffff;
-  transition: border-color 0.25s;
-  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
-}
-
-#greet-input {
-  margin-right: 5px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    color: #f6f6f6;
-    background-color: #2f2f2f;
-  }
-
-  a:hover {
-    color: #24c8db;
-  }
-
-  input,
-  button {
-    color: #ffffff;
-    background-color: #0f0f0f98;
-  }
-  button:active {
-    background-color: #0f0f0f69;
-  }
-}
-
 .logo {
   display: inline-block;
   height: 10em;

src/shims.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="vite/client" />
+
+declare interface Window {
+  // extend the window
+  __TAURI_INTERNALS__: any
+}
+
+declare module '*.md' {
+  import type { DefineComponent } from 'vue'
+
+  const component: DefineComponent<object, object, any>
+  export default component
+}
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+
+  const component: DefineComponent<object, object, any>
+  export default component
+}

src/stores/app.ts

@@ -3,10 +3,18 @@ import { ref } from 'vue'
 import type { DirEntry } from '@tauri-apps/plugin-fs'
 
 export const useAppStore = defineStore('app', () => {
+  const inTauri = ref(false)
+
   const folderPath = ref('')
   const folderEntries = ref<DirEntry[]>([])
 
+  onMounted(() => {
+    inTauri.value = typeof window.__TAURI_INTERNALS__ !== 'undefined'
+  })
+
   return {
+    inTauri,
+
     folderPath,
     folderEntries,
   }

src/styles/index.scss

@@ -4,13 +4,15 @@ body {
 }
 
 .t-button {
+  color: white;
+  background-color: #646cff;
+
   border-radius: 8px;
   border: 1px solid transparent;
   padding: 0.6em 1.2em;
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
-  background-color: var(--c-bg-alt);
   cursor: pointer;
   transition: border-color 0.25s;
 

src/tauri/menu.ts

@@ -140,6 +140,9 @@ export async function initTrayMenu() {
       {
         id: 'quit',
         text: 'Quit',
+        action: () => {
+          getCurrentWindow().close()
+        },
       },
     ],
   })

vite.config.ts

@@ -7,15 +7,17 @@ import Layouts from 'vite-plugin-vue-layouts'
 import Components from 'unplugin-vue-components/vite'
 import Unocss from 'unocss/vite'
 import Markdown from 'unplugin-vue-markdown/vite'
+import VueDevTools from 'vite-plugin-vue-devtools'
 
 import VueI18n from '@intlify/unplugin-vue-i18n/vite'
 
 import LinkAttributes from 'markdown-it-link-attributes'
-import Shiki from 'markdown-it-shiki'
+import Shiki from '@shikijs/markdown-it'
 
 import AutoImport from 'unplugin-auto-import/vite'
 
 import VueRouter from 'unplugin-vue-router/vite'
+import { VueRouterAutoImports } from 'unplugin-vue-router'
 
 const host = process.env.TAURI_DEV_HOST
 
@@ -85,10 +87,14 @@ export default defineConfig({
     AutoImport({
       imports: [
         'vue',
-        'vue-router',
         'vue-i18n',
         '@vueuse/core',
         '@vueuse/head',
+        VueRouterAutoImports,
+        {
+          // add any other imports you were relying on
+          'vue-router/auto': ['useLink'],
+        },
       ],
       dts: 'src/auto-imports.d.ts',
       dirs: [
@@ -116,21 +122,21 @@ export default defineConfig({
     Markdown({
       wrapperClasses: 'prose prose-sm m-auto text-left',
       headEnabled: true,
-      markdownItSetup(md) {
-        // https://prismjs.com/
-        md.use(Shiki, {
-          theme: {
-            light: 'vitesse-light',
-            dark: 'vitesse-dark',
-          },
-        })
+      async markdownItSetup(md) {
         md.use(LinkAttributes, {
           matcher: (link: string) => /^https?:\/\//.test(link),
           attrs: {
             target: '_blank',
             rel: 'noopener',
           },
         })
+        md.use(await Shiki({
+          defaultColor: false,
+          themes: {
+            light: 'vitesse-light',
+            dark: 'vitesse-dark',
+          },
+        }))
       },
     }),
 
@@ -140,5 +146,8 @@ export default defineConfig({
       compositionOnly: true,
       include: [path.resolve(__dirname, 'locales/**')],
     }),
+
+    // /~https://github.com/webfansplz/vite-plugin-vue-devtools
+    VueDevTools(),
   ],
 })