How to create a multipage Vue.js application with pages on nested subdirectories by modifying vue.config.js?

Question

I have a multipage Vue.js application with working pages on domain/legal; domain/submit; etc. I've implemented that with the help of Vue.js' pages (i.e. customizing vue.config.js)

In other words, I'm all good making the above work.

I'm now trying to implement further nested pages under a new subdirectory level (additionally to the ones I already have as per above). i.e.

• domain/org/profile1
• domain/org/profile2
• domain/org/profile3

Any way to make this work by customizing vue.config.js?

Current attempt vue.config.js code:

module.exports = {
  pages: {
    index: {
      entry: "./src/pages/home/main.js",
      template: "public/index.html",
      title: "Home",
      chunks: ["chunk-vendors", "chunk-common", "index"],
    },
    legal: {
      entry: "./src/pages/legal/main.js",
      template: "public/index.html",
      title: "Legal",
      chunks: ["chunk-vendors", "chunk-common", "legal"],
    },
    submit: {
      entry: "./src/pages/submit/main.js",
      template: "public/index.html",
      title: "Submit",
      chunks: ["chunk-vendors", "chunk-common", "submit"],
    },
    org: {
      digitalocean: {
        entry: "./src/pages/org/digitalocean/main.js",
        template: "public/index.html",
        title: "Digital Ocean",
        chunks: ["chunk-vendors", "chunk-common", "digitalocean"],
      },
    },
  },
};

And file structure:

src
-assets
-components
-pages
--home
    App.vue
    main.js
--legal
    App.vue
    main.js
--submit
    App.vue
    main.js
--org
---digitalocean
     App.vue
     main.js

This gives me the error:

Invalid options in vue.config.js: child "pages" fails because [child "org" fails because ["org" must be a string, "org" must be an array, child "entry" fails because ["entry" is required]]]

Pointers will be extremely welcome on how to make the nested pages work by modifying vue.config.js!

Dabble

Umm, you don't wanna use vue-router? – Polyptych

@HimanshuPant thanks for dipping in! Should I not need to use vue-router I'd like to make it simple by only using vue.config.js. Do you see any way of achieving that? – Dabble

The documentation says that any other properties are passed to html-webpack-plugin Try this ``` module.exports = { pages: { index: { entry: "./src/pages/home/main.js", template: "public/index.html", title: "Home", chunks: ["chunk-vendors", "chunk-common", "index"], pages: { digitalocean: { entry: "./src/pages/org/digitalocean/main.js", template: "public/index.html", title: "Digital Ocean", chunks: ["chunk-vendors", "chunk-common", "digitalocean"], }, } } }, }; ``` – Polyptych

Thanks for the suggestion: the error implementing your suggestion is: Invalid options in vue.config.js: child "pages" fails because [child "pages" fails because ["pages" must be a string, "pages" must be an array, child "entry" fails because ["entry" is required]]] – Dabble

Any other pointers welcome @HimanshuPant :) – Dabble

Answer 1

I’ve managed to solve this with only vue.config.js with the below. Note: powerful little thing vue.config.js is:

├── src
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   └── pages
│       ├── home
│       │   ├── App.vue
│       │   ├── cache.js
│       │   └── main.js
│       ├── legal
│       │   ├── App.vue
│       │   └── main.js
│       ├── org
│       │   ├── digitalocean
│       │   │   ├── App.vue
│       │   │   └── main.js
│       │   └── intercom
│       └── submit
│           ├── App.vue
│           └── main.js
└── vue.config.js

And vue.config.js:

module.exports = {
  pages: {
    index: {
      entry: "./src/pages/home/main.js",
      template: "public/index.html",
      filename: "index.html",
      title: "Home",
      chunks: ["chunk-vendors", "chunk-common", "index"],
    },
    legal: {
      entry: "./src/pages/legal/main.js",
      template: "public/index.html",
      filename: "legal.html",
      title: "Legal",
      chunks: ["chunk-vendors", "chunk-common", "legal"],
    },
    submit: {
      entry: "./src/pages/submit/main.js",
      template: "public/index.html",
      filename: "submit.html",
      title: "Submit",
      chunks: ["chunk-vendors", "chunk-common", "submit"],
    },
    "org/digitalocean": {
      entry: "./src/pages/org/digitalocean/main.js",
      template: "public/index.html",
      filename: "org/digitalocean.html",
      title: "Digital Ocean",
      chunks: ["chunk-vendors", "chunk-common", "org/digitalocean"],
    },
  },
};

Dabble

how do you find the page URL when you serve it? – Kuhlmann

Still doesn't work with webpack devserver. – Iredale