5

I'm working on a larger project and need to create a separate UX for mobile users on some pages. Using a responsive layout with CSS won't cut it, and dynamic component rendering with v-if results in a horrifying template.

This answer is the closest that I have come to, but I want to avoid manually defining routes as there are a ton of pages.

I am currently using a middleware to redirect based on a user agent check:

export default function(context) {
  if (context.isMobile) {
    if (context.route.fullPath.indexOf('/m') !== 0) {
      return context.redirect('/m' + context.route.fullPath)
    }
  }

  if (context.isDesktop) {
    if (context.route.fullPath.indexOf('/m') === 0) {
      return context.redirect(context.route.fullPath.substring(2))
    }
  }
}

but I don't have a way of telling whether there is a mobile version or not, so if there isn't, the error page will be displayed.

I also tried working with this answer but using nuxt-device-detect instead of breakpoints, but since the router is configured before getting in the browser, the check function will return the fallback option, so it didn't work well for me. Also since I'll be using SSR I'm avoiding things like document.documentElement.clientWidth.

I guess in short, my question is: what is the best practice for serving separate pages to mobile users?

Lupu Ștefan Alex
  • 251
  • 2
  • 7
  • Can you set metadata in the router based on whether there's a mobile version of the page or not? Could then do something similar to this: (pseudo code) `if (context.isMobile && context.route.meta.hasMobileVersion)` – Rixcy Mar 14 '19 at 09:30
  • @Rixcy I have come across that idea in the first answer I mentioned, but I would try avoiding the manual router configuration. Is there another way to add some information to the routes than using the `router` option in the nuxt.config.js file and then `extendRoutes()`? – Lupu Ștefan Alex Mar 15 '19 at 07:38

0 Answers0