How can I pull Vue Router pages from the server?

Question

I'm building an Electron app that needs to have multiple pages. I've looked at Vue Router (I'm already using Vue) as a routing system, but I'd like to store every page a a separate HTML file.

I've tried a couple of things:

• Making an Ajax request to the page, then putting its contents into the route. When trying to navigate to the route, I got a route not allowed error.
• Making an Ajax request to the page, then replacing the #app element's contents with the requested page. This caused the {{ template_things }} to stop working.

I'm open to using other routing systems, too. Vue Router just seemed the most convenient.

Thank you!

Answer 1

You could try out Nuxt.JS.

The big innovation of Nuxt.js comes with the nuxt generate command. When building your application, it will generate the HTML for every one of your routes and store it in a file.

For example, the following file structure:

-| pages/
----| about.vue
----| index.vue

Will generate:

-| dist/
----| about/
------| index.html
----| index.html

There is an Electron starter app with Nuxt on GitHub