feat: Nuxt3 / Vuetify3 正式版対応

.env_example

@@ -0,0 +1,2 @@
+SITE_NAME=SweetPotato
+OWNER_NAME=Omado

nuxt.config.ts

@@ -1,7 +1,17 @@
-import { defineNuxtConfig } from 'nuxt'
-
-// https://v3.nuxtjs.org/api/configuration/nuxt.config
+// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
 export default defineNuxtConfig({
+  // server side rendering mode
+  ssr: true,
+
+  // typescripts
+  typescript: {
+    strict: true,
+    typeCheck: true,
+  },
+  imports: {
+    // Auto-import pinia stores defined in `~/stores`
+    dirs: ['stores']
+  },
   srcDir: "src/",
   runtimeConfig: {
     public: {
@@ -16,41 +26,41 @@ export default defineNuxtConfig({
         pathPrefix: false
     },
   ],
-  autoImports: {
-    dirs: ['stores']
-  },
   build: {
     transpile: ['vuetify']
   },
-  buildModules: [
-    // 別途 pinia本体も要インストール
+  modules: [
     '@pinia/nuxt',
-    // @nuxtjs/i18nはまだ Nuxt3をサポートしていない
-    '@intlify/nuxt3'
+    '@nuxtjs/i18n',
   ],
-  intlify: {
-    // src/localesフォルダがデフォルトで参照される
+  i18n: {
+    locales: [
+      { code: 'en', file: 'en.json' },
+      { code: 'ja', file: 'ja.json' },
+    ],
+    lazy: true,
+    defaultLocale: 'ja',
+    langDir: 'locales/',
     vueI18n: {
       locale: 'ja',
       fallbackLocale: 'en',
-    }
+    },
   },
   // @ts-ignore
   vite: {
     define: {
       'process.env.DEBUG': 'false',
     }
   },
-  typescript: {
-    strict: true
-  },
-  meta: {
-    title: process.env.SITE_NAME,
-    viewport: 'width=device-width, initial-scale=1, maximum-scale=1',
-    charset: 'utf-8',
-    meta: [
-      { hid: 'description', name: 'description', content: process.env.SITE_DESCRIPTION },
-      { name: 'robots', content: 'noarchive' }
-    ]
+  app: {
+    head: {
+      title: process.env.SITE_NAME,
+      viewport: 'width=device-width, initial-scale=1, maximum-scale=1',
+      charset: 'utf-8',
+      meta: [
+        { hid: 'description', name: 'description', content: process.env.SITE_DESCRIPTION },
+        { name: 'robots', content: 'noarchive' }
+      ]
+    }
   }
 })

package.json

@@ -7,15 +7,16 @@
     "preview": "nuxt preview"
   },
   "devDependencies": {
-    "@intlify/nuxt3": "^0.2.1",
-    "@mdi/js": "^6.6.96",
-    "nuxt": "3.0.0-rc.1"
+    "@mdi/js": "^7.0.96",
+    "nuxt": "^3.0.0",
+    "vue-tsc": "^1.0.12",
+    "typescript": "^4.9.4"
   },
   "dependencies": {
-    "@pinia/nuxt": "^0.1.8",
-    "pinia": "^2.0.13",
-    "sass": "^1.51.0",
-    "unenv": "^0.4.6",
-    "vuetify": "3.0.0-beta.1"
+    "@nuxtjs/i18n": "^8.0.0-beta.7",
+    "@pinia/nuxt": "^0.4.6",
+    "pinia": "^2.0.28",
+    "sass": "^1.56.2",
+    "vuetify": "^3.0.4"
   }
-}
+}

src/components/Drawer.vue

@@ -19,9 +19,11 @@
         v-if="!auth.isLoggedIn"
         @click="loginToAccount"
       >
-        <v-list-item-icon>
-          {{ mdiLogin }}
-        </v-list-item-icon>
+        <v-list-item>
+          <v-icon>
+            {{ mdiLogin }}
+          </v-icon>
+        </v-list-item>
         <v-list-item-title>ログイン</v-list-item-title>
       </v-list-item>
       <v-list-item
@@ -30,9 +32,11 @@
         :to="item.to"
         class="no-hover"
       >
-        <v-list-item-icon>
-          {{ item.icon }}
-        </v-list-item-icon>
+        <v-list-item>
+          <v-icon>
+            {{ item.icon }}
+          </v-icon>
+        </v-list-item>
         <v-list-item-title>{{ $t(item.text) }}</v-list-item-title>
       </v-list-item>
     </v-list>

src/components/FileSelectButton.vue

@@ -7,7 +7,7 @@
       height="100%"
       color="info"
       class="text-none"
-      :variant="!isDragged ? 'contained' : 'outlined'"
+      :variant="!isDragged ? 'plain' : 'outlined'"
       depressed
       @click="openFileSelect"
   >

src/components/Header.vue

@@ -4,37 +4,41 @@
     color="primary"
     app
   >
-    <v-btn class="text-h6" to="/">{{ title }}</v-btn>
-    <v-btn v-for="(btn, i) in nav" :key="i" :to="btn.to" class="hidden-sm-and-down" text>
-      <v-icon role="img" aria-hidden="false">
-        {{ btn.icon }}
-      </v-icon>
+    <v-btn class="ml-2" to="/" variant="plain">
+      {{ title }}
+    </v-btn>
+    <v-btn
+      v-for="(btn, i) in nav"
+      :key="i"
+      :prepend-icon="btn.icon"
+      :to="btn.to || undefined"
+      :href="btn.href || undefined"
+      class="hidden-sm-and-down"
+      variant="text"
+    >
       {{ $t(btn.text) }}
     </v-btn>
     <Language />
     <v-btn
       @click="changeTheme"
-      aria-label="themeChangeButton"
+      class="mr-3"
+      aria-label="Change theme button"
       aria-haspopup="true"
       aria-expanded="false"
-      icon
-    >
-      <v-icon aria-label="Change theme" role="img" aria-hidden="false">
-        {{ mdiThemeLightDark }}
-      </v-icon>
-    </v-btn>
+      :icon="mdiThemeLightDark"
+      role="img"
+      aria-hidden="false"
+      variant="text"
+    />
     <v-btn
       @click="menu.toggle"
       class="hidden-lg-and-up"
-      aria-label="menuButton"
+      aria-label="My account button"
       aria-haspopup="true"
       aria-expanded="false"
-      icon
-    >
-      <v-icon aria-label="My Account" role="img" aria-hidden="false">
-        {{ mdiMenu }}
-      </v-icon>
-    </v-btn>
+      :icon="mdiMenu"
+      variant="text"
+    />
   </v-app-bar>
 </template>
 

src/components/Language.vue

@@ -3,11 +3,10 @@
   <v-menu>
     <template v-slot:activator="{ props }">
       <v-btn
-        icon
+        :icon="mdiTranslate"
         v-bind="props"
-      >
-        <v-icon>{{ mdiTranslate }}</v-icon>
-      </v-btn>
+        variant="text"
+      />
     </template>
     <v-list
       style="position: absolute; left: -100px; z-index: 999; height:auto;"

src/composables/use-nav.ts

@@ -1,6 +1,6 @@
 import {
     mdiAccount,
-    mdiDiscord,
+    mdiDisc,
     mdiFileSearch,
     mdiFileUpload,
     mdiInformation,
@@ -9,7 +9,7 @@ import {
 export default function () {
     return [
         { icon: mdiInformation, text: "SweetPotato.Navigation.Header.Introduction", to: "/introduction" },
-        { icon: mdiDiscord, text: "SweetPotato.Navigation.Header.Community", to: "#" },
+        { icon: mdiDisc, text: "SweetPotato.Navigation.Header.Community", href: "https://discord.com" },
         { icon: mdiFileSearch, text: "SweetPotato.Navigation.Header.Explorer", to: "/explorer/levels" },
         { icon: mdiFileUpload, text: "SweetPotato.Navigation.Header.Upload", to: "/upload" },
         { icon: mdiAccount, text: "SweetPotato.Navigation.Header.MyPage", to: "/my-page" }

src/pages/index.vue

@@ -29,28 +29,24 @@
         </v-col>
         <v-col cols="12" sm="12" md="4" lg="4">
           <v-card>
-            <v-card-header>
-              <v-card-header-text>
-                <v-card-title class="text-h5">{{ $t('SweetPotato.Index.ServerInfo') }}</v-card-title>
-              </v-card-header-text>
-            </v-card-header>
-            <v-list-item height="32px" v-for="(info, index) in infoServer" :key="index">
-              <v-list-item-avatar left>
+            <v-card-title class="text-h5">{{ $t('SweetPotato.Index.ServerInfo') }}</v-card-title>
+            <v-card-text height="32px" v-for="(info, index) in infoServer" :key="index">
+              <v-list-item left>
                 <v-icon :icon="info.icon" />
-              </v-list-item-avatar>
+              </v-list-item>
               <v-list-item-subtitle>
                 <h4>{{ $t(info.key) }}: {{ info.value }}</h4>
               </v-list-item-subtitle>
-            </v-list-item>
+            </v-card-text>
             <v-spacer class="mb-2"/>
-            <v-list-item height="32px" v-for="(info, index) in infoTabs" :key="index">
-              <v-list-item-avatar left>
+            <v-card-text height="32px" v-for="(info, index) in infoTabs" :key="index">
+              <v-list-item left>
                 <v-icon :icon="info.icon" />
-              </v-list-item-avatar>
+              </v-list-item>
               <v-list-item-subtitle>
                 <h4>{{ $t('SweetPotato.Index.Total') }}{{ $t(info.text) }}: {{ info.count }}</h4>
               </v-list-item-subtitle>
-            </v-list-item>
+            </v-card-text>
           </v-card>
         </v-col>
       </v-row>

src/pages/introduction.vue

@@ -3,12 +3,9 @@
     <v-row justify="center" align="center">
       <v-col cols="12" sm="12" md="10" lg="10">
         <v-card>
-          <v-card-header>
-            <v-card-header-text class="text-h4">
-              SweetPotatoとは?
-            </v-card-header-text>
-          </v-card-header>
-
+          <v-card-title>
+            SweetPotatoとは?
+          </v-card-title>
           <v-card-text>
             <p class="text-h5">
               本サービスは、ユーザーが作成した、譜面、スキン、背景等を投稿をSonolus上で簡単に利用できるよう配信を行うサービスです。端的に言うと、ファイル投稿サイトです。</p>

src/pages/my-page.vue

@@ -0,0 +1,3 @@
+<template>
+    <p>なんもまだ作ってない</p>
+</template>

src/plugins/vuetify.ts

@@ -1,6 +1,6 @@
 import { defineNuxtPlugin } from '#app'
 import { createVuetify } from 'vuetify'
-import { aliases, mdi } from 'vuetify/lib/iconsets/mdi-svg'
+import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'
 
 import * as components from 'vuetify/components'
 import * as directives from 'vuetify/directives'