title: Load different page template for mobile in nuxt
body: <p>I'm working on a larger project and need to create a separate UX for mobile users on <em>some</em> pages. Using a responsive layout with CSS won't cut it, and dynamic component rendering with <code>v-if</code> results in a horrifying template.</p>
  
  <p><a href="https://stackoverflow.com/a/53969157/11195973">This answer</a> is the closest that I have come to, but I want to avoid manually defining routes as there are a ton of pages.</p>
  
  <p>I am currently using a middleware to redirect based on a user agent check:</p>
  
  <pre><code>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))
      }
    }
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>I also tried working with <a href="https://stackoverflow.com/a/54617885/11195973">this answer</a> but using <a href="https://github.com/dotneet/nuxt-device-detect" rel="noreferrer">nuxt-device-detect</a> 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 <code>document.documentElement.clientWidth</code>.</p>
  
  <hr>
  
  <p>I guess in short, my question is: what is the best practice for serving separate pages to mobile users?</p>