fix: support vp commands for nuxt

Author: ubugeeei

.github/workflows/format.yml

@@ -1,4 +1,4 @@
-name: Vize Format
+name: Vite+ Format
 
 on:
   pull_request:
@@ -14,7 +14,6 @@ on:
       - 'pnpm-lock.yaml'
       - 'vite.config.ts'
       - 'vitest.config.ts'
-      - 'vize.config.json'
       - 'nuxt.config.ts'
       - 'tsconfig.json'
       - 'tsconfig.vize.json'
@@ -37,12 +36,8 @@ jobs:
           cache: pnpm
       - name: Enable pnpm
         run: corepack enable
-      - name: Setup Rust
-        uses: dtolnay/rust-toolchain@stable
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
-      - name: Install Vize CLI
-        run: cargo install --git https://github.com/ubugeeei/vize --tag v0.63.0 --locked vize
       - name: Run format check
         run: pnpm fmt:check
         env:

.github/workflows/linter.yml

@@ -13,7 +13,6 @@ on:
       - 'pnpm-lock.yaml'
       - 'vite.config.ts'
       - 'vitest.config.ts'
-      - 'vize.config.json'
       - 'nuxt.config.ts'
       - 'tsconfig.json'
       - 'tsconfig.vize.json'

.github/workflows/typecheck.yml

@@ -13,7 +13,6 @@ on:
       - 'pnpm-lock.yaml'
       - 'vite.config.ts'
       - 'vitest.config.ts'
-      - 'vize.config.json'
       - 'nuxt.config.ts'
       - 'tsconfig.json'
       - 'tsconfig.vize.json'

.github/workflows/vitest.yml

@@ -13,7 +13,6 @@ on:
       - 'pnpm-lock.yaml'
       - 'vite.config.ts'
       - 'vitest.config.ts'
-      - 'vize.config.json'
       - 'nuxt.config.ts'
       - 'tsconfig.json'
       - 'tsconfig.vize.json'

README.md

@@ -29,20 +29,20 @@ pnpm install
 
 ## Commands
 
-開発サーバやビルドなどの npm scripts は pnpm 経由で実行します。Lint / Format / Type Check は Vize 系ツールを利用します。
-
-| 用途          | コマンド          |
-| ------------- | ----------------- |
-| 開発サーバ    | `pnpm dev`        |
-| ビルド        | `pnpm build`      |
-| 静的生成      | `pnpm generate`   |
-| プレビュー    | `pnpm preview`    |
-| Lint          | `pnpm lint`       |
-| Format        | `pnpm fmt`        |
-| Format Check  | `pnpm fmt:check`  |
-| Type Check    | `pnpm typecheck`  |
-| Test          | `pnpm test`       |
-| Test（watch） | `pnpm test:watch` |
+開発サーバやビルドなどの npm scripts は pnpm 経由で実行できます。Vite+ の `vp dev` / `vp build` も Nuxt に橋渡しされ、Format は Vite+ の `vp fmt`、Lint / Type Check は Vize 系ツールを利用します。
+
+| 用途          | コマンド                            |
+| ------------- | ----------------------------------- |
+| 開発サーバ    | `pnpm dev` / `vp dev`               |
+| ビルド        | `pnpm build` / `vp build`           |
+| 静的生成      | `pnpm generate`                     |
+| プレビュー    | `pnpm preview`                      |
+| Lint          | `pnpm lint`                         |
+| Format        | `pnpm fmt` / `vp fmt --write`       |
+| Format Check  | `pnpm fmt:check` / `vp fmt --check` |
+| Type Check    | `pnpm typecheck`                    |
+| Test          | `pnpm test`                         |
+| Test（watch） | `pnpm test:watch`                   |
 
 ## CI
 
@@ -53,7 +53,7 @@ GitHub Actions でも同じ pnpm scripts を実行します。
 - `pnpm typecheck`
 - `pnpm test`
 
-`pnpm fmt:check` と `pnpm typecheck` は Rust-native Vize CLI を利用します。
+`pnpm fmt:check` は Vite+、`pnpm typecheck` は Rust-native Vize CLI を利用します。
 
 ## Deploy
 

app/components/AppFooter.vue

@@ -3,7 +3,9 @@ const { t } = useVfjsI18n();
 </script>
 
 <template>
-  <footer class="border-t border-[var(--rule)] flex flex-wrap gap-x-[24px] gap-y-[8px] items-baseline justify-between px-[var(--pad-x)] py-[20px] text-[12px] text-[var(--ink-3)] [font-family:var(--font-mono)]">
+  <footer
+    class="border-t border-[var(--rule)] flex flex-wrap gap-x-[24px] gap-y-[8px] items-baseline justify-between px-[var(--pad-x)] py-[20px] text-[12px] text-[var(--ink-3)] [font-family:var(--font-mono)]"
+  >
     <div>
       <NuxtLink class="text-inherit underline hover:no-underline hover:text-[var(--ink-3)]" to="/">
         {{ t.back_top }}

app/components/AppHeader.vue

@@ -15,16 +15,16 @@ const { scheme, setScheme } = useColorScheme();
         to="/"
       >
         <AppLogoMark class="w-[16px] h-auto text-[var(--ink)]" />
-        <span>
-          Vue Fes Japan Speakers
-        </span>
+        <span>Vue Fes Japan Speakers</span>
       </NuxtLink>
       <div class="flex items-center gap-2">
         <select
           class="border border-[var(--rule)] bg-[var(--paper)] text-[var(--ink-2)] [font-family:var(--font-mono)] text-[12px] tracking-[0.08em] px-[8px] py-[5px] cursor-pointer"
           :aria-label="t.color_scheme"
           :value="scheme"
-          @change="setScheme(($event.target as HTMLSelectElement).value as 'light' | 'dark' | 'system')"
+          @change="
+            setScheme(($event.target as HTMLSelectElement).value as 'light' | 'dark' | 'system')
+          "
         >
           <option value="light">
             {{ t.color_scheme_light }}

app/components/AppLogoMark.vue

@@ -10,6 +10,6 @@
     <path
       d="M26.19,89.73c12.25,0,22.19-9.93,22.19-22.19s-9.93-22.19-22.19-22.19-22.19,9.93-22.19,22.19,9.93,22.19,22.19,22.19Z"
       fill="var(--accent)"
-     />
+    />
   </svg>
 </template>

app/components/AppMasthead.vue

@@ -7,14 +7,20 @@ const { t } = useVfjsI18n();
 </script>
 
 <template>
-  <section class="border-b border-[var(--rule)] pt-[clamp(48px,8vw,120px)] pb-[clamp(40px,6vw,72px)] px-[var(--pad-x)]">
+  <section
+    class="border-b border-[var(--rule)] pt-[clamp(48px,8vw,120px)] pb-[clamp(40px,6vw,72px)] px-[var(--pad-x)]"
+  >
     <div class="grid grid-cols-12 gap-6 items-end">
-      <div class="col-span-9 flex items-center gap-[clamp(18px,2.4vw,34px)] max-[800px]:col-span-12 max-[560px]:flex-col max-[560px]:items-start">
-        <AppLogoMark class="w-[clamp(42px,5vw,72px)] h-auto text-[var(--ink)] mb-[0.08em] max-[560px]:mb-0" />
-        <h1 class="m-0 [font-family:var(--font-display)] font-[500] text-[clamp(38px,6.2vw,104px)] leading-[0.96] text-[var(--ink)] word-break-keep-all">
-          <span>
-            Vue Fes Japan Speakers
-          </span>
+      <div
+        class="col-span-9 flex items-center gap-[clamp(18px,2.4vw,34px)] max-[800px]:col-span-12 max-[560px]:flex-col max-[560px]:items-start"
+      >
+        <AppLogoMark
+          class="w-[clamp(42px,5vw,72px)] h-auto text-[var(--ink)] mb-[0.08em] max-[560px]:mb-0"
+        />
+        <h1
+          class="m-0 [font-family:var(--font-display)] font-[500] text-[clamp(38px,6.2vw,104px)] leading-[0.96] text-[var(--ink)] word-break-keep-all"
+        >
+          <span>Vue Fes Japan Speakers</span>
         </h1>
       </div>
       <aside
@@ -40,7 +46,9 @@ const { t } = useVfjsI18n();
           {{ t.meta_years }}
         </div>
       </aside>
-      <p class="col-span-9 mt-[28px] text-[clamp(16px,1.4vw,20px)] text-[var(--ink-2)] leading-[1.5] m-0 max-[800px]:col-span-12">
+      <p
+        class="col-span-9 mt-[28px] text-[clamp(16px,1.4vw,20px)] text-[var(--ink-2)] leading-[1.5] m-0 max-[800px]:col-span-12"
+      >
         {{ t.sub_all }}
       </p>
     </div>

app/components/ChronicleView.vue

@@ -70,7 +70,7 @@ const grouped = computed(() => {
         :counts="counts"
         :selected-year="selectedYear"
         @update:selected-year="emit('update:selectedYear', $event)"
-       />
+      />
       <div
         v-if="grouped.length === 0"
         class="px-[var(--pad-x)] py-[80px] text-center [font-family:var(--font-mono)] text-[13px] tracking-[0.05em] uppercase text-[var(--ink-3)]"
@@ -94,7 +94,9 @@ const grouped = computed(() => {
             >
               {{ year }}
             </span>
-            <span class="[font-family:var(--font-mono)] text-[12px] tracking-[0.08em] uppercase text-[var(--ink-3)] mt-[10px]">
+            <span
+              class="[font-family:var(--font-mono)] text-[12px] tracking-[0.08em] uppercase text-[var(--ink-3)] mt-[10px]"
+            >
               {{ t.year_total_talks(arr.length) }}
             </span>
             <NuxtLink
@@ -120,9 +122,13 @@ const grouped = computed(() => {
                   {{ String(i + 1).padStart(2, '0') }}
                 </span>
               </div>
-              <div class="grid grid-cols-[minmax(0,300px)_minmax(0,1fr)] gap-[clamp(16px,2vw,32px)] items-baseline max-[700px]:grid-cols-1 max-[700px]:gap-[6px]">
+              <div
+                class="grid grid-cols-[minmax(0,300px)_minmax(0,1fr)] gap-[clamp(16px,2vw,32px)] items-baseline max-[700px]:grid-cols-1 max-[700px]:gap-[6px]"
+              >
                 <!-- Speaker names -->
-                <div class="[font-family:var(--font-display)] font-[500] text-[clamp(17px,1.5vw,22px)] tracking-[-0.01em] leading-[1.25]">
+                <div
+                  class="[font-family:var(--font-display)] font-[500] text-[clamp(17px,1.5vw,22px)] tracking-[-0.01em] leading-[1.25]"
+                >
                   <template v-for="(n, ni) in s.name" :key="n">
                     <span v-if="ni > 0" aria-hidden="true" class="text-[var(--ink-2)] font-normal">
                       ×