multiple pages in Vue.js CLI

by

First: always read the official documentation. With Vue you can build a SPA, and a MPA is also no problem. Just follow the guides:

You should create a new project with Vue CLI 3. Once you’ve created your project set it to be manually configured. Make sure you don’t choose the SPA option. Vue will then create a nice “start” project using a MPA approach. After that, just repeat the config on vue.config.js.

Updated #1

It seems that some updates on Vue Cli, have changed the way to build a MPA app, so:

  • Create a new application vue create test
  • Choose Manual configuration

The boilerplate created will be for a SPA. So make the following changes:

  • Create a folder under src named pages (optional)

  • Into this folder create your own pages: Home, About, etc.

  • Copy and paste the App.vue and main.js from src, into your new folders – Home, etc.

  • Format the App.vue into this folders, to your liking.

  • Create a vue.config.js and set it like this: https://cli.vuejs.org/config/#pages

Below, I have three images demonstrating this:

  • First: a fresh new app
  • Second: this same app, with the changes I made above
  • Third: the vue.config.js from this app

fresh new app
this same app, with the changes I made above
the vue.config.js from this app

You don’t need to create the pages folder, this is just to get the idea.

Link to GitHub: Building a MPA App

More Related Contents:

  1. What should I do to use this webpacked JS library? [closed]
  2. Vue.js dynamic images not working
  3. Display unescaped HTML in Vue.js
  4. Vue.js get selected option on @change
  5. How to format Vuetify data table date column?
  6. How can I bind the html content in vuejs?
  7. What is ?
  8. Vue.js data-bind style backgroundImage not working
  9. Styling Vuetify selectors
  10. How to disable ESLint in vue-cli?
  11. How to bind img src to data in Vue
  12. php How to save post and save show to php file like this [closed]
  13. I need help on this project for my friend
  14. HTML5 Canvas vs. SVG vs. div
  15. addEventListener(“click”,…) firing immediately [duplicate]
  16. Changing the selected option of an HTML Select element
  17. jQuery UI accordion that keeps multiple sections open?
  18. Vanilla JavaScript equivalent of jQuery’s $.ready() – how to call a function when the page/DOM is ready for it [duplicate]
  19. jQuery: Why use document.ready if external JS at bottom of page?
  20. get the data of uploaded file in javascript
  21. Is it possible to dynamically scale text size based on browser width?
  22. How to change active class while click to another link in bootstrap use jquery?
  23. Sending message to a specific connected users using webSocket?
  24. Bug with Chrome’s localStorage implementation?
  25. Submit and onclick not working together
  26. Why does `childNodes` return a number larger than I expect?
  27. Fill user name and password in a webpage using VBA
  28. How does HTML tags work inside script tag?
  29. Axios request giving getter setter methods instead of data queried
  30. Chrome Extension get selected text

Leave a Comment