skip to Main Content

So, with default Vue CLI, I get Vue which loads from index.html page.
And everything else, I do in App.vue to work with Vue and dynamic contents on that page.

But what if I want to drastically change layout of page ?
Like, I don’t know how I’m supposed to clean whole page, and start fresh ?
Then should I use another html page, which is somehow called from index.html, but then Vue won’t work in that page, right ?

Not sure how this works.

Can I use something other than index.html to be default file on which Vue will look where to load (there is selector mount('#app');, but that selector only looks in index.html or I’m doing something wrong ? )

2

Answers


  1. Usually you include a JS file into the index.html that mounts your app into the element of choice (for example #app).

    The same way you can have any number of HTML files with own JS files that mount different apps into them.

    Also you could have many apps mounted into different elements in one HTML file.

    The possibilities are endless…

    Login or Signup to reply.
  2. I am guessing you need to read up on Single Page Applications that Vue helps you create.

    To drastically change the layout of the page, is equivalent to jumping on a new page. Instead of rendering a new html page Vue helps you to clear the whole page and mount another component while also maintaining the history state for the browser. You can achieve this using routing.

    What you are looking for is the official package that handles routing in a VueJS application; Vue-Router.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search