feat: device detection in screen size middleware

raulwwq0 · Jul 6, 2023 · b45cec8 · b45cec8
1 parent 3ead4af
commit b45cec8
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 1 deletion.
diff --git a/apps/web/middleware/valid-screen.ts b/apps/web/middleware/valid-screen.ts
@@ -5,10 +5,11 @@ enum ScreenSize {
 
 export default defineNuxtRouteMiddleware(() => {
     const { width } = useWindowSize();
+    const { isDesktop } = useDevice();
 
     const isValidResolutions = width.value >= ScreenSize.WIDTH;
 
-    if (!isValidResolutions) {
+    if (!isDesktop || !isValidResolutions) {
         return navigateTo('/non-supported-screen');
     }
 });
diff --git a/apps/web/nuxt.config.ts b/apps/web/nuxt.config.ts
@@ -9,6 +9,7 @@ export default defineNuxtConfig({
         '@nuxtjs/supabase',
         '@nuxtjs/robots',
         '@nuxtjs/fontaine',
+        '@nuxtjs/device',
         '@vueuse/nuxt',
         [
             '@pinia/nuxt',
@@ -47,6 +48,9 @@ export default defineNuxtConfig({
         },
     },
     css: ['@/assets/style/reset.scss'],
+    device: {
+        refreshOnResize: true,
+    },
     vite: {
         ssr: {
             noExternal: ['vuetify'],

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -19,6 +19,7 @@
     },
     "devDependencies": {
         "@mdi/js": "^7.2.96",
+        "@nuxtjs/device": "^3.1.0",
         "@nuxtjs/eslint-config-typescript": "^12.0.0",
         "@nuxtjs/fontaine": "^0.2.5",
         "@nuxtjs/supabase": "^0.3.1",

diff --git a/package-lock.json b/package-lock.json