I'm currently calling my MainPage.vue from the components folder to appear in my index.vue by using the following.
<template>
<div>
<MainPage/>
</div>
</template>
My question: How can I use a button click in the index page, to change the MainPage to another page. I'm basically running the site's navigation in the index, and I want to have the content change upon clicking a button.
You can wrap your navigation into /layouts/default.vue to wrap all of your pages. Then you will be able to use either nuxt-link or $router.push to move from page to page.
Here is the documentation on how routes work in Nuxt: https://nuxtjs.org/docs/features/file-system-routing/
Here is how layouts work: https://nuxtjs.org/docs/concepts/views#default-layout
PS: in Nuxt2, pay attention to the needed <nuxt /> tag for your layout like this
<template>
<nuxt />
</template>