Build multiple pages using quasar

Question

I need to build a multi-page website using Quasar to host on Netlify but Quasar is only building the index.html.

I have tried to use Quasar build and Quasar build --mode ssr. Both have failed in building more than the index.html.

Is there a way to accomplish multiple pages?

Answer 1

The concept of SPA is excellent, however it still does not suite everybody's needs, an example is having a backend app (for example django) and not willing to spend a lot of time to develop a rest api or graphql for it to serve the SPA contents.

Quasar cli at the end of the day in its core is just a webpack config that you can customize to achieve whatever you want that webpack can do, including multi page apps, here is a quick way to achieve this:

apps/myapp/pages.js

module.exports = {
  main_page: {
    entry: `${__dirname}/pages/main/main_page.js`
  }
  blog_entry_page: {
    entry: `${__dirname}/pages/blog/blog_entry_page.js`
  }
  ...
}

quasar.conf.js:

const HtmlWebpackPlugin = require('@quasar/app/node_modules/html-webpack-plugin')
const pages = require('./apps/myapp/pages')

module.exports = function (ctx) {
  return {
    ...
    build: {
      ...
      extendWebpack (cfg) {
        ...
        Object.keys(pages).forEach(function (page) {
          // Add page webpack entry
          cfg.entry[page] = pages[page].entry

          // Output an html file for the page
          cfg.plugins.push(
            new HtmlWebpackPlugin({
              template: 'mytemplate.html',
              filename: `html/${page}.html`,
              chunks: [page]
            })
          )
        })
        ...
      }
    }
  }

The above is a simplified example just to demonstrate the concept, for a complete and functional example see: https://gitlab.com/noor-projects/noor/tree/master/quasar-cli (check this commit to know about what was added to enable MPA support)