title: Nuxt open link into modal
body: <p>I'm building a <a href="https://nuxtjs.org/" rel="noreferrer">Nuxt</a> application that has a list of products and clicking on one of them open a dedicated page of the product. It is working fine.</p>
  
  <p>Structure is:</p>
  
  <pre><code>/pages/featured // directory of products
  /pages/product/:id/:slug // Dedicated product page
  </code></pre>
  
  <p>Now I wish to add a new feature:</p>
  
  <ul>
  <li>I wish to keep the dedicated page of the product if clicked from a page that is not the directory of the products or if people land directly on it;</li>
  <li>I wish to open an almost full-screen dialog of the product on top of the directory if, obviously, clicked from the directory;</li>
  <li>Keep the routing change on dialogs.</li>
  </ul>
  
  <p>A nice example of what I wish to achieve is the photo directory of <a href="https://youpic.com/explore" rel="noreferrer">Youpic</a>.</p>
  
  <p>A list of "products", visible entirely in a dialog with its internal navigation.</p>
  
  <p>I'm looking at the various <a href="https://nuxtjs.org/api/configuration-router/" rel="noreferrer">nuxt-routing</a> and <a href="https://router.vuejs.org/guide/essentials/named-views.html#nested-named-views" rel="noreferrer">vue-router</a> documentations to try developing it but I'm still far away from the solution.</p>
  
  <p>This small portion of the code I see here looks pretty similar at what I need but I don't understand how should I correctly implement it and how to create my nuxt custom routing:</p>
  
  <pre><code>export default {
    router: {
      extendRoutes (routes, resolve) {
        routes.push({
          path: '/users/:id',
          components: {
            default: resolve(__dirname, 'pages/users'), // or routes[index].component
            modal: resolve(__dirname, 'components/modal.vue')
          },
          chunkNames: {
            modal: 'components/modal'
          }
        })
      }
    }
  }
  </code></pre>