multiple pages in Vue.js CLI
I'm having trouble figuring out how to have multiple pages in a Vue CLI project. Right now I have my home page with a few components and I want to create another page but I do not know how to do that. Am I supposed to create multiple html files where the index.html by default is? In a simple file structure with css js img folder and html files as pages I know that creating another html file means making another page. But I don't understand how this works with Vue CLI project.
I saw stuff like vue-router and "pages" in Vue documentation but I do not understand them very well. What are my alternatives? Is there a guide that explains that in detail, because I wasn't able to find any, let alone detailed. Would be very happy if you could help! Thank you!
Answer
First: always read the official documentation. With Vue you can build a SPA, and a MPA is also no problem. Just follow the guides:
- https://cli.vuejs.org/
- https://cli.vuejs.org/guide/html-and-static-assets.html#building-a-multi-page-app
- https://cli.vuejs.org/config/#pages
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
srcnamedpages(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.vueinto 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
You don't need to create the pages folder, this is just to get the idea.
Link to GitHub: Building a MPA App