Migrate to Nuxt 4.0.0

app/app.vue

@@ -6,7 +6,7 @@ import TooltipProvider from './components/ui/tooltip/TooltipProvider.vue';
 <template>
     <div class="relative flex flex-col min-h-svh">
         <header class="w-full sticky top-0 z-50">
-            <Navbar />
+            <UiNavbar />
         </header>
         <main class="flex flex-1 flex-col">
             <TooltipProvider disableHoverableContent :delay-duration="200">

app/components/ui/button/index.ts

@@ -0,0 +1,36 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export { default as Button } from './Button.vue'
+
+export const buttonVariants = cva(
+    'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+    {
+        variants: {
+            variant: {
+                default:
+                    'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+                destructive:
+                    'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+                outline:
+                    'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+                secondary:
+                    'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+                ghost:
+                    'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+                link: 'text-primary underline-offset-4 hover:underline',
+            },
+            size: {
+                default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+                sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+                lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+                icon: 'size-9',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+            size: 'default',
+        },
+    },
+)
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>

app/components/ui/navbar/Navbar.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
+import Button from '../button/Button.vue'
 
 const colorMode = useColorMode()
 

app/openapi/extractor.ts

@@ -0,0 +1,184 @@
+/**
+ * Generated by orval v7.10.0 🍺
+ * Do not edit manually.
+ * OpenAPI definition
+ * OpenAPI spec version: v0
+ */
+export interface KodikMetadata {
+  title?: string;
+  translations?: KodikTranslation[];
+}
+
+export interface KodikTranslation {
+  id?: string;
+  title?: string;
+  mediaId?: string;
+  mediaHash?: string;
+  mediaType?: string;
+  translationType?: string;
+  episodeCount?: number;
+}
+
+export interface KodikTranslationDTO {
+  mediaType?: string;
+  mediaId?: string;
+  mediaHash?: string;
+}
+
+export type KodikVideoLinksLinks = {[key: string]: Link[]};
+
+export interface KodikVideoLinks {
+  links?: KodikVideoLinksLinks;
+}
+
+export interface Link {
+  type?: string;
+  src?: string;
+}
+
+export type ShikimoriParams = {
+id: string;
+};
+
+export type KodikParams = {
+id: string;
+};
+
+export type VideoParams = {
+translationDTO: KodikTranslationDTO;
+quality: string;
+episode: number;
+};
+
+export type shikimoriResponse200 = {
+  data: KodikMetadata
+  status: 200
+}
+    
+export type shikimoriResponseComposite = shikimoriResponse200;
+    
+export type shikimoriResponse = shikimoriResponseComposite & {
+  headers: Headers;
+}
+
+export const getShikimoriUrl = (params: ShikimoriParams,) => {
+  const normalizedParams = new URLSearchParams();
+
+  Object.entries(params || {}).forEach(([key, value]) => {
+    
+    if (value !== undefined) {
+      normalizedParams.append(key, value === null ? 'null' : value.toString())
+    }
+  });
+
+  const stringifiedParams = normalizedParams.toString();
+
+  return stringifiedParams.length > 0 ? `http://localhost:8081/metadata/shikimori?${stringifiedParams}` : `http://localhost:8081/metadata/shikimori`
+}
+
+export const shikimori = async (params: ShikimoriParams, options?: RequestInit): Promise<shikimoriResponse> => {
+  
+  const res = await fetch(getShikimoriUrl(params),
+  {      
+    ...options,
+    method: 'GET'
+    
+    
+  }
+)
+
+  const body = [204, 205, 304].includes(res.status) ? null : await res.text()
+  const data: shikimoriResponse['data'] = body ? JSON.parse(body) : {}
+
+  return { data, status: res.status, headers: res.headers } as shikimoriResponse
+}
+
+
+
+export type kodikResponse200 = {
+  data: KodikMetadata
+  status: 200
+}
+    
+export type kodikResponseComposite = kodikResponse200;
+    
+export type kodikResponse = kodikResponseComposite & {
+  headers: Headers;
+}
+
+export const getKodikUrl = (params: KodikParams,) => {
+  const normalizedParams = new URLSearchParams();
+
+  Object.entries(params || {}).forEach(([key, value]) => {
+    
+    if (value !== undefined) {
+      normalizedParams.append(key, value === null ? 'null' : value.toString())
+    }
+  });
+
+  const stringifiedParams = normalizedParams.toString();
+
+  return stringifiedParams.length > 0 ? `http://localhost:8081/metadata/kodik?${stringifiedParams}` : `http://localhost:8081/metadata/kodik`
+}
+
+export const kodik = async (params: KodikParams, options?: RequestInit): Promise<kodikResponse> => {
+  
+  const res = await fetch(getKodikUrl(params),
+  {      
+    ...options,
+    method: 'GET'
+    
+    
+  }
+)
+
+  const body = [204, 205, 304].includes(res.status) ? null : await res.text()
+  const data: kodikResponse['data'] = body ? JSON.parse(body) : {}
+
+  return { data, status: res.status, headers: res.headers } as kodikResponse
+}
+
+
+
+export type videoResponse200 = {
+  data: KodikVideoLinks
+  status: 200
+}
+    
+export type videoResponseComposite = videoResponse200;
+    
+export type videoResponse = videoResponseComposite & {
+  headers: Headers;
+}
+
+export const getVideoUrl = (params: VideoParams,) => {
+  const normalizedParams = new URLSearchParams();
+
+  Object.entries(params || {}).forEach(([key, value]) => {
+    
+    if (value !== undefined) {
+      normalizedParams.append(key, value === null ? 'null' : value.toString())
+    }
+  });
+
+  const stringifiedParams = normalizedParams.toString();
+
+  return stringifiedParams.length > 0 ? `http://localhost:8081/extract/video?${stringifiedParams}` : `http://localhost:8081/extract/video`
+}
+
+export const video = async (params: VideoParams, options?: RequestInit): Promise<videoResponse> => {
+  
+  const res = await fetch(getVideoUrl(params),
+  {      
+    ...options,
+    method: 'GET'
+    
+    
+  }
+)
+
+  const body = [204, 205, 304].includes(res.status) ? null : await res.text()
+  const data: videoResponse['data'] = body ? JSON.parse(body) : {}
+
+  return { data, status: res.status, headers: res.headers } as videoResponse
+}

app/openapi/search.ts

@@ -4,12 +4,6 @@
  * OpenAPI definition
  * OpenAPI spec version: v0
  */
-import axios from 'axios';
-import type {
-  AxiosRequestConfig,
-  AxiosResponse
-} from 'axios';
-
 export interface KodikResponse {
   total?: number;
   results?: Result[];
@@ -98,14 +92,45 @@ export type SearchParams = {
 title: string;
 };
 
-export const search = <TData = AxiosResponse<KodikResponse>>(
-    params: SearchParams, options?: AxiosRequestConfig
- ): Promise<TData> => {
-    return axios.get(
-      `http://localhost:8080/search`,{
-    ...options,
-        params: {...params, ...options?.params},}
-    );
+export type searchResponse200 = {
+  data: KodikResponse
+  status: 200
 }
     
-export type SearchResult = AxiosResponse<KodikResponse>
+export type searchResponseComposite = searchResponse200;
+    
+export type searchResponse = searchResponseComposite & {
+  headers: Headers;
+}
+
+export const getSearchUrl = (params: SearchParams,) => {
+  const normalizedParams = new URLSearchParams();
+
+  Object.entries(params || {}).forEach(([key, value]) => {
+    
+    if (value !== undefined) {
+      normalizedParams.append(key, value === null ? 'null' : value.toString())
+    }
+  });
+
+  const stringifiedParams = normalizedParams.toString();
+
+  return stringifiedParams.length > 0 ? `http://localhost:8080/search?${stringifiedParams}` : `http://localhost:8080/search`
+}
+
+export const search = async (params: SearchParams, options?: RequestInit): Promise<searchResponse> => {
+  
+  const res = await fetch(getSearchUrl(params),
+  {      
+    ...options,
+    method: 'GET'
+    
+    
+  }
+)
+
+  const body = [204, 205, 304].includes(res.status) ? null : await res.text()
+  const data: searchResponse['data'] = body ? JSON.parse(body) : {}
+
+  return { data, status: res.status, headers: res.headers } as searchResponse
+}

app/pages/anime/[slug].vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { Button } from '~/components/ui/button';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '~/components/ui/dialog';
 import { kodik, type KodikTranslation } from '~/openapi/extractor';
 
 const route = useRoute();
@@ -44,7 +46,7 @@ function closeDialog() {
             <span>{{ item.episodeCount }}</span>
         </div>
     </div>
-    <p>{{ $route.params.slug }}</p>
+    <p>{{ route.params.slug }}</p>
     <Dialog v-bind:open="isSelectingEpisode">
         <DialogTrigger as-child>
             <Button variant="outline">

app/pages/index.vue

@@ -14,6 +14,8 @@ import {
 import { toast } from "vue-sonner";
 import 'vue-sonner/style.css'
 import { Icon } from "#components";
+import { Input } from "~/components/ui/input";
+import { Button } from "~/components/ui/button";
 
 const router = useRouter()
 const searchProvider = ref('kodik')

app/pages/search.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { AnimeCard } from '~/components/ui/anime-card'
 import { search, type Result } from '~/openapi/search'
-import AnimeCard from '~/components/ui/anime-card/AnimeCard.vue';
 
 const route = useRoute()
 const searchQuery = ref(route.query.title as string || '')

app/pages/watch.vue

@@ -23,7 +23,7 @@
 
 <script setup lang="ts">
 import { useRoute } from 'vue-router'
-import Player from '~/components/ui/player/Player.vue'
+import { Player } from '~/components/ui/player'
 import { video, type KodikTranslationDTO, type KodikVideoLinks, type VideoParams } from '~/openapi/extractor'
 
 const route = useRoute()
@@ -62,9 +62,7 @@ watchEffect(async () => {
         }
 
         const videoParams: VideoParams = {
-            mediaType: mediaType as string,
-            mediaId: mediaId as string,
-            mediaHash: mediaHash as string,
+            translationDTO: translationDto,
             episode: Number(episode as string),
             quality: '360',
         }
@@ -77,15 +75,16 @@ watchEffect(async () => {
             const bestQuality = qualities.includes('360') ? '360' :
                 qualities[0]
 
-            const hlsLink = results.value.links[bestQuality]?.find(link =>
+            const hlsLink = results.value.links[bestQuality ?? '360']?.find(link =>
                 link.type?.includes('hls') || link.src?.includes('.m3u8')
             )
             console.log(bestQuality)
 
             if (hlsLink?.src) {
                 hlsUrl.value = hlsLink.src
-                console.log("UPDATE hls url")
-                playerOptions.value.sources[0].src = hlsLink.src
+                if (playerOptions.value?.sources[0]) {
+                    playerOptions.value.sources[0].src = hlsUrl.value
+                }
             } else {
                 throw new Error('No HLS stream found in response')
             }

components/ui/button/index.ts

@@ -1,36 +0,0 @@
-import { cva, type VariantProps } from 'class-variance-authority'
-
-export { default as Button } from './Button.vue'
-
-export const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-  {
-    variants: {
-      variant: {
-        default:
-          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
-        destructive:
-          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-        outline:
-          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
-        secondary:
-          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
-        ghost:
-          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
-        link: 'text-primary underline-offset-4 hover:underline',
-      },
-      size: {
-        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
-        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
-        icon: 'size-9',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-)
-
-export type ButtonVariants = VariantProps<typeof buttonVariants>

eslint.config.mjs

@@ -1,5 +1,5 @@
 // @ts-check
-import withNuxt from './.nuxt/eslint.config.mjs'
+import withNuxt from '.nuxt/eslint.config.mjs'
 
 export default withNuxt(
   // Your custom configs here

openapi/extractor.ts

@@ -1,96 +0,0 @@
-/**
- * Generated by orval v7.10.0 🍺
- * Do not edit manually.
- * OpenAPI definition
- * OpenAPI spec version: v0
- */
-import axios from 'axios';
-import type {
-    AxiosRequestConfig,
-    AxiosResponse
-} from 'axios';
-
-export interface KodikMetadata {
-    title?: string;
-    translations?: KodikTranslation[];
-}
-
-export interface KodikTranslation {
-    id?: string;
-    title?: string;
-    mediaId?: string;
-    mediaHash?: string;
-    mediaType?: string;
-    translationType?: string;
-    episodeCount?: number;
-}
-
-export interface KodikTranslationDTO {
-    mediaType?: string;
-    mediaId?: string;
-    mediaHash?: string;
-}
-
-export type KodikVideoLinksLinks = { [key: string]: Link[] };
-
-export interface KodikVideoLinks {
-    links?: KodikVideoLinksLinks;
-}
-
-export interface Link {
-    type?: string;
-    src?: string;
-}
-
-export type ShikimoriParams = {
-    id: string;
-};
-
-export type KodikParams = {
-    id: string;
-};
-
-export type VideoParams = {
-    mediaType: string;
-    mediaId: string;
-    mediaHash: string;
-    quality: string;
-    episode: number;
-};
-
-export const shikimori = <TData = AxiosResponse<KodikMetadata>>(
-    params: ShikimoriParams, options?: AxiosRequestConfig
-): Promise<TData> => {
-    return axios.get(
-        `http://localhost:8081/metadata/shikimori`, {
-        ...options,
-        params: { ...params, ...options?.params },
-    }
-    );
-}
-
-export const kodik = <TData = AxiosResponse<KodikMetadata>>(
-    params: KodikParams, options?: AxiosRequestConfig
-): Promise<TData> => {
-    return axios.get(
-        `http://localhost:8081/metadata/kodik`, {
-        ...options,
-        params: { ...params, ...options?.params },
-    }
-    );
-}
-
-export const video = <TData = AxiosResponse<KodikVideoLinks>>(
-    params: VideoParams, options?: AxiosRequestConfig
-): Promise<TData> => {
-    return axios.get(
-        `http://localhost:8081/extract/video`, {
-        ...options,
-        params: { ...params, ...options?.params },
-    }
-    );
-}
-
-export type ShikimoriResult = AxiosResponse<KodikMetadata>
-export type KodikResult = AxiosResponse<KodikMetadata>
-export type VideoResult = AxiosResponse<KodikVideoLinks>

orval.config.js

@@ -1,15 +1,17 @@
 export const search = {
-    input: './openapi/search.json',
+    input: './app/openapi/search.json',
     output: {
-        target: './openapi/search.ts',
-        baseUrl: 'http://localhost:8080'
+        target: './app/openapi/search.ts',
+        baseUrl: 'http://localhost:8080',
+        client: 'fetch'
     },
 };
 
 export const extractor = {
-    input: './openapi/extractor.json',
+    input: './app/openapi/extractor.json',
     output: {
-        target: './openapi/extractor.ts',
-        baseUrl: 'http://localhost:8081'
+        target: './app/openapi/extractor.ts',
+        baseUrl: 'http://localhost:8081',
+        client: 'fetch'
     },
 }

package.json

@@ -23,7 +23,7 @@
         "hls.js": "^1.6.7",
         "lucide-vue-next": "^0.511.0",
         "node-vibrant": "^4.0.3",
-        "nuxt": "^3.17.4",
+        "nuxt": "^4.0.0",
         "reka-ui": "^2.3.2",
         "shadcn-nuxt": "2.1.0",
         "tailwind-merge": "^3.3.0",